MEAN stack

UNIT-1:

1.Introduction to web:

Internet :
The internet is a globally connected network system facilitating worldwide communication and
access to data resources through a huge collection of personal, public, business, academic and
government networks.

World Wide Web (WWW) :

World Wide Web (WWW), byname Web, is leading information retrieval service of web (the
worldwide computer network). Online gives users access to a huge array of documents that are
connected to every other by means of hypertext or hypermedia links—i.e., hyperlinks, electronic
connections that link related pieces of data so as to permit a user quick access to them.

Hypertext allows the user to pick a word or phrase from text and thereby access other documents
that contain additional information concerning that word or phrase
2. DNS:

An application layer protocol defines how the application processes running on different
systems, pass the messages to each other.

 DNS stands for Domain Name System.

 DNS is a directory service that provides a mapping between the name of a host on the
network and its numerical address.
 DNS is required for the functioning of the internet.
 Each node in a tree has a domain name, and a full domain name is a sequence of symbols
specified by dots.
 DNS is a service that translates the domain name into IP addresses.

DNS is a TCP/IP protocol used on different platforms. The domain name space is divided into
three different sections: generic domains, country domains, and inverse domain.
Generic Domains:

 It defines the registered hosts according to their generic behavior.

 Each node in a tree defines the domain name, which is an index to the DNS database.
 It uses three-character labels, and these labels describe the organization type.
Country Domain

The format of country domain is same as a generic domain, but it uses two-character country
abbreviations (e.g., us for the United States) in place of three character organizational
abbreviations.

Inverse Domain

The inverse domain is used for mapping an address to a name. When the server has received a
request from the client, and the server contains the files of only authorized clients.

Working of DNS

 DNS is a client/server network communication protocol. DNS clients send requests to

the. server while DNS servers send responses to the client.
 Client requests contain a name which is converted into an IP address known as a forward
DNS lookups while requests containing an IP address which is converted into a name
known as reverse DNS lookups.
 DNS implements a distributed database to store the name of all the hosts available on the
internet.

3.PROTOCOLS:

HTTP (Hyper Text Transfer Protocol)

The Hypertext Transfer Protocol (HTTP) is application-level protocol for collaborative,

distributed, hypermedia information systems.

It is the data communication protocol used to establish communication between client and
server.

HTTP is TCP/IP based communication protocol, which is used to deliver the data like image
files, query results, HTML files etc on the World Wide Web (WWW) with the default port is
TCP 80. It provides the standardized way for computers to communicate with each other.
The Basic Characteristics of HTTP (Hyper Text Transfer Protocol):

 It is the protocol that allows web servers and browsers to exchange data over the web.
 It is a request response protocol.
 It uses the reliable TCP connections by default on TCP port 80.
 It is stateless means each request is considered as the new request. In other words, server
doesn't recognize the user by default.

Features of HTTP (Hyper Text Transfer Protocol):

There are three fundamental features that make the HTTP a simple and powerful protocol used
for communication:

 HTTP is media independent: It specifies that any type of media content can be sent by
HTTP as long as both the server and the client can handle the data content.
 HTTP is connectionless: It is a connectionless approach in which HTTP client i.e., a
browser initiates the HTTP request and after the request is sent the client disconnects
from server and waits for the response.
 HTTP is stateless: The client and server are aware of each other during a current request
only. Afterwards, both of them forget each other. Due to the stateless nature of protocol,
neither the client nor the server can retain the information about different request across
the web pages.

The Basic Architecture of HTTP (Hyper Text Transfer Protocol):

The below diagram represents the basic architecture of web application and depicts where HTTP
stands:
HTTP is request/response protocol which is based on client/server based architecture. In this
protocol, web browser, search engines, etc. behave as HTTP clients and the Web server like
Servlet behaves as a server

FTP:

 FTP stands for File transfer protocol.

 FTP is a standard internet protocol provided by TCP/IP used for transmitting the files
from one host to another.
 It is mainly used for transferring the web page files from their creator to the computer
that acts as a server for other computers on the internet.
 It is also used for downloading the files to computer from other servers.

Objectives of FTP:

 It provides the sharing of files.

 It is used to encourage the use of remote computers.
 It transfers the data more reliably and efficiently.
Mechanism of FTP:

There are two types of connections in FTP:

 Control Connection: The control connection uses very simple rules for communication.
Through control connection, we can transfer a line of command or line of response at a
time. The control connection is made between the control processes. The control
connection remains connected during the entire interactive FTP session.
 Data Connection: The Data Connection uses very complex rules as data types may vary.
The data connection is made between data transfer processes. The data connection opens
when a command comes for transferring the files and closes when the file is transferred.

FTP Clients:

 FTP client is a program that implements a file transfer protocol which allows you to
