FULL STACK DEVELOPMENT

INDEX
SNO UNIT TOPIC

1 I Web development Basics - HTML

2 I HTML, CSS

3 I Web servers

4 I UNIX CLI Version control - Git & Github

5 II Javascript basics OOPS Aspects of JavaScript Memory

usage and Functions in JS

6 II jQuery, AJAX for data exchange with server jQuery

Framework jQuery events

7 II JSON data format.

8 III Introduction to React

9 III React Router and Single Page Applications React

Forms

10 III Flow Architecture

11 III Introduction to Redux More Redux

12 III Client-Server Communication

13 IV Java Web Development

14 IV Model View Controller (MVC) Pattern

15 IV MVC Architecture using Spring RESTful API

16 IV Spring Framework Building an application using

Maven

17 V Relational schemas

18 V Normalization Structured Query Language (SQL)

19 V Data persistence using Spring JDBC Agile

development principles

20 V Deploying application in Cloud

 FULL STACK DEVELOPMENT

COURSE OBJECTIVES:
1. To become knowledgeable about the most recent web development technologies.
2. Idea for creating two tier and three tier architectural web applications.
3. Design and Analyze real time web applications.
4. Constructing suitable client and server-side applications.
5. To learn core concept of both front end and back-end programming.

UNIT - I
Web Development Basics: Web development Basics - HTML & Web servers Shell - UNIX CLI Version
control - Git & GitHub HTML, CSS
UNIT - II
Frontend Development: JavaScript basics OOPS Aspects of JavaScript Memory usage and Functions in JS AJAX
for data exchange with server jQuery Framework jQuery events, UI components etc. JSON data format.
UNIT - III
REACT JS: Introduction to React Router and Single Page Applications React Forms, Flow Architecture and
Introduction to Redux More Redux and Client-Server Communication
UNIT - IV
Java Web Development: JAVA PROGRAMMING BASICS, Model View Controller (MVC) Pattern MVC
Architecture using Spring RESTful API using Spring Framework Building an application using Maven
UNIT - V
Databases & Deployment: Relational schemas and normalization Structured Query Language (SQL) Data
persistence using Spring JDBC Agile development principles and deploying application in Cloud

TEXT BOOKS:

1. Web Design with HTML, CSS, JavaScript and jQuery Set Book by Jon Duckett Professional JavaScript
for Web Developers Book by Nicholas C. Zakas
2. Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-Step Guide to Creating Dynamic Websites
by Robin Nixon
3. Full Stack JavaScript: Learn Backbone.js, Node.js and MongoDB. Copyright © 2015 BY AZAT
MARDAN

REFERENCE BOOKS:

1. Full-Stack JavaScript Development by Eric Bush.

2. Mastering Full Stack React Web Development Paperback – April 28, 2017 by Tomasz
Dyl , Kamil Przeorski , Maciej Czarnecki

COURSE OUTCOMES:
1. Develop a fully functioning website and deploy on a web server.
2. Gain Knowledge about the front end and back-end Tools
3. Find and use code packages based on their documentation to produce working results in a project.
4. Create web pages that function using external data.
5. Implementation of web application employing efficient database access.
 UNIT – I

Web Development Basics: Web development Basics - HTML & Web servers
Shell - UNIX CLI Version control - Git & GitHub HTML, CSS

HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

Hyper Text: Hypertext simply means "Text within Text." A text has a link within it, is
a hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. Hypertext is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply

layout and formatting conventions to a text document. Markup language makes text
more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A Web
page can be of the static or dynamic type. With the help of HTML only, we can create
static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

3|Page
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML
except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag
opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.

<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

4|Page
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.

1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The
value of the alt attribute describe the image in words. The alt attribute is considered
good for SEO prospective.

3) width
It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.

4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.

Use of height and width attribute with img tag

5|Page
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the
help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and
table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over
table to manage the layout of the page .

<html>
<head>
<title></title>
</head>
<body>
<table border="5">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

6|Page
Output:

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items
start with <li> tag.

<!DOCTYPE>
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

</body>
</html>

Output:

7|Page
 </table>
</form>

HTML style using CSS

Our web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements.
It describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin,
border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a
semicolon (;).

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

o Inline CSS: Define CSS properties using style attribute in the HTML elements.
o Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
o External CSS: Define all CSS property in a separate .css file, and then include the file
with HTML file using tag in section.

Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each
element.

