Practical Lab Manual

Web Technology (310257)

For Third Year Computer Engineering (2019 Course)

Student Name:
Seat No / Roll No: Class:
Branch:

Department of Computer Engineering

Al Jamia Mohammediyah Education Society’s

Maulana Mukhtar Ahmad Nadvi Technical Campus
Mansoora Campus, Malegaon (Nashik)

1
 Department of Computer Engineering

Certificate
This is to certify that…………………………………………………………………………...

Roll No: ………Exam Seat No:…………………. Class: …………………………………….

Branch............................................................................................ has Successfully Completed

Web Technology Lab Experiments and Assignments as per the term work ofSavitri-

baiPhule Pune University, Pune.

Subject Teacher Head of Department Principal

2
 Maulana Mukhtar Ahmad Nadvi Technical Campus
Department of Computer Engineering

Vision of the Institute

Empowering society through quality education and research for the socio-economic
development of the region.

Mission of the Institute

 Inspire students to achieve excellence in science and engineering.
 Commit to making quality education accessible and affordable to serve society.
 Provide transformative, holistic, and value-based immersive learning experiences for
students.
 Transform into an institution of global standards that contributes to nation-building.
 Develop sustainable, cost-effective solutions through innovation and research.
 Promote quality education in rural areas.

Vision of the Department

To build strong research and learning environment producing globally competent
professionals and innovators who will contribute to the betterment of the society.

Mission of the Department

 To create and sustain an academic environment conducive to the highest level
of research and teaching.
 To provide state-of-the-art laboratories which will be up to date with the new
developments in the area of computer engineering.
 To organize competitive event, industry interactions and global collaborations
in view of providing a nurturing environment for students to prepare for a
successful career and the ability to tackle lifelong challenges in global
industrial needs.
 To educate students to be socially and ethically responsible citizens in view of
national and global development.
 Program Outcomes (POs)
Learners are expected to know and be able to

PO1 Engineering knowledge Apply the knowledge of mathematics, science, Engineering fundamentals,
and an Engineering specialization to the solution of complex Engineering
problems.
PO2 Problem analysis Identify, formulate, review research literature and analyze complex
Engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences and Engineering sciences.
PO3 Design / Development of Design solutions for complex Engineering problems and design system
Solutions components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and
Environmental considerations.
PO4 Conduct Investigations of Use research-based knowledge and research methods including design of
Complex Problems experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
PO5 Modern Tool Usage Create, select, and apply appropriate techniques, resources, and modern
Engineering and IT tools including prediction and modeling to complex
Engineering activities with an understanding of the limitations.
PO6 The Engineer and Society Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
PO7 Environment and Understand the impact of the professional Engineering solutions in societal
Sustainability and Environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.
PO8 Ethics Apply ethical principles and commit to professional ethics and
responsibilities and norms of Engineering practice.
PO9 Individual and Team Work Function effectively as an individual, and as a member or leader in diverse
teams, and in multidisciplinary settings.
P10 Communication Skills Communicate effectively on complex Engineering activities with the
Engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions
P11 Project Management and Demonstrate knowledge and understanding of Engineering and
Finance management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary
Environments.
P12 Life-long Learning Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological
change.
 Program Specific Outcomes (PSO)
A graduate of the Computer Engineering Program will demonstrate

PSO1
Professional Skills-The ability to understand, analyze and develop computer programs in the areas
relatedto algorithms, system software, multimedia, web design, big data analytics, and
networking for efficient design of computer-based systems of varying complexities.
PSO2
Problem-Solving Skills- The ability to apply standard practices and strategies in software project
development using open-ended programming environments to deliver a quality product for
business success.
PSO3
Successful Career and Entrepreneurship- The ability to employ modern computer languages,
environments and platforms in creating innovative career paths to be an entrepreneur and to have
a zest for higher studies
 INDEX

Sr Name of The Experiment

Date Marks Sign
No.
Case study:
Before coding of the website, planning is important,
1 students should visit different websites (Min. 5)
From the evaluation, students should learn and
concludedifferent website design issues, which
should be considered while developing a website.
Implement a web page index.htm for any client
website
(e.g., a restaurant website project) using
2 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
Design the XML document to store the information
of the employees of any business organization and
3 demonstrate the use of:
a) DTD
b) XML Schema
And display the content in (e.g., tabular format) by
using CSS/XSL.
Design and implement a simple calculator using
Java
Script for operations like addition, multiplication,
subtraction, division, square of number etc.
4 a) Design calculator interface like text field for
input and output, buttons for numbers and
operators etc.
b) Validate input values
c) Prompt/alerts for invalid values etc
Implement the sample program demonstrating the
use of Servlet.
5 e.g., Create a database table eBook shop (book _id,
book title, book author, book price, quantity) using
database like Oracle/MySQL etc. and display(use
SQL select query) the table content
using servlet.

1
 Build a dynamic web application using PHP and
MySQL.
a. Create database tables in MySQL and create
6 connection with PHP.
b. Create the add, update, delete and retrieve
functions
in the PHP web app interacting
withMySQL database
Design an application using Angular JS.
e.g., Design registration (first name, last name,
7 username, password) and login page using
Angular JS.

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

8
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
d.

Design an application using Angular JS

9

e.
Design and implement a business interface with
10 necessary business logic for any web application
using EJB

2
 Experiment No.:01

Title: Study different website design issues.

Objectives: Understand about the design issues of different website.

Problem Statement: Case study:

Before coding of the website, planning is important, students should visit different
websites(Min. 5) From the evaluation, students should learn and conclude different website
design issues,which should be considered while developing a website.

Outcomes: Visit different website.

Software & Hardware requirements:

Any browser.

Theoretical concept:

What is Website?

A website is a collection of many web pages, and web pages are digital files that are written
using HTML (Hypertext Markup Language). To make your website available to every
personin the world, it must be stored or hosted on a computer connected to the Internet round
a clock. Such computers are known as a Web Server.

The website’s web pages are linked with hyperlinks and hypertext and share a common
interface and design. The website might also contain some additional documents and files
such as images, videos, or other digital assets.

With the Internet invading every sphere, we see websites for all kinds of causes and
purposes.So, we can also say that a website can also be thought of as a digital environment
capable of delivering information and solutions and promoting interaction between people,
places, and things to support the goals of the organization it was created for.