transfer files between two hosts on the internet.
 It allows a user to connect to a remote host and upload or download the files.
Advantages of FTP:

 Speed: One of the biggest advantages of FTP is speed. The FTP is one of the fastest way
to transfer the files from one computer to another computer.
 Efficient: It is more efficient as we do not need to complete all the operations to get the
entire file.
 Security: To access the FTP server, we need to login with the username and password.
Therefore, we can say that FTP is more secure.
 Back & forth movement: FTP allows us to transfer the files back and forth. Suppose
you are a manager of the company, you send some information to all the employees, and
they all send information back on the same server.

Disadvantages of FTP:

 The standard requirement of the industry is that all the FTP transmissions should be
encrypted. However, not all the FTP providers are equal and not all the providers offer
encryption. So, we will have to look out for the FTP providers that provides encryption.
 FTP serves two operations, i.e., to send and receive large files on a network. However,
the size limit of the file is 2GB that can be sent. It also doesn't allow you to run
simultaneous transfers to multiple receivers.
 Passwords and file contents are sent in clear text that allows unwanted eavesdropping.
So, it is quite possible that attackers can carry out the brute force attack by trying to guess
the FTP password.
 It is not compatible with every system.

SMTP:

 SMTP stands for Simple Mail Transfer Protocol.

 SMTP is a set of communication guidelines that allow software to transmit an electronic
mail over the internet is called Simple Mail Transfer Protocol.
 It is a program used for sending messages to other computer users based on e-mail
addresses.
 It provides a mail exchange between users on the same or different computers, and it also
supports:
o It can send a single message to one or more recipients.
o Sending message can include text, voice, video or graphics.
o It can also send the messages on networks outside the internet.

 The main purpose of SMTP is used to set up communication rules between servers.
Components of SMTP:

First, we will break the SMTP client and SMTP server into two components such as user agent
(UA) and mail transfer agent (MTA).

SMTP allows a more complex system by adding a relaying system. Instead of just having one
MTA at sending side and one at receiving side, more MTAs can be added, acting either as a
client or server to relay the email.
The relaying system without TCP/IP protocol can also be used to send the emails to users, and
this is achieved by the use of the mail gateway. The mail gateway is a relay MTA that can be
used to receive an email.

Components of SMTP:

 Mail User Agent (MUA): It is the local user or client-end utility that allows to receive
and send mail.
 Mail Submission Agent (MSA): It is the server which receives from MUA and
cooperates with the MTA for delivery of the mail.
 Mail Transfer Agent (MTA): It receives incoming mail from local user and forwards it
for delivery. More than one MTP can be involved, as a client or server to transfer the
mail.
 Mail Delivery Agent (MDA): It delivers the mail to the local recipient's mailbox.
4. HTML5 concept:

HTML5 is a next version of HTML. Here, you will get some brand new features which will
make HTML much easier.

These new introducing features make your website layout clearer to both website designers and
users.

There are some elements like <header>, <footer>, <nav> and <article> that define the layout of a
website.

HTML5 is more complete and easier than HTML4, it has lots of new tags like <header>,
<footer>, <navy>, <Audio>, <video>, <main> etc.

It also supports graphics. In the following image, we have described all the essential terms
related to HTML and HTML5.

HTML is referred to as the primary language of the World Wide Web.

HTML has many updates over time, and the latest HTML version is HTML5.

There are some differences between the two versions:

 HTML5 supports both audio and video while none of them were part of
 HTML cannot allow JavaScript to run within the web browser, while HTML5 provides
full support for running JavaScript.
  In HTML5, inline mathML and SVG can be used in a text, while in HTML it is not
possible.
 HTML5 supports new types of form controls, such as date and time, email, number,
category, title, Url, search, etc.
 Many elements have been introduced in HTML5. Some of the most important are time,
audio, description, embed, fig, shape, footer, article, canvas, navy, output, section,
source, track, video, etc.

HTML 5 Example:

1. <!DOCTYPE>
2. <html>
3. <body>
4. <h1>Write Your First Heading</h1>
5. <p>Write Your First Paragraph.</p>
6. </body>
7. </html>

HTML5 New Tags:

Following is the complete list of the newly added element with their descriptions.
5.CSS3:

CSS3: CSS3 stands for Cascading Style Sheet level 3, which is the advanced version of CSS.

It is used for structuring, styling, and formatting web pages.

Several new features have been added to CSS3 and it is supported by all modern web browsers.

The most important feature of CSS3 is the splitting of CSS standards into separate modules that
are simpler to learn and use.

CSS works with HTML and provides a basic style and look to the website.
CSS3 is the latest version of CSS. CSS3 provides JavaScript
and mobile development features with additional features such as transitions, gradients, and
more. In this section, we will discuss the differences between CSS
and CSS3.
New features of CSS3:

Combinator:

CSS3 has a new General sibling combinator which matches up with sibling elements via the tilde
(~) combinator.

CSS Selectors:

CSS3 selectors are much advanced in comparison to simple selectors offered by CSS, and are
termed as a sequence of easy to use and simple selectors.

Pseudo-elements:

Plenty of new pseudo-elements have been added to CSS3 to give easy styling in depth. Even a
new convention of double colons :: is also added.
Border Style: The latest CSS3 also has new border styling features like border-radius, image-
slice, image-source, and values for “width stretch”, etc.

Background style properties: New features like background-clip, size, style, and origin
properties have been added to CSS3.

5.ANATOMY OF WEB PAGES:

A webpage is a digital document that is linked to the world Wide Web and viewable by anyone
connected to the internet having a web browser.

It can contain any type of information, such as text, color, graphics, animations, videos and
sounds, etc.

A webpage is a document which is written in the HTML, it can be viewed from the Internet.

It can be accessed by entering the URL on the address bar of the web browser.

Components of a Webpage :

 Components of a webpage, Content wise

 Components of a webpage, Structure Wise

Content Wise :
Content wise the components of a webpage are : Hypertext and Hyperlinks

1. Hypertext :
It refers to a digital text, which is more than just text as it can include information in
various media formats such as :
o text
o color
o graphic
o animation
o video
o sound
o hyperlinks

2. Hyperlinks :
It refers to a link from a hypertext file to another such file. A hyperlink can be in the form
of a graphic or text, upon clicking where the linked document opens up.
Structure Wise :
Structure wise the components of a web page are :

1. Page Title –
This is a single line text which is displayed on the title bar of the browser displaying web
page.

2. Header –
This is generally a one or two line text (sometimes a graphics/image) defining the
purpose of the web page. It is displayed at the top of the web page, below the address bar
of the browser.

3. Body of the Web page –

This is the section below the header of the web page and it contains the actual content of
the web page.

4. Navigational Links –
These are the hyperlinks placed on the web page using which you can move the linked
web pages/documents.

5. Footer –
This is the bottom section of the web page. This is the section where usually the
copyright notice, website contact information etc. is put.

6. XML schema:

XML schema is a language which is used for expressing constraint about XML documents.

There are so many schema languages which are used now a days for example Relax- NG and
XSD (XML schema definition).

An XML schema is used to define the structure of an XML document. It is like DTD but
provides more control on XML structure.
Characteristics

 XSD supports namespaces.

 Different data types are supported by XSD.
 It is extensible for additional features.
 It is supported by W3C organization.
 It describes the structure of a XML document.

Features of XSD

 XSDs are more powerful than DTDs.

 XSDs can be widely extended for additions in future.
 XSDs make it easier to define various data patterns.
 Data Communication becomes secure because of XML schemas

Advantages

 It can be used to provide restrictions on data.

 It can be used to specify default values.
 XSD is extensible.
 It doesn’t require intermediate processing by a parser

Disadvantages

 It is complex in nature.
 It has limited support for unordered content.
 It doesn’t have a formal mathematical description
 The documentation support is limited.

EXAMPLE:

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

<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML Schema Data types

There are two types of data types in XML schema.

1. simpleType
2. complexType

simpleType

The simpleType allows you to have text-based elements. It contains less attributes, child
elements, and cannot be left empty.

complexType

The complexType allows you to hold multiple attributes and elements. It can contain additional
sub elements and can be left empty.

7. DOM (Document Object Model):

The Document Object Model (DOM) is a programming interface for HTML(HyperText Markup
Language) and XML(Extensible markup language) documents.

It defines the logical structure of documents and the way a document is accessed and
manipulated.

Document Object Model is an API that represents and interacts with HTML or XML documents.

Structure of DOM:

DOM can be thought of as a Tree or Forest(more than one tree). The term structure model is
sometimes used to describe the tree-like representation of a document.

Properties of document object:

Let's see the properties of document object that can be accessed and modified by the document
object.
 Representation of the DOM

 Window Object: Window Object is object of the browser which is always at top of the
hierarchy. It is like an API that is used to set and access all the properties and methods of
the browser. It is automatically created by the browser.
 Document object: When an HTML document is loaded into a window, it becomes a
document object. The ‘document’ object has various properties that refer to other objects
which allow access to and modification of the content of the web page. If there is a need
to access any element in an HTML page, we always start with accessing the ‘document’
object. Document object is property of window object.
 Form Object: It is represented by form tags.
 Link Object: It is represented by link tags.
 Anchor Object: It is represented by a href tags.
 Form Control Elements:: Form can have many control elements such as text fields,
buttons, radio buttons, checkboxes, etc.

Methods of document object:

We can access and change the contents of document by its methods.

The important methods of document object are as follows:

 Method Description

write("string") writes the given string on the doucment.