To apply inline CSS, you need to use style attribute within HTML element. We can use
as many properties as we want, but each property should be separated by a semicolon
(;).

Example:
<html>
<head>
<title></title>
</head>
<body>
<h3 style="color: red;

8|Page
 font-style: italic;
text-align: center;
font-size: 50px;
padding-top: 25px;">Learning HTML using Inline CSS</h3>
</body>
</html>

Output:

Learning HTML using Inline CSS

Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in <head> section
of HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name*/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/*Internal CSS using class name*/
.blue{color: blue;}
.red{color: red;}
.green{color: green;}
</style>
</head>
<body>

9|Page
 <h2>Learning HTML with internal CSS</h2>
<p class="blue">This is a blue color paragraph</p>
<p class="red">This is a red color paragraph</p>
<p class="green">This is a green color paragraph</p>
</body>
</html>
OUTPUT:

Learning HTML with internal CSS

This is a blue color paragraph

This is a red color paragraph

This is a green color paragraph

External CSS:
An external CSS contains a separate CSS file which only contains style code using the
class name, id name, tag name, etc. We can use this CSS file in any HTML file by
including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we
can use external CSS.

There are two files need to create to apply external CSS

o First, create the HTML file

o Create a CSS file and save it using the .css extension (This file only will only contain
the styling code.)
o Link the CSS file in your HTML file using tag in header section of HTML document.

10 | P a g e
 UNIT - II

Frontend Development: Javascript basics OOPS Aspects of JavaScript Memory usage and
Functions in JS AJAX for data exchange with server jQuery Framework jQuery events, UI
components etc. JSON data format.

HTML JavaScript
A Script is a small program which is used with HTML to make web pages more attractive,
dynamic and interactive, such as an alert popup window on mouse click. Currently, the most
popular scripting language is JavaScript used for websites.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

HTML events with JavaScript

An event is something which user does, or browser does such as mouse click or page loading
are examples of events, and JavaScript comes in the role if we want something to happen on
these events.
HTML provides event handler attributes which work with JavaScript code and can perform
some action on an event.
Syntax:
<element event = "JS code">
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Click Event Example</h2>
<p>Click on the button and you csn see a pop-up window with a
message</p>
<input type="button" value="Click" onclick="alert('Hi,how are you')">
</body>
</html>

HTML can have following events such as:

o Form events: reset, submit, etc.
o Select events: text field, text area, etc.
o Focus event: focus, blur, etc.
o Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.

11 | P a g e
Event Event Name Handler Name Occurs when
onBlur blur When form input loses focus
onClick click When the user clicks on a form element or a link
onSubmit submit When user submits a form to the server.
onLoad load When page loads in a browser.
onFocus focus When user focuses on an input field.
onSelect select When user selects the form input filed.
Note: You will learn more about JavaScript Events in our JavaScript tutorial.
Let's see what JavaScript can do:
1) JavaScript can change HTML content.
Example:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello MRCET!";
}
</script>
</body>
</html>

1) JavaScript can change HTML content.

Example:
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello MRCET!";
}
</script>
</body>
</html>
2) JavaScript can change HTML style
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>

12 | P a g e
 <script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "brown";
document.getElementById("demo").style.backgroundColor = "lightgreen";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
3) JavaScript can change HTML attributes.

Example:
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_lightoff.png"
} else {
pic = "pic_lighton.png"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_lightoff.png" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>

Use of External javaScript

Suppose, you have various HTML files which should have same script, then we can put our
JavaScript code in separate file and can call in HTML file. Save JavaScript external files using
.js extension.
Note: Do not add <script> tag in the external file, and provide the complete path where you have
put the JS file.
Syntax:
<script type="text/javascript" src="URL "></script>
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="external.js"></script>

13 | P a g e
 </head>
<body>
<h2>External JavaScript Example</h2>
<form onsubmit="fun()">
<label>Enter your name:</label><br>
<input type="text" name="uname" id="frm1"><br>
<label>Enter your Email-address:</label><br>
<input type="email" name="email"><br>
<input type="submit">
</form>
</body>
</html>

JavaScript code:external.js
function fun() {
var x = document.getElementById("frm1").value;
alert("Hi"+" "+x+ "you have successfully submitted the details");
}

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But,
we direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
1) JavaScript Object by object literal
The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2. .... propertyN:valueN}
As you can see, property and value is separated by : (colon).
Let’s see the simple example of creating object in JavaScript.
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
Output
102 Shyam Kumar 40000