Components of a Website: We know that a website is a collection of a webpages hosted on

a web-server. These are the components for making a website.
  Webhost: Hosting is the location where the website is physically located. Group
of webpages (linked webpages) licensed to be called a website only when the
webpageis hosted on the webserver. The webserver is a set of files transmitted to
user computers when they specify the website’s address.
 Address: Address of a website also knows as the URL of a website. When a user
wants to open a website then they need to put the address or URL of the
website into the web browser, and the asked website is delivered by the
webserver.
 Homepage: Home page is a very common and important part of a webpage. It is
the first webpage that appears when a visitor visits the website. The home page of
a website is very important as it sets the look and feel of the website and directs
viewers to the rest of the pages on the website.
 Design: It is the final and overall look and feel of the website that has a result of
proper use and integration elements like navigation menus, graphics, layout,
navigation menus etc.
 Content: Every web pages contained on the website together make up the
content of the website. Good content on the webpages makes the website more
effective and attractive.
 The Navigation Structure: The navigation structure of a website is the order of
the pages, the collection of what links to what. Usually, it is held together by at
least one navigation menu.
How to access website:
When we type a certain URL in a browser search bar, the browser requests the page from the
Web server and the Web server returns the required web page and its content to the browser.
Now, it differs from how the server returns the information required in the case of static and
dynamic websites.
Types of Websites:
 Static Website
 Dynamic Website

Static Website: In Static Websites, Web pages are returned by the server which are prebuilt
source code files built using simple languages such as HTML, CSS, or JavaScript. There is
no
processing of content on the server (according to the user) in Static Websites. Web pages are
returned by the server with no change therefore, static Websites are fast. There is no
interaction with databases. Also, they are less costly as the host does not need to support
server-side processing with different languages.
Dynamic Website: In Dynamic Websites, Web pages are returned by the server which is
processed during runtime means they are not prebuilt web pages, but they are built during
runtime according to the user’s demand with the help of server-side scripting languages
suchas PHP, Node.js, ASP.NET and many more supported by the server. So, they are slower
than static websites but updates and interaction with databases are possible. Dynamic
Websites are used over Static Websites as updates can be done very easily as compared to
static websites (Where altering in every page is required) but in Dynamic Websites, it is
possible to do a common change once, and it will reflect in all the web pages.
There are different types of websites on the whole internet, we had chosen some most
common categories to give you a brief idea –

 Blogs: These types of websites are managed by an individual or a small group of

persons, they can cover any topics — they can give you fashion tips, music tips,
travel tips, fitness tips. Nowadays professional blogging has become an external
popular way of earning money online.
 E-commerce: These websites are well known as online shops. These websites allow
usto make purchasing products and online payments for products and services. Stores
canbe handled as standalone websites.
 Portfolio: These types of websites act as an extension of a freelancer resume. It
provides a convenient way for potential clients to view your work while also
allowingyou to expand on your skills or services.
 Brochure: These types of websites are mainly used by small businesses, these types
of websites act as a digital business card, and used to display contact information, and
to advertise services, with just a few pages.
 News and Magazines: These websites need less explanation, the main purpose of
these types of websites is to keep their readers up-to-date from current affairs whereas
magazines focus on the entertainment.
  Social Media: We all know about some famous social media websites like Facebook,
Twitter, Reddit, and many more. These websites are usually created to let people
share their thoughts, images, videos, and other useful components.
 Educational: Educational websites are quite simple to understand as their name itself
explains it. These websites are designed to display information via audio or videos or
images.
 Portal: These types of websites are used for internal purposes within the school,
institute, or any business, these websites often contain a login process allowing
students to access their credential information or allows employees to access their
emails and alerts.

Different Design issues:

Website accessibility

The Web is basically designed to work for all people, irrespective of their culture, language,
location, or physical or mental ability. However, one of the major challenges a web designer
faces is to enhance the accessibility of websites. A good designer should ensure that the
website is not only accessible across the world but also its various features are fully
functional as well.

Compatibility with browsers

With the introduction of different browsers, designers are constantly facing the
challenge of building a website that is compatible with almost all the major browsers. After
designing a website, it should be tested on all browsers to ensure that the website is
completely functional.

Navigational structure

The navigational structure is one of the vital aspects of any website, as the usability of the
website is based on an excellent navigational structure. Hence, in order to avoid any such
issues, designers have to ensure that they provide a proper navigational structure to the users.

Positioning of content
Sr. No Website URL Purpose of Thinks Liked in Things Overall
website the Websites Disliked in evaluation
the ofthe
Websites Websites

Another prominent aspect of a website is that the users should find it readable. While designing
the structure of the website, the designer should place the content in such a manner that it
enhances easy reading. In addition, use suitable colors when it comes to font.

Challenges in creating a responsive website

The process of creating a responsive website is a major challenge for designers as it involves a
wide array of devices, code frameworks, scripts, and of course, the constant need to work in an
innovative way with clients to effectively manage the process.

Here are some of the major issues faced by web designers while building a responsive website:
 When compared to a desktop site, building a responsive website takes a significant
amount of time.
 In responsive websites, the content should be prioritized for mobile use. For smaller
screens, the designer must know precisely what matters, the devices that people use, their
circumstances, and their unique goals.
 Interactions in desktop sites and mobile devices are different.
 Responsive websites recognize media queries to assess the screen size of every visitor
and then display the layout accurately. The issue here is that old browsers, particularly
Internet Explorer version 8 and older, do not recognize media queries.
 In responsive design, scaled images instantly lose details, and hence their meaning. This
is because scaling mainly happens depending on the size of the screen and not on context.
 On smaller devices, designing intuitive navigation menus becomes a real a challenge due
to the limited screen size.

Result:
01 e-commerce, SSH Protocol Online
cloud Payment
https://www.amazon.in Responsive Very
computing, Failures
Website Good
digital
streamingand Good Service
AI

02 Internship Responsive
andTraining Website
https://internshala.com Platform Internship Good
Quality Fraud
Courses
Best learning
Platform

03 Online Responsive Can’t save

Learningand Website videos in device
https://www.udemy.com/ Teaching storage Very
Good Good
marketplace
Mentorship

04 Responsive Paid
Website Subscription
https://www.netflix.com/ Entertainment Not
Easy-to- Subscription Bad
navigate Value
Interface