writes the given string on the doucment with newline character at

writeln("string")
the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

EXAMPLE:

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>

6.XSLT:

XSLT stands for Extensible Stylesheet Language Transformation.

 XSLT is used to transform XML document from one form to another form.
 XSLT uses Xpath to perform matching of nodes to perform these transformation .
 The result of applying XSLT to XML document could be an another XML document,
HTML, text or any another document from technology perspective.
 The XSL code is written within the XML document with the extension of (.xsl).
 In other words, an XSLT document is a different kind of XML document.

XML Namespace:

XML Namespaces are the unique names .

 XML Namespace is a mechanism by which element or attribute is assigned to a group.

  XML Namespace is used to avoid the name conflicts in the XML document.
 XML Namespace is recommended by W3C.

XML Namespace Declaration:

It is declared using reserved attribute such as the attribute is xmlns or it can begin with xmlns:

 Syntax:

<element xmlns:name = “URL”>

where

 Namespace starts with the xmlns.

 The word name is the namespace prefix.
 the URL is the namespace identifier.

Example:
Consider the following xml document named Table.xml :-

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

<?xml-stylesheet type=”text/css” href=”rule.css”?>
<tables>
<table>
<tr>
<td>Apple</td>
<td>Banana</td>
</tr>
</table>
<table>
<height>100</height>
<width>150</width>
</table>
</tables>

Xpath:

 Xpath is an important component of XSLT standard.

 Xpath is used to traverse the element and attributes of an XML document.
 Xpath uses different types of expression to retrieve relevant information from the XML
document.
 Xpath contains a library of standard functions.
Example:
o bookstore/book[1] => Fetches details of first child of bookstore element.
o bookstore/book[last()] => Fetches details of last child of bookstore element.
Templates:

 An XSL stylesheet contains one or more set of rules that are called templates.
 A template contains rules that are applied when the specific element is matched.
 An XSLT document has the following things:
o The root element of the stylesheet.
o A file of extension .xsl .
o The syntax of XSLT i.e what is allowed and what is not allowed.
o The standard namespace whose URL is http://www.w3.org/1999/XSL/Transform.

Main parts of XSL Document:

 XSLT: It is a language for transforming XML documents into various other types of
documents.
 XPath: It is a language for navigating in XML documents.
 XQuery: It is a language for querying XML documents.
 XSL-FO: It is a language for formatting XML documents.

DOM and SAX Approaches:

There are two types of XML parsers namely Simple API for XML and Document Object Model.

 SAX
 DOM

SAX

(Simple API for XML), is the most widely adopted API for XML in Java and is considered the
de-facto standard.

Although it started as a library exclusive to Java, it is now a well-known API distributed over a
variety of programming languages.

It is an open-source project and has recently switched to SourceForge project infrastructure that
makes it easier to track open SAX issues outside the high-volume XML-dev list.

The mechanism SAX uses makes it independent of the elements that came before, i.e. it is state-
independent.

DOM

stands for Document Object Model.

The DOM API provides the classes to read and write an XML file.
DOM reads an entire document. It is useful when reading small to medium size XML files.

It is a tree-based parser and a little slow when compared to SAX and occupies more space when
loaded into memory.

SAX Parser

SAX represents a simple API for XML and a SAX API is implemented by SAX Parser.

This API was called event-based API which provides interfaces on handlers.

There are four handler interfaces. ContentHandler, DTDHandler, EntityResolver, and

ErrorHandler interface.

Features Of SAX Parser:

 The internal structure can not be created by SAX Parser.

 These event-based SAX parsers work the same as the event handler in Java.

Advantages Of SAX Parser:

 Very simple to use and has good efficiency of memory.

 Its runtime is too fast and it can work for a bigger document or file system.

Disadvantages Of SAX Parser:

 Its ability to understand APIs is too less than an event-based API.

 We can’t know the full information because of a lot of pieces of data.
 DOM Parser

DOM represents the Document Object model.

When an object contains some information about XML documents, is called DOM Parser.

This looks like a tree structure. DOM API is implemented by a DOM Parser, which is very easy
and simple to use.

It represents an XML Document into tree format in which each element represents tree branches
and creates an In Memory tree representation of XML file and then parses it more memory is
required for this.

Features Of DOM Parser:

 The internal structure can be created by DOM Parser.

 Because of these internal structures, the client can get information about the original
XML docs.

Advantages Of DOM Parser:

 DOM API is easy to use so that we can do both write and read operations.
 When a document is required then it preferred a wide part that can be randomly accessed.

Disadvantages Of DOM Parser:

 Its efficiency of memory is not too good, it takes more memory cause XML docs needed
to load in there.
 In comparison to the SAX parser, it is too slow.

Hence, conclusive differences between SAX Parser and DOM Parser in Java is as follows