14 | P a g e
2) By creating instance of Object
The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
Out put:
101 Ravi Malik 50000

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be assigned in
the current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below.
<html>
<body>
<script>
functionemp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
Out put:
103 Vimal Jaiswal 30000

Class Declarations
A class can be defined by using a class declaration. A class keyword is used to declare a class
with any particular name. According to JavaScript naming conventions, the name of the class
always starts with an uppercase letter.
Class Declarations Example
Let's see a simple example of declaring the class.

15 | P a g e
 UNIT – III

REACT JS: Introduction to React React Router and Single Page Applications React Forms,
Flow Architecture and Introduction to Redux More Redux and Client-Server Communication

React Introduction
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library responsible only
for the view layer of the application. It was created by Jordan Walke, who was a
software engineer at Facebook. It was initially developed and maintained by Facebook
and was later used in its products like WhatsApp & Instagram. Facebook developed
ReactJS in 2011 in its newsfeed section, but it was released to the public in the month
of May 2013.
Today, most of the websites are built using MVC (model view controller) architecture.
In MVC architecture, React is the 'V' which stands for view, whereas the architecture
is provided by the Redux or Flux.
A ReactJS application is made up of multiple components, each component responsible
for outputting a small, reusable piece of HTML code. The components are the heart of
all React applications. These Components can be nested with other components to
allow complex applications to be built of simple building blocks. ReactJS uses virtual
DOM based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only
changes individual DOM elements instead of reloading complete DOM every time.
To create React app, we write React components that correspond to various elements.
We organize these components inside higher level components which define the
application structure. For example, we take a form that consists of many elements like
input fields, labels, or buttons. We can write each element of the form as React
components, and then we combine it into a higher-level component, i.e., the form
component itself. The form components would specify the structure of the form along
with elements inside of it.

React create-react-app
Starting a new React project is very complicated, with so many build tools. It uses many
dependencies, configuration files, and other requirements such as Babel, Webpack,
ESLint before writing a single line of React code. Create React App CLI tool removes all
that complexities and makes React app simple. For this, you need to install the package
using NPM, and then run a few simple commands to get a new React project.

16 | P a g e
Building our Single Page App
The way we build our app is no different than all the apps we've
been building so far. We will have a main parent component. Each
of the individual "pages" of our app will be separate components that
feed into the main component. The magic React Router brings to to
the table is basically choosing which components to show and which
to hide. To make this feel natural, all of this navigating is tied in with
our browser's address bar and back/forward buttons, so it is all
made to look seamless..

Displaying the Initial Frame

When building a SPA, there will always be a part of your page that
will remain static. This static part, also referred to as an app frame,
could just be one invisible HTML element that acts as the container
for all of your content, or could include some additional visual things
like a header, footer, navigation, etc. In our case, our app frame will
just be a component that contains UI elements for our navigation
header and an empty area for content to load in.
Inside our src folder, create a new file called Main.js and add the
following content into it:

import React, { Component } from "react";

class Main extends Component {

render() {
return (
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><a href="/">Home</a></li>
<li><a href="/stuff">Stuff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<div className="content">

</div>
</div>
);
}

17 | P a g e
That seems problematic. We'll look at how to fix that and do many
more little housekeeping tasks in the next section when we go one
level deeper into using React Router.
It's the Little Things
In the previous section, we got our SPA mostly up and running. We
just wrapped our entire routing region inside a HashRouter component,
and we separated our links and the place our links would load by
using the NavLink and Route components respectively. Getting our
example mostly up and running and fully up and running are two
different things. In the following sections, we'll close those
differences.
Fixing our Routing
We ended the previous section by calling out that our
routing has a bug in it. The contents of
our Home component is always displaying. The reason for it
is because the path for loading our Home component is /.
Our Stuff and Contact components have the / character as
part of their paths as well. This means
our Home component always matches whatever path we
are trying to navigate to. The fix for that is simple. In

18 | P a g e
 the Route component representing our home content, add
the exact prop as highlighted below:
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
This prop ensures the Route is active only if the path is an
exact match for what is being loaded. If you preview your
app now, you'll see that the content loads correctly with
the home content only displaying when our app is in the
home view.
Adding Some CSS
Right now, our app is completely unstyled. The fix for that
is easy. In your src folder, create a file
called index.css and add the following style rules into it:
body {
background-color: #FFCC00;
padding: 20px;
margin: 0;
}
h1, h2, p, ul, li {
font-family: sans-serif;
}
ul.header li {
display: inline;
list-style-type: none;
margin: 0;
}
ul.header {
background-color: #111;
padding: 0;
}
ul.header li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
padding: 20px;
display: inline-block;
}
.content {
background-color: #FFF;
padding: 20px;
}
.content h2 {
padding: 0;
margin: 0;
}