05 https://en.wikipedia.org/wiki/Main Open Free Source of Not Good

_Page online Knowledge Attractive
Encyclope
dia

Design Issues:

1) Images are loaded very late.

2) Some sections are missing like information about library and there is no events listed in
computer department section.

3) While using mobile for observing websites didn't like it's font and styling.

4) For some websites difficult for me to signing by using google.

5) Plug-Ins required.

6) Site isn't optimized for mobile.

Conclusion:

Therefore, we studied about the different design issues occurs in web development.
 Experiment No.:02

Title: HTML, Web pages

Objective: Understand about the concept of html.

Problem statements: Implement a web page index.htm for any client website (e.g.., a
restaurant website project) using following:

a. HTML syntax:heading tags, basic tags and attributes ,frames ,tables, images, lists, links for
textand text and images, forms, etc.

b. use of internsl css, inline css, external css.

Outcomes: Design dynamic college website using html.

Software & Hardware requirements:

Any browser, visual studio code software.

Theoretical concept:

A. FRAMES

With frames, you can display more than one HTML document in the same browser
window.Each HTML document is called a frame, and each frame is independent of the
others.

The Frameset Tag: -The <frameset> tag defines how to divide the window into frames.

The Frame Tag: -The <frame> tag defines what HTML document to put into each

frame.Example:

<frameset cols="25%, 75 %">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>
Tags and their Description:

<frameset> Defines a set of frames

<frame> Defines a sub window (a frame)

B. LINKS

A hyperlink is a reference (an address) to a resource on the

web.Example:

<a href="http://www.w3schools.com/">Visit

W3Schools!</a>The href Attribute:-The href attribute

defines the link "address".

The target Attribute: -The target attribute defines where the linked document will be

opened.Tag and its Description: <a> Defines an anchor

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

Example:

<table border="1">

<tr>

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

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

</tr>

</table>

Tags and their Description:

<Table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

D. HTML Form

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.An HTML form
facilitates the user to enter data that is to be sent to the server for processing such as name,
email address, password, phone number, etc. .

Why use HTML Form?

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user wants to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to the
given address.

HTML Form Syntax: -

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>

E. HTML Lists

Lists are used to group together related pieces of information so they are clearly
associated with each other and easy to read. In modern web development, lists are
workhorse elements, frequently used for navigation as well as general content.

LIST TYPES: - There are three list types in HTML:

unordered list — used to group a set of related items in no particular

orderordered list — used to group a set of related items in a specific

order

description list — used to display name/value pairs such as terms and definitions
Each list type has a specific purpose and meaning in a web page.

Unordered lists: - Unordered (bulleted) lists are used when a set of items can be
placed inany order. An example is a shopping list:
milk bread butter
coffee beans

Although the items are all part of one list, you could put the items in any order and the
listwould still make sense:

bread

coffee

beans

milk

butter

You can use CSS to change the bullet to one of several default styles, use your own
image, or even display the list without bullets — we’ll look at how to do that in the
Styling lists and links article.

Unordered list markup: - Unordered lists use one set of <ul></ul> tags wrapped around
oneor more sets of <li></li> tags:

<ul>

<li>bread</li>

<li>coffee beans</li>

<li>milk</li>

<li>butter</li></ul>

Ordered lists: - Ordered (numbered) lists are used to display a list of items that should
be ina specific order. An example would be cooking instructions:

Gather ingredients

Mix ingredients together 1

13
Place ingredients in a baking
dishBake in oven for an hour

Remove from oven

Allow to stand for ten

minutesServe

Ordered lists can be displayed with several sequencing options. The default in most
browsersis decimal numbers, but there are others available:

Letters: -

Lowercase ascii letters (a, b, c…)

Uppercase ascii letters (A, B,

C…). Lowercase classical Greek:

(έ, ή, ί…)Numbers: -

Decimal numbers (1, 2, 3…)

Decimal numbers with leading zeros (01, 02,

03…)Lowercase Roman numerals (i, ii, iii…)

Uppercase Roman numerals (I, II, III…)

Traditional Georgian numbering (an, ban,

gan…)

Traditional Armenian numbering (mek, yerku, yerek…)

As with unordered lists, you can use CSS to change the style of your ordered lists.
SeeStyling lists and links for more information.

Ordered list markup: -

Ordered lists use one set of <ol></ol> tags wrapped around one or more sets of
<li></li>tags:

<ol>

<li>Gather ingredients</li>
1
14
<li>Mix ingredients together</li>
 <li>Place ingredients in a baking dish</li>

<li>Bake in oven for an hour</li>

<li>Remove from oven</li>

<li>Allow to stand for ten minutes</li>

<li>Serve</li>

</ol>

Beginning ordered lists with numbers other than 1

A common requirement in ordered list usage is to get them to start with a number other
than1 (or i, or I, etc.). This is done using the start attribute, which takes a numeric value
(even if you’re using CSS to change the list counters to be alphabetic or Roman). This is
useful if youhave a single list of items, but need to break up the list with a note or other
relatedinformation. For example, we could do this with the previous example:

<ol>

<li>Gather ingredients</li>

<li>Mix ingredients together</li>

<li>Place ingredients in a baking dish</li>

1
15
</ol>

<p>Before you place the ingredients in the baking dish, preheat the oven to

180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.</p>

<ol start="4">

<li>Bake in oven for an hour</li>

<li>Remove from oven</li>

<li>Allow to stand for ten minutes</li>

<li>Serve</li>

</ol>

This gives the following result:

Gather ingredients

Mix ingredients together

Place ingredients in a baking dish

Before you place the ingredients in the baking dish, preheat the oven to 180 degrees
centigrade/350 degrees fahrenheit in readiness for the next step.

Bake in oven for an

hourRemove from

oven

Allow to stand for ten

minutesServe

Note that this attribute was deprecated in HTML 4, so it will prevent your page from
validating if you are using an HTML4 strict doctype. If you want to make use of such
functionality in an HTML4 strict page, and it absolutely has to validate, you can do it
using CSS Counters instead. Fortunately, however, the start attribute has been reinstated
in HTML5.
1
16
Description lists

Description lists (previously called definition lists, but renamed in HTML5) associate
specific names and values within a list. Examples might be items in an ingredient list and
their descriptions, article authors and brief bios, or competition winners and the years in
which they won. You can have as many name-value groups as you like, but there must be
at least one name and at least one value in each pair.