19 | P a g e
.content li {
margin-bottom: 10px;
}
After you've done this, we need to reference this style
sheet in our app. At the top of index.js, add
the import statement to do just that:
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
Save all of your changes if you haven't done so yet. If you preview
the app now, you'll notice that it is starting to look a bit more like the
example we started out with:

We are almost done here! There is just a few more things we need
to do.
Highlighting the Active Link
Right now, it's hard to tell which link corresponds to content that is
currently loaded. It would be useful to have some sort of a visual cue
to solve this. The creators of React Router have already thought of
that! When you click on a link, a class value of active is automatically
assigned to it.
For example, this is what the HTML for clicking on the
Stuff link looks like:
<a aria-current="true" href="#/stuff" class="active">Stuff</a>

20 | P a g e
This means all we really have to do is add the appropriate CSS that
lights up when an element has a class value of active set on it. To
make this happen, go back to index.css and add the following style
rule towards the bottom of your document:
.active {
background-color: #0099FF;
}
Once you have added this rule and saved your document, go back
to your browser and click around on the links in our example. You'll
see that the active link whose content is displayed from is
highlighted with a blue color. What you will also see is our Home link
always highlighted. That isn't correct. The fix for that is simple. Just
add the exact prop to our NavLink component representing our home
content:
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
Once you have done that, go back to our browser. You'll
see that our Home link only gets the active color treatment
when the home content is displayed:

21 | P a g e
 UNIT – IV
Java Web Development: JAVA PROGRAMMING BASICS, Model View Controller (MVC)
Pattern MVC Architecture using Spring RESTful API using Spring Framework Building an
application using Maven

Model View Controller (MVC) Pattern MVC Architecture using Spring

The Spring Web MVC framework provides Model-View-Controller (MVC) architecture

and ready components that can be used to develop flexible and loosely coupled web
applications. The MVC pattern results in separating the different aspects of the
application (input logic, business logic, and UI logic), while providing a loose coupling
between these elements.
• The Model encapsulates the application data and in general they will consist
of POJO.
• The View is responsible for rendering the model data and in general it generates
HTML output that the client's browser can interpret.
• The Controller is responsible for processing user requests and building an
appropriate model and passes it to the view for rendering.

The DispatcherServlet
The Spring Web model-view-controller (MVC) framework is designed around
a DispatcherServlet that handles all the HTTP requests and responses. The request
processing workflow of the Spring Web MVC DispatcherServlet is illustrated in the
following diagram −

Following is the sequence of events corresponding to an incoming HTTP request

to DispatcherServlet −

22 | P a g e
 • After receiving an HTTP request, DispatcherServlet consults
the HandlerMapping to call the appropriate Controller.
• The Controller takes the request and calls the appropriate service methods
based on used GET or POST method. The service method will set model data
based on defined business logic and returns view name to
the DispatcherServlet.
• The DispatcherServlet will take help from ViewResolver to pickup the defined
view for the request.
• Once view is finalized, The DispatcherServlet passes the model data to the view
which is finally rendered on the browser.
All the above-mentioned components, i.e. HandlerMapping, Controller, and
ViewResolver are parts of WebApplicationContext which is an extension of the
plainApplicationContext with some extra features necessary for web applications.

Required Configuration
You need to map requests that you want the DispatcherServlet to handle, by using a
URL mapping in the web.xml file. The following is an example to show declaration and
mapping for HelloWeb DispatcherServlet example −
<web-app id = "WebApp_ID" version = "2.4"
xmlns = "http://java.sun.com/xml/ns/j2ee"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation = "http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>Spring MVC Application</display-name>

<servlet>
<servlet-name>HelloWeb</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
<servlet-name>HelloWeb</servlet-name>
<url-pattern>*.jsp</url-pattern>
</servlet-mapping>

</web-app>
The web.xml file will be kept in the WebContent/WEB-INF directory of your web
application. Upon initialization of HelloWeb DispatcherServlet, the framework will try
to load the application context from a file named [servlet-name]-servlet.xml located
in the application's WebContent/WEB-INF directory. In this case, our file will be
HelloWebservlet.xml.

23 | P a g e
Next, <servlet-mapping> tag indicates what URLs will be handled by which

Figure 1: The Spring framework

1. The journey begins with the HTTP request (sometimes with data payload; for
example, due to form submission) in a URL. It first stations at DispatcherServlet.
The DispatcherServlet is a class defined in
the org.springframework.web.servlet package. It is the central dispatcher, a Java
Servlet Component for the Spring MVC framework. This front controller receives
all incoming HTTP client requests and delegates responsibilities to other
components for further processing of the request payload.
2. The handler mapping decides where the request’s next stop would be. It acts as a
consultant to the central dispatcher (DispatcherServlet) for routing the request to
the appropriate controller. The handler mapping parses the request URL to make
decisions and the dispatcher then delegates the request to the controller.
3. The controller‘s responsibility is to process the information payload received from
the request. Typically, a controller is associated with one or more business service
classes which, in turn, may have associated database services repository classes.
The repository classes fetch database information according to the business service
logic. It is the business service classes that contain the crux of processing. The
controller class simply carries the information received from one or more service
classes to the user. However, the response of the controller classes is still raw data
referred to as the model and may not be user friendly (with indentation, bullets,
tables, images, look-and-feel, and so forth).
4. Therefore, the controller packages the model data along with model and view name
back again to the central dispatcher, DispatcherServlet.
5. The view layer can be designed using any third-party framework such as Node.js,
Angular, JSP, and so on. The controller is decoupled from the view by passing the
view name to the DispatcherServlet and is least interested in it. The
DispatcherServlet simply carries the logical name and consults with the view
resolver to map the logical view name with the actual implementation.

24 | P a g e
6. Once the mapping between logical view name and the actual view implementation
is made, the DispatcherServlet delegates the responsibility of rendering model data
to the view implementation.
7. The view implementation finally carries the response back to the client browser.

REST
REST is the acronym of Representational State Transfer. It is a term coined in Roy
Thomas Fielding’s doctoral thesis where REST is a part that encompasses the
architecture of transferring the state of resources. The REST architecture is made
popular as an alternative to a SOAP implementation of Web services. Although REST
has a much wider connotation than just Web services, here we’ll limit our discussion
to dealing with REST resources only. The idea Web services are basically resource
sharing in the Web architecture that forms the cornerstone of distributed machine-to-
machine communication. The Spring MVC framework resides pretty well with REST
and provides the necessary API support to implement it seamlessly, with little effort.

The URL and HTTP Methods

The REST resources are located on a remote host using URL. The idea is based on the
foundation of the protocol called HTTP. For example, the
URL http://www.payroll.com/employees may mean a list of employees to search
and http://www.payroll.com/employees/101 may mean the detail of an employee with,
say, ID 101. Hence, the URL/URI actually represents the actual location of a resource
on the Web. The resource may be anything a Web page, an image, audio, video
content, or the like. The HTTP protocol specifies several methods. If they are
combined with the URL that points to the resource, we can get the following CRUD
results as outlined below.

URL Method Outcome

http://www.payroll.com/employees POST Creates a list of employees

http://www.payroll.com/employees PUT or Updates a list of employees

PATCH

http://www.payroll.com/employees DELETE Deletes a list of employees

25 | P a g e
http://www.payroll.com/employees GET Gets a list of employees

http://www.payroll.com/employees/101 POST Creates a employee with ID 101

http://www.payroll.com/employees/101 PUT or Updates employee with ID 101

PATCH

http://www.payroll.com/employees/101 DELETE Deletes employee with ID 101

http://www.payroll.com/employees/101 GET Gets employee details with ID

101

Though the URL is associated with HTTP methods in REST, there are no strict rules
to adhere to the outcome described above. The point is that RESTful URL structure
should be able to locate a resource on the server. For instance, the PUT instruction can
be used to create a new resource and POST can be used to update a resource.