Description lists are flexible: you can associate more than one value with a single name,
or vice versa. For example, the term “coffee” can have several meanings, and you could
show them one after the other:

coffee

a beverage made from roasted, ground coffee

beansa cup of coffee

a social gathering at which coffee is

consumeda medium to dark brown color

Or, you can associate more than one name with the same value. This is useful to
showvariations of a term, all of which have the same meaning:

fizzy

drink
 cola

a sweet, carbonated beverage

Description list markup: - Description lists use one set of <dl></dl> tags wrapped around
oneor more groups of <dt></dt> (name) and <dd></dd> (value) tags. You must pair at
least one
<dt></dt> with at least one <dd></dd>, and the <dt></dt> should always come first in
thesource order.

A simple description list of single names with single values would look like this:

<dl>

<dt>Name</dt>

<dd>Value</dd>

<dt>Name</dt>

<dd>Value</dd>

<dt>Name</dt>

<dd>Value</dd>

</dl>

This is rendered as follows:

Name

Value

Name

Value

Name

Value

In the following example, we associate more than one value with a name, and vice versa:

<dl>

<dt>Name1</dt>
 <dd>Value that applies to Name1</dd>

<dt>Name2</dt>

<dt>Name3</dt>

<dd>Value that applies to both Name2 and Name3</dd>

<dt>Name4</dt>

<dd>One value that applies to Name4</dd>

<dd>Another value that applies to Name4</dd>

</dl>

That code would render like this:

Name1

Value that applies to

Name1Name2

Name3

Value that applies to both Name2 and

Name3Name4

One value that applies to Name4

Another value that applies to

Name4

EXECUTION STEPS: -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box;
}
.button {
background-
color:green;
border: none;

color: rgb(32, 19, 19);

padding:
15px 32px;
text-align:
center;
text-
decoration:
none; display:
inline-block;
font-size:
16px; margin:
4px 2px;
cursor:
pointer;

}
/* Add a gray background color
with some padding */ body {
font-
family:
Arial;
padding:
20px;
background:
white;}

/* Header/Blog Title */
.header
{ paddi
ng:
30px;
font-
size:
40px;
text-align:
center;
background-
image:black;

}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftc
olumn
{ flo
at:
left;
width:
75%;

}
/* Right column */
.rightc
olumn
{ floa
t:
left;

width: 25%;
padding-
left: 20px;
}
/* Fake image */
.fakeimg {
background-color:
#aaa; width: 100%;

padding: 20px;
}
/* Add a card effect for articles */
.card {
 background-
color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:af
ter
{ cont
ent:
"";
display:
table;
clear:
both;
}
/* Footer */
.footer
{ paddi
ng:
20px;
text-align:
center;
background:
#ddd;
margin-top:
20px;

}
/* Responsive layout - when the screen is less than 800px wide, make
the two columns stack on top of each other instead of next to each
other */
@media screen and (max-width: 800px) {
.leftcolumn, .r
ightcolumn
{ width: 100%;
 padding: 0;}
}
</style>
</head>
<body>
<div class="header">
<h2 style="color:red">Maulana Mukhtar Ahmad Nadvi Technical College
Malegeon</h2>
<h5>(MANSOORA)</h5>
<img src="image/1.jpg"><br>
<a href="#" class="button">Home</a>
<button class="button">Admissions</button>
<button class="button">About</button>
<button class="button">Help</button>
<button class="button">Feedback</button>
</body>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h1>Welcome to Mmantc</h1>
<img src="image/l2.jpg" style="width: 1250px;">
<p><h3>MMANTC college of Engineering,Malegeon camp</h3> </p>
</div>
<div class="card">
<h2>College photo</h2>
<h5>date, Sep 2, 2017</h5>
<img src="image/images (4).jpg" alt="college" style="width:1250px;height:
600px;">
<img src="image/download1.jpg" style="width:1250px;height:800px;">
<p>Admissions open for Engineering Students.</p>
</div>
</div>
<div class="rightcolumn">
 <div class="card">
<h2>About Me</h2>
<img src="image/images (4).jpg" > </div>
<div class="card"> <h3>Popular Post</h3>
<img src="image/download.jpg" style="width:300px;height:300px;">
<div >international confernce.</div><br>
<img src="image/images (3).jpg" style="width:300px;height:450px;" >
<div >Industrial visit.</div><br>
<img src="image/images (2).jpg" style="width:300px;height:500px;">
<div >Tree plantation Day</div><br>
<img src="image/images (1).jpg" style="width: 300px;height:500px;">
<div>M.E Project.</div> </div>
</div>
</div>
<div class="footer">
<h2>Follow Me</h2>
<p>Mmantc.edu.in</p>
<p>MMANTC@gmail.com</p>
<h2 >MMANTC.2022</h2></div>

</body>
</html>
 College Campus Photo

Conclusion: Hence, we studied the design of dynamic college website by using html and CSS.
 Experiment No.:03
Title: XML

Objective: Understand the basic concept of XML document.

Problem statement:

To write a program which takes user id as input and displays the user details by taking
theuser information from the XML document.

Software & Hardware Requirement:

Notepad, any browser, VScode

Theoretical concept:

DTD stands for Document Type Definition and it is a document which defines the structure
of an XML document. It is used to describe the attributes of XML language precisely. It can
be classified into two types namely internal DTD and external DTD. It can be specified inside
a document or outside a document. DTD mainly checks the grammar and validity of a XML
document. It checks that a XML document has a valid structure or not.

XML Schema Definition:

XSD stands for XML Schema Definition and it is a way to describe the structure of a XML
document. It defines the rules for all the attributes and elements in a XML document. It can
also be used to generate the XML documents. It also checks the vocabulary of the
document. Itdoesn’t require processing by a parser. XSD checks for the correctness of the
structure of the XML file. XSD was first published in 2001 and after that it was published in
2004.

Implementation:
Output:

Conclusion:

Hence, we applied the XML document using the XML.

 Experiment No.04

Title: HTML, Java Script

Objective:
a. Understand about basic concepts of JavaScript.

b. Use JavaScript for validation of data.

Problem statement: Design and implement a simple calculator using Java Script for
operations like addition, multiplication, subtraction, division, square of number etc.
a) Design calculator interface like text field for input and output, buttons for numbers
andoperators etc.
b) Validate input values
c) Prompt/alerts for invalid values etc.
SOFTWARE & HARDWARE REQUIREMENTS:

1. Visual studio code

2. Browser
THEORY-CONCEPT

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 loads(burden) on the server.

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

Implementation:
1. <! DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <title>

6. Calculator using HTML Example

7. </title>

8. <link
href="https://fonts.googleapis.com/css2?family=Cookie&display=swap"
rel="stylesheet">

9. <!-- CSS property to create interactive

10. calculator interface -->

11. <style>

12. html {

13. height: 100vh;

14. display: flex;

15. align-items: center;

16. justify-content: center;

17. background-color: #2d3436;

18. background-image: linear-gradient(315deg, #2d3436 0%, #000000
74%);

19. font-family: 'Cookie', cursive;

20. }

21. .title {

22. margin-bottom: 10px;

23. padding: 5px 0;Code:

font-size: 40px;

24. font-weight: bold;

25. text-align: center;
26. color: red;
27. font-family: 'Cookie', cursive;
29. }
30. input[type=button] {
31. width: 60px;
32. height: 60px;
33. float: left;
34. padding: 0;
35. margin: 5px;
36. box-sizing: border-box;
37. background: #ecedef;
38. border: none;
39. font-size: 30px;
40. line-height: 30px;
41. border-radius: 50%;
42. font-
weight: 700;
43. color:
#5E5858;
44. cursor: pointer;
45. }
46. input[type=text] {
47. width: 270px;
48. height: 60px;
49. float: left;
50. padding: 0;
51. box-sizing: border-box;
52. border: none;
53. background: none;
54. color: red;
55. text-align: right;
56. font-weight: 700;
57. font-size: 60px;
58. line-height: 60px;
59. margin: 0 25px;
60. }
61. .calculator {
62. background-color: #c0c0c0;
63. box-shadow: 0px 0px 0px 10px #666;
64. border: 5px solid black;
65. border-radius: 10px;
66. }
67. #display {
68. height: 40px;
69. text-align: right;
70. background-color: black;
71. border: 3px solid white;
72. font-size: 18px;
73. left: 2px;
74. top: 2px;
75. color: red;
76. }
77. .btnTop {
78. color: white;
79. background-color: #6f6f6f;
80. font-size: 14px;
81. margin: auto;
82. width: 50px;
83. height: 25px;
84. }
85. </style>
86. </head>
87. <body>
88. <div class = "title" align="center">
89. Example of Calculator using HTML
90. </div>
91. <form name="Calculator" class = "calculator" >
92. <table border="2" align="center" cellpadding="15" cellspacing="12"
bgcolor="#c0c0c0">
93. <tr>
94. <td>
95. <input type="text" name="Input" Size="35" id="display">
96. <br>
97. </td>
98. </tr>
99. <tr>
100.<td>
101.<input type="button" name = "one" style="font-
size:30px" value=" 1 "
OnClick="Calculator.Input.value += '1'">
102.<input type="button" name = "two" style =
"font-
size:30px" value=" 2 "
OnCLick="Calculator.Input.value += '2'">
103.<input type="button" name = "three"
style="font-
size:30px" value=" 3 "
OnClick="Calculator.Input.value += '3'">
104.<input type="button" name="add" class
="btnTop" style="font-
size:30px" value=" + "
OnClick="Calculator.Input.value += ' + '">
105.<br>
106.<input type="button" name = "four" style="font-
size:30px" value=" 4 "
OnClick="Calculator.Input.value += '4'">
107.<input type="button" name = "five"
style="font-
size:30px" value=" 5 "
OnCLick="Calculator.Input.value += '5'">
108.<input type="button" name = "six" style="font-
size:30px" value=" 6 "
OnClick="Calculator.Input.value += '6'">
109.<input type="button" name = "minus"
style="font-size:30px" value=" -
"
OnClick="Calculator.Input.valu
e += ' - '"> 110.<br>
111.<input type="button" name = "seven" style="font-
size:30px" value=" 7 "
OnClick="Calculator.Input.value += '7'">
112.<input type="button" name = "eight"
style="font-
size:30px" value=" 8 "
OnCLick="Calculator.Input.value += '8'">
113.<input type="button" name = "nine"
style="font-
size:30px" value=" 9 "
OnClick="Calculator.Input.value += '9'">
114.<input type="button" name = "mul"
style="font-size:30px" value=" * "
115.OnClick="Calculator.Input.value += ' * '">
116. <br>
117. <input type="button" name = "clear" style="font-
size:30px" value=" c "
OnClick="Calculator.Input.value = ''">
118.<input type="button" name="zero"
style="font-
size:30px" value=" 0 "
OnClick="Calculator.Input.value += '0'">
119.<input type="button" name="DoIt" style="font-
size:30px" value=" = " OnClick="Calculator.Input.value =
eval(Calculator.Input.value)">
 120.<input type="button" name="div" style="font
size:30px" value=" / " OnClick="Calculator.Input.value += ' / '">
121.<br>
122.</td>
123.
124.</tr> 125.</table> 126.</form> 127.</body> 128.</html>

Output:

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

 Experiment No.:05
Title: Servlets.
Objective:
1. Understand about basic concepts of Servlets.

2. Use SQL for validation of data.

Problem statement: Implement the sample program demonstrating the use of Servlet.

e.g., Create a database table ebookshop (book_id, book_title, book_author, book_price,

quantity)using database like Oracle/MySQL etc. and display (use SQL select query) the table

content using servlet.

SOFTWARE & HARDWARE REQUIREMENTS:

1. Xampp sever
2. PhpMyadmin
THEORY-CONCEPT

What are Servlets?

Java Servlets are programs that run on a Web or Application server and act as a middle layer
between a request coming from a Web browser or other HTTP client and databases or
applications on the HTTP server.

Using Servlets, you can collect input from users through web page forms, present records
froma database or another source, and create web pages dynamically.

Java Servlets often serve the same purpose as programs implemented using the Common
Gateway Interface (CGI). But Servlets offer several advantages in comparison with the CGI.

 Performance is significantly better.

 Servlets execute within the address space of a Web server. It is not necessary to
create aseparate process to handle each client request.
  Servlets are platform-independent because they are written in Java.

 Java security manager on the server enforces a set of restrictions to protect the