REST in Spring
The REST API support was introduced in Spring from version 3.0 onwards; since
then, it has steadily evolved to the present day. We can create REST resources in the
following ways:

• Using controllers which are used to handle HTTP requests such as GET, POST,
PUT, and so forth. The PATCH command is supported by Spring 3.2 and higher
versions.
• Using the @PathVariable annotation. This annotation is used to handle
parameterized URLs. This is usually associated with
the @RequestMapping handler method in a Servlet environment.
• There are multiple ways to represent a REST resource using Spring views and view
resolvers with rendering model data as XML, JSON, Atom, and RSS.
• The type of model data view suits the client can be resolved
via ContentNegotiatingViewResolver. The ContentNegotiatingViewResolver,
however, does not resolve views itself but delegates to other ViewResolvers. By
default, these other view resolvers are picked up automatically from the application
context, though they can also be set explicitly by using the viewResolver property.

26 | P a g e
 UNIT – V

Databases & Deployment: Relational schemas and normalization

Structured Query Language (SQL) Data persistence using Spring JDBC Agile
development principles and deploying application in Cloud

Structured Query Language (SQL)

Structured Query Language is a standard Database language which is used to

create, maintain and retrieve the relational database. Following are some
interesting facts about SQL.
• SQL is case insensitive. But it is a recommended practice to use keywords
(like SELECT, UPDATE, CREATE, etc) in capital letters and use user
defined things (liked table name, column name, etc) in small letters.
• We can write comments in SQL using “–” (double hyphen) at the beginning
of any line.
• SQL is the programming language for relational databases (explained
below) like MySQL, Oracle, Sybase, SQL Server, Postgre, etc. Other non-
relational databases (also called NoSQL) databases like MongoDB,
DynamoDB, etc do not use SQL
• Although there is an ISO standard for SQL, most of the
implementations slightly vary in syntax. So we may encounter queries that
work in SQL Server but do not work in MySQL.

What is Relational Database?

Relational database means the data is stored as well as retrieved in the form of
relations (tables). Table 1 shows the relational database with only one relation
called STUDENT which
stores ROLL_NO, NAME, ADDRESS, PHONE and AGE of students.

ROLL_NO NAME ADDRESS PHONE AGE

1 RAM DELHI 9455123451 18

27 | P a g e
2 RAMESH GURGAON 9652431543 18
3 SUJIT ROHTAK 9156253131 20
4 SURESH DELHI 9156768971 18
TABLE 1

These are some important terminologies that are used in terms of relation.
Attribute: Attributes are the properties that define a relation.
e.g.; ROLL_NO, NAME etc.
Tuple: Each row in the relation is known as tuple. The above relation
contains 4 tuples, one of which is shown as:
1 RAM DELHI 9455123451 18

Degree: The number of attributes in the relation is known as degree of the

relation. The STUDENT relation defined above has degree 5.
Cardinality: The number of tuples in a relation is known as cardinality.
The STUDENT relation defined above has cardinality 4.
Column: Column represents the set of values for a particular attribute. The
column ROLL_NO is extracted from relation STUDENT.
ROLL_NO
1
2
3
4

The queries to deal with relational database can be categories as:

Data Definition Language: It is used to define the structure of the database.
e.g; CREATE TABLE, ADD COLUMN, DROP COLUMN and so on.
Data Manipulation Language: It is used to manipulate data in the relations.
e.g.; INSERT, DELETE, UPDATE and so on.
Data Query Language: It is used to extract the data from the relations. e.g.;
SELECT
So first we will consider the Data Query Language. A generic query to
retrieve from a relational database is:
SELECT [DISTINCT] Attribute_List FROM R1,R2….RM
[WHERE condition]
[GROUP BY (Attributes)[HAVING condition]]
[ORDER BY(Attributes)[DESC]];
Part of the query represented by statement 1 is compulsory if you want to
retrieve from a relational database. The statements written inside [] are optional.
We will look at the possible query combination on relation shown in Table 1.

28 |
Page
</beans>
Once you are done creating the source and bean configuration files, let us run the application.
If everything is fine with your application, it will print the following message.
----Updating Record with ID = 2 -----
Updated Record with ID = 2
----Listing Record with ID = 2 -----
ID : 2, Name : Nuha, Age : 20

Different Types of Cloud Computing Deployment Models