resources on a server machine. So servlets are trusted.

 The full functionality of the Java class libraries is available to a servlet. It can
communicate with applets, databases, or other software via the sockets and RMI
mechanisms that you have seen already.

Servlets Architecture

The following diagram shows the position of Servlets in a Web Application.

What is SQL?

SQL is a short-form of the structured query language, and it is pronounced as S-Q-L or

sometimes as See-Quell.

This database language is mainly designed for maintaining the data in relational database
management systems. It is a special tool used by data professionals for handling structured
data (data which is stored in the form of tables). It is also designed for stream processing in
RDSMS.

You can easily create and manipulate the database, access and modify the table rows and
columns, etc. This query language became the standard of ANSI in the year of 1986 and ISO
in the year of 1987.
If you want to get a job in the field of data science, then it is the most important query
language to learn. Big enterprises like Facebook, Instagram, and LinkedIn, use SQL for
storing the data in the back-end.

Some SQL Commands

The SQL commands help in creating and managing the database. The most common SQL
commands which are highly used are mentioned below:

1. CREATE command
2. UPDATE command
3. DELETE command
4. SELECT command
5. DROP command
6. INSERT command

CREATE Command

This command helps in creating the new database, new table, table view, and other objects of
thedatabase.

UPDATE Command

This command helps in updating or changing the stored data in the database.

DELETE Command

This command helps in removing or erasing the saved records from the database tables. It
erases single or multiple tuples from the tables of the database.

SELECT Command

This command helps in accessing the single or multiple rows from one or multiple tables of
the database. We can also use this command with the WHERE clause.
DROP Command

This command helps in deleting the entire table, table view, and other objects from the database.

INSERT Command

This command helps in inserting the data or records into the database tables. We can easily
insertthe records in single as well as multiple rows of the table.

Implementation:

Insert INTO ebookshop value (1,”oops in c++”,”Balagrusuami”,500,2);

Insert INTO ebookshop value (2,”php”,”David”,1000,6);

Insert INTO ebookshop value (4,”python”,”Stephen strange”,8000,1);

Insert INTO ebookshop value (5,”Perl”,”Reed Richard”,6000,4);

Insert INTO ebookshop value (6,”Ruby”,”Tony”,4000,8);

Insert INTO ebookshop value (7,”AI”,”prof Xavir”,2000,9);

Select * from ebookshop;

Update ebookshop set book_author=”David bekham” where book_author=”Tony”;

Delete from ebookshop where book_id=7;

Conclusion:
Hence, we create database of eBook shop by using SQL commands.
 Experiment No.:06
Title: PHP & MySQL
Objective:
1. Understand about basic concepts of Angular JS.

2. Use HTML for validation of data.

Problem statement: Build a dynamic web application using PHP and MySQL.

a. Create database tables in MySQL and create connection with PHP.

b. Create the add, update, delete and retrieve functions in the PHP web app interacting

withMySQL database.
SOFTWARE & HARDWARE REQUIREMENTS:

1. Visual studio code/ Notepad

2. Any Browser
THEORY-CONCEPT

What is PHP?

PHP is an open-source, interpreted, and object-oriented scripting language that can be

executedat the server-side. PHP is well suited for web development. Therefore, it is used to
develop web applications (an application that executes on the server and generates the
dynamic page.).

PHP was created by Rasmus Lerdorf in 1994 but appeared in the market in 1995. PHP 7.4.0
is the latest version of PHP, which was released on 28 November. Some important points
need to be noticed about PHP are as followed:

o PHP stands for Hypertext Preprocessor.

o PHP is an interpreted language, i.e., there is no need for compilation.
o PHP is faster than other scripting languages, for example, ASP and JSP.

40
 o PHP is a server-side scripting language, which is used to manage the dynamic
content ofthe website.
o PHP can be embedded into HTML.
o PHP is an object-oriented language.
o PHP is an open-source scripting language.
o PHP is simple and easy to learn language.

What is MySQL?
MySQL is currently the most popular database management system software used for
managing the relational database. It is open-source database software, which is supported by
Oracle Company. It is fast, scalable, and easy to use database management system in
comparisonwith Microsoft SQL Server and Oracle Database. It is commonly used in
conjunction with PHP scripts for creating powerful and dynamic server-side or web-based
enterprise applications.

It is developed, marketed, and supported by MySQL AB, a Swedish company, and written
in C programming language and C++ programming language. The official pronunciation of
MySQLis not the My Sequel; it is My Ess Que Ell. However, you can pronounce it in your
way. Many small and big companies use MySQL. MySQL supports many
Operating Systems like Windows, Linux, MacOS, etc. with C, C++, and Java languages.

MySQL is a Relational Database Management System (RDBMS) software that provides

manythings, which are as follows:

o It allows us to implement database operations on tables, rows, columns, and indexes.

o It defines the database relationship in the form of tables (collection of rows and
columns),also known as relations.
o It provides the Referential Integrity between rows or columns of various tables.
o It allows us to updates the table indexes automatically.
o It uses many SQL queries and combines useful information from multiple tables for
theend-users.
Web applications are developed in stages, in a step by-step manner.

1. Gather the requirements – Know what the users want, what the application
shoulddo, what the goals are.
2. Design the structure of the database.
3. Build the core PHP scripts and libraries.
4. Design the interface, build the pages with HTML, CSS, Javascript.
5. Finally, test and deploy the web application.
Steps:->
1> Start ->programs->XAMPP->xampp control panel (check APACHE and
MySQLhas green tick and stop is at button) minimizw this window
2> Open firefox->write in address bar->localhost/phpmyadmin -> create
databaseand table here,also add at least 3 rows in it. (This is MYSQL)
Database
name- dbTable
name- stud
Table have 2 columns name,address with data type varchar
3> Goto My computer -> c:\ ->Xampp folder->htdoc folder-> in this folder create on
folder named as php1(any name you can give) in this folder save two files -
>insert.html and index.php (write code in these files using notepad)

Implementation

Code

Insert.html

<html>
<body>
<form action="index.php"
method="post"> Name: <input
type="text" name="name"><br>
E-mail: <input type="text" name="address"><br>
<input type="submit">
</form>
</body>
</html>
Index.php
<?php
$conn=mysqli_connect('localhost','root','','db'); //db is name of
database created in mysql phpmyadmin if(!$conn)
{
die(mysqli_connect_error());
}
echo "connect
successfully";
echo "<br>";
$tname= $_POST["name"];
$tadd=$_POST["address"];
$sql1="insert into stud values
('$tname','$tadd')"; echo
$sql1;
mysqli_query($conn,$sql1);