Most cloud hubs have tens of thousands of servers and storage devices to enable fast
loading. It is often possible to choose a geographic area to put the data "closer" to
users. Thus, deployment models for cloud computing are categorized based on their
location. To know which model would best fit the requirements of your organization,
let us first learn about the various types.

Public Cloud
The name says it all. It is accessible to the public. Public deployment models in the cloud
are perfect for organizations with growing and fluctuating demands. It also makes a
great choice for companies with low-security concerns. Thus, you pay a cloud service
provider for networking services, compute virtualization & storage available on the
public internet. It is also a great delivery model for the teams with development and
testing. Its configuration and deployment are quick and easy, making it an ideal choice
for test environments.

29 |
Page
Benefits of Public Cloud

o Minimal Investment - As a pay-per-use service, there is no large upfront cost

and is ideal for businesses who need quick access to resources
o No Hardware Setup - The cloud service providers fully fund the entire
Infrastructure
o No Infrastructure Management - This does not require an in-house team to
utilize the public cloud.

Limitations of Public Cloud

o Data Security and Privacy Concerns - Since it is accessible to all, it does not
fully protect against cyber-attacks and could lead to vulnerabilities.
o Reliability Issues - Since the same server network is open to a wide range of
users, it can lead to malfunction and outages
o Service/License Limitation - While there are many resources you can exchange
with tenants, there is a usage cap.

Private Cloud
Now that you understand what the public cloud could offer you, of course, you are keen
to know what a private cloud can do. Companies that look for cost efficiency and
greater control over data & resources will find the private cloud a more suitable choice.

It means that it will be integrated with your data center and managed by your IT

30 |
Page
team. Alternatively, you can also choose to host it externally. The private cloud offers
bigger opportunities that help meet specific organizations' requirements when it
comes to customization. It's also a wise choice for mission-critical processes that may
have frequently changing requirements.

Benefits of Private Cloud

o Data Privacy - It is ideal for storing corporate data where only authorized
personnel gets access
o Security - Segmentation of resources within the same Infrastructure can help
with better access and higher levels of security.
o Supports Legacy Systems - This model supports legacy systems that cannot
access the public cloud.

Limitations of Private Cloud

o Higher Cost - With the benefits you get, the investment will also be larger
than the public cloud. Here, you will pay for software, hardware, and resources
for staff and training.
o Fixed Scalability - The hardware you choose will accordingly help you scale in a
certain direction
o High Maintenance - Since it is managed in-house, the maintenance costs also
increase.

Community Cloud
The community cloud operates in a way that is similar to the public cloud. There's
just one difference - it allows access to only a specific set of users who share

31 |
Page
common objectives and use cases. This type of deployment model of cloud computing
is managed and hosted internally or by a third-party vendor. However, you can also
choose a combination of all three.

Benefits of Community Cloud

o Smaller Investment - A community cloud is much cheaper than the private &
public cloud and provides great performance
o Setup Benefits - The protocols and configuration of a community cloud must
align with industry standards, allowing customers to work much more efficiently.

Limitations of Community Cloud

o Shared Resources - Due to restricted bandwidth and storage capacity,

community resources often pose challenges.
o Not as Popular - Since this is a recently introduced model, it is not that popular
or available across industries

Hybrid Cloud
As the name suggests, a hybrid cloud is a combination of two or more cloud
architectures. While each model in the hybrid cloud functions differently, it is all part of
the same architecture. Further, as part of this deployment of the cloud computing
model, the internal or external providers can offer resources.

Let's understand the hybrid model better. A company with critical data will prefer

32 |
Page
storing on a private cloud, while less sensitive data can be stored on a public cloud. The
hybrid cloud is also frequently used for 'cloud bursting'. It means, supposes an
organization runs an application on-premises, but due to heavy load, it can burst into
the public cloud.

Benefits of Hybrid Cloud

o Cost-Effectiveness - The overall cost of a hybrid solution decreases since it

majorly uses the public cloud to store data.
o Security - Since data is properly segmented, the chances of data theft from
attackers are significantly reduced.
o Flexibility - With higher levels of flexibility, businesses can create custom
solutions that fit their exact requirements

Limitations of Hybrid Cloud

o Complexity - It is complex setting up a hybrid cloud since it needs to integrate

two or more cloud architectures
o Specific Use Case - This model makes more sense for organizations that have
multiple use cases or need to separate critical and sensitive data

33 |
Page
 34 |
Page