$sql= ' select * from stud ' ;

$rs=mysqli_query($conn,$sql);
$nrows =
mysqli_num_rows($rs);
if( $nrows > 0)
{
while($row=mysqli_fetch_assoc($rs))
{
echo "Name:
{$row['name']}<br>";
echo "Address:
{$row['address']}<br>";
echo " <br>";
}
}
 else
{
echo "Record not found";
}
mysqli_close($conn);
?>

Output
Conclusion: In experiment we learn how to create dynamic web application
usingPHP and MySQL.
 Experiment No.:07
Title: Angular JS.
Objective:
1. Understand about basic concepts of Angular JS.

2. Use HTML for validation of data.

Problem statement: Design an application using Angular JS.

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

Angular JS.
SOFTWARE & HARDWARE REQUIREMENTS:

1. Visual studio code/ Notepad

2. Any Browser
THEORY-CONCEPT

AngularJS
AngularJS version 1.0 was released in 2012.Miško Hevery, a Google employee, started to
work with AngularJS in 2009. The idea turned out very well, and the project is now
officially supported by Google. 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. By using Angular JS we are storing students
information in the table.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework written in JavaScript.AngularJS is distributed

as aJavaScript 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.mi
n.js">
</script>
 It changes the static HTML to dynamic HTML. Its features like dynamic binding and
dependency injection eliminate the need for code that we have to write otherwise. AngularJS
is rapidly growing and because of this reason, we have different versions of AngularJs with the
lateststable being 1.7.7. It is also important to note that Angular is different from AngularJs.
It is an open-source project which can be freely used and changed by anyone. It extends
HTML attributeswith Directives, and data is bound with HTML.

Key Points:
 AngularJS is a JavaScript framework that is mainly used for Frontend Development.
 It is used for making Single Page Applications(SPA).
 It is open source and is completely free for everyone.
 It uses the Model, View, Control(MVC) pattern for developing projects.

Why use it?

 Easy to work with: All you need to know to work with AngularJs is basics of
HTML,CSSand Javascript,not necessary to be an expert in these technologies.
 Time-saving: AngularJs allows us to work with components and hence we can use
them again which saves time and unnecessary code.
 Ready to use template: AngularJs is mainly plain HTML, and it mainly makes use of
the plain HTML template and passes it to the DOM and then the AngularJS compiler. It
traverses the templates and then they are ready to use.
Implementation
Code
Angular.html
<html ng-app = "simpleApp">
<head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "index.js"></script>
</head>
<body>
<h2>AngularJS Form Submit Application</h2>
<div ng-controller = "simpleController">
<table border= 1>
<tr><th> No </th>
<th> Name </th>
<th> Age </th>
<th> City </th>
<th> course </th>
 <th> dept </th></tr>
<tr ng-repeat="entry in collection">
<td> {{$index+1}} </td>
<td> {{entry.name}}</td>
<td> {{entry.age}} </td>
<td> {{entry.city}} </td>
<td> {{entry.course}} </td>
<td> {{entry.dept}} </td>
</tr>
</table>
<form ng-submit="addEntry()">
<h2> New Data Entry Form </h2>
<table>
<tr><td>Name:</td>
<td> <input type="text" ng-model="newData.name" required></td>
</tr>
<tr><td>Age: </td>
<td><input type="number" ng-model="newData.age" required></td>
</tr>
<tr><td>city: </td>
<td><input type="text" ng-model="newData.city" required></td>
</tr>
<tr><td>course: </td>
<td><input type="text" ng-model="newData.course" required></td>
</tr>
<tr><td>dept: </td>
<td><input type="text" ng-model="newData.dept" required></td>
</tr>
<tr><td colspan=2><input type="submit" value="Add Entry"></td>
</td>
</table>
</form>
</div>
</body>
</html>

Index.js
var app=angular.module("simpleApp",[]);
app.controller("simpleController",function($scope)
{
$scope.collection=[
{name:"Amit",age:22,city:"Nashik",course:"btech",dept:"civil"},
{name:"Neha",age:21,city:"Nashik",course:"mtech",dept:"engg"}
];
$scope.addEntry=function()
{
$scope.collection.push($scope.newData);
$scope.newData='';
};
});

Output:
Conclusion: Therefore, we learn how data store in the table by using angular JS.

29
 Experiment No:08
Title: The Struts

Objective: 1.Understand the basic concepts of Struts.

2. Use Struts for Validation of user entered data..

Problem Statement:Design a login page with entries for name, mobile number, email id and login
button. Use struts and perform following validations

1. Validation for correct names

2. :Validation for mobile numbers
3. Validation for email id
4. Validation rules for each field (correct names, valid mobile numbers, valid email addresses).
5. Display error messages for invalid inputs.
6. Redirect to a welcome page upon successful entry.

Outcome:Students will be able to,

a)Create a login page with fields as name, mobile number and email id.

b) Validation of entered data and if wrong data entered proper error messages will be
displayed using struts

SOFTWERE&HARDWERE REQUIREMENTS

Softwere Requirements.

1. Operating System: Windows 7/8/10/Ubuntu

2. Browser : Microsoft Edge/Firefox/Google Chrome
3. Software: Java, Eclipse

Hardwere Requirements

1. processor:minimum 1GHz
2. Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
3. Hard Drive: Minimum 32 GB
4. Memory (RAM): Minimum 1 GB

2
10
THEORY-CONCEPT:

Struts is an open source framework that extends the Java Servlet API and employs a Model, View,
Controller (MVC) architecture. It enables you to create maintainable, extensible, and flexible web
applications based on standard technologies, such as JSP pages, JavaBeans, resource bundles, and
XML. When you use Struts, the framework provides you with a controller servlet, ActionServlet,
which is defined in the Struts libraries that are included in the IDE, and which is automatically
registered in the web.xml deployment descriptor as shown below. The controller servlet uses a struts-
config.xml file to map incoming requests to Struts Action objects, and instantiate any ActionForm
objects associated with the action to temporarily store form data. The Action object processes requests
using it’s execute method, while making use of any data stored in the form bean. Once the Action
object processes a request, it stores any new data (i.e., in the form bean, or in a separate result bean),
and forwards the results to the appropriate view.

2
11
TECHNOLOGY/TOOLS
Files Required Following files are required for this application.
● login.jsp
● success.jsp
● LoginForm.java
● LoginAction.java
● struts-config.xml
● web.xml

Tools used:
In order to create an application we are going to use the following tools.
● JDK 1.5 or above (download)
● Eclipse Indigo or above (download)
● Tomcat 6.x above or any other server which supports java like jboss,weblogic,glassfish
(download)
● Struts 1.2 JAR files

DESIGN/EXECUTION STEPS
Step 1 : Create Dynamic Web Project
Step 2 : Add Jar files to the project
Step 3 : Configure web.xml
Step 4 : Create FormBean Class :
Step 5 : Create Action Class :
Step 6 : Create struts-config.xml file
Step 7 : Create jsp files
Step 8: Run the Application

2
12
 Experiment No:09

TITLE:Design and develop any web application using AngularJS.

OBJECTIVE:
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. Build Angular forms

Problem Statement: Design an application using AngularJS. e.g., Design registration (first
name, last name, username, password) and login page using AngularJS

OUTCOMES
1. Implement the effective client side implementation.
2. Solve the complex problem of development using MVC framework.

Softwere&Hardwere Requirment
Software Requirements:
1.Operating System: Windows 7/8/10/Ubuntu
2. Browser: Firefox/Google Chrome/ Microsoft Edge etc.
3. Software/Editor : Sublime Editor/Notepad/Notepad++
Hardware Requirements:
1. Processor: Minimum 1 GHz.
2. Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
3. Hard Drive: Minimum 32 GB.
4. Memory (RAM): Minimum 1 GB
5. Sound card-speakers/camera/microphone(Depending upon website selection)

2
13
THOERY-CONSEPT
AngularJS is an open-source web application framework. It was initially created in 2009 by
Misko Hevery and Adam Abrons. It is presently kept up by Google. Its most recent adaptation is
"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 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 reasonably for every program.
AngularJS is open source, totally free, and utilized by a great many engineers the world over. It is
authorized under the Apache permit version 2.0. By and large, AngularJS is a system to assemble
expansive scale, elite, and simple to- keep up web applications.

Core Features:

2
14
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. 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.
8. Routing: It is idea of exchanging sees.
9. 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.
10.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

2
15
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.
AngularJS is a MVC based structure.
An AngularJS application comprises of following three essential parts −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

Design/Execution Steps
Steps for AngularJS
1. Either download AngularJS
2. Or Use CDN Method.

Method Example

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 −

2
16
2. View
The view is this part −

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 −

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.
5. How AngularJS integrates with HTML
● 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 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.
2
17
● 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

:
2
18
 Experiment No:10
Title:EJB
Problem Statement: 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:
. 1. To understand EJB.
2. To design and implement the web application logic for deposit and withdraw amount
transactions using EJB

Outcome:
Students will be able to,
1. To understand EJB.
2. To design and implement the web application logic for deposit and withdraw amount
transactions using EJB

Softwere&Hardwere Requirment
Software Requirements:
1. Operating System: Windows 7/8/10/Ubuntu
2. Browser : Microsoft Edge/Firefox/Google Chrome
3. Software: Java, Eclipse
Hardware Requirements:
1. Processor: Minimum 1 GHz.
2. Ethernet connection (LAN) OR a wireless adapter (Wi-Fi)
3. Hard Drive: Minimum 32 GB.
4. Memory(RAM): Minimum 1 GB

2
19
THOERY-CONSEPT
What is EJB?
EJB is an acronym for enterprise java bean. It is a specification provided by Sun Microsystems to
develop secured, robust and scalable distributed applications. To get information about distributed
applications,visit RMI Tutorial first.
To run EJB application, you need an application server (EJB Container) such as Jboss, Glassfish,
Web logic, Web sphere etc. It performs:
a. life cycle management,
b. security,
c. transaction management, and
d. Object pooling.
EJB application is deployed on the server,so it is called server side component also. EJB is like
COM (Component Object Model) provided by Microsoft. But, it is different from Java Bean, RMI
and Web Services.
When use Enterprise Java Bean?
1. Application needs Remote Access. In other words, it is distributed.
2. Application needs to be scalable. EJB applications supports load
balancing, clustering and fail-over.
3. Application needs encapsulated business logic. EJB application is separated from
presentation and persistent layer.

2
20
Disadvantages of EJB
1. Requires application server
2. Requires onlyjava client. For other language client,you need to go for
webservice.
3. Complex to understand and develop ejb applications.

Technology/Tools
Tools used:
In order to create an application we are going to use the following tools.
● JDK 1.5 or above (download)
● Eclipse Indigo or above (download)
● Tomcat 6.x above or any other server which supports java like
jboss,weblogic,glassfish (download)
● EJB (Enterprise Java Bean)

Design/Execution Steps
Creating the Enterprise Application Project
The goal of this exercise is to create the NewsApp enterprise application project. You will use the
New Project wizard to create an enterprise application that contains an EJB module and a web
module.
1. Choose File > New Project (Ctrl-Shift-N) from the main menu.
2. Select Enterprise Application from the Java EE category and click Next.
3. Name the project NewsApp and set the project location.
4. Deselect the Use Dedicated Folder option, if selected. (For this tutorial there is little reason to
2
21
copy project libraries to a dedicated folder because you will not need to share libraries with other
users or projects.) Click Next.
1. Set the server to GlassFish Server and set the Java EE Version to Java EE 6 or Java EE.
2. Select Create EJB Module and Create Web Application Module. Click Finish.

When you click Finish, the IDE creates three projects: NewsApp, NewsApp-ejb and NewsApp-
war. If you expand the NewsApp node in the Projects window, you can see that the enterprise
application project does not contain any sources. All the sources will be contained in the two
modules that the wizard created and which are listed under the Java EE Modules node.
The enterprise application project only contains configuration and packaging details about the
application. When you build and run an enterprise application the IDE creates an EAR archive
and deploys the EAR to the server. In some cases, the enterprise application project will contain
deployment descriptor files with additional information, but deployment descriptor files are not
required when you create a Java EE enterprise application that is deployed to GlassFish Server.

2
22
2
23