Full Stack Development 1
Uploaded by
Rohit NagFull Stack Development 1
Uploaded by
Rohit NagCAREER ADVANCEMENT CELL
FULL STACK DEVELOPMENT
FULL STACK DEVELOPMENT
INDEX
SNO UNIT TOPIC PAGE
NO
1 I Web development Basics - HTML 1
2 I HTML, CSS 24
3 I Web servers 27
4 I UNIX CLI Version control - Git & Github 28
5 II Javascript basics OOPS Aspects of JavaScript Memory 31
usage and Functions in JS
6 II jQuery, AJAX for data exchange with server jQuery 35
Framework jQuery events
7 II JSON data format. 44
8 III Introduction to React 47
9 III React Router and Single Page Applications React 61
Forms
10 III Flow Architecture 66
11 III Introduction to Redux More Redux 69
12 III Client-Server Communication 75
13 IV Java Web Development 78
14 IV Model View Controller (MVC) Pattern 78
15 IV MVC Architecture using Spring RESTful API 83
16 IV Spring Framework Building an application using 87
Maven
17 V Relational schemas 98
18 V Normalization Structured Query Language (SQL) 102
19 V Data persistence using Spring JDBC Agile 105
development principles
20 V Deploying application in Cloud 120
FULL STACK DEVELOPMENT
COURSE OBJECTIVES:
1. To become knowledgeable about the mostrecent web development technologies.
2. Idea for creating two tier and three tier architectural web applications.
3. Design and Analyse realtime web applications.
4. Constructing suitable client and server side applications.
5. To learn core concept of both frontend and backend 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 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
FULL STACK DEVELOPMENT
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>
1 |Page
FULL STACK DEVELOPMENT
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.
HTML Tags
HTML tags are like keywords which defines that how web browser will
format and display the content. With the help of tags, a web browser can
distinguish between an HTML content and a simple content. HTML tags
contain three main parts: opening tag, content and closing tag. But some
HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to
bottom and left to right. HTML tags are used to create HTML documents
and render their properties. Each HTML tags have different properties.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)
Syntax
<tag> content </tag>
CAREER ADVANCEMENT CELL 2 |Pag
e
FULL STACK DEVELOPMENT
HTML Tag Examples
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag </u>
HTML Elements
An HTML file is made of elements. These elements are responsible for
creating web pages and define content in that webpage. An element in HTML
usually consist of a start tag <tag name>, close tag </tag name> and
content inserted between them. Technically, an element is a collection of
start tag, attributes, end tag, content between them.
Example
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
CAREER ADVANCEMENT CELL 3 |Pag
e
FULL STACK DEVELOPMENT
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which
you want to display on the webpage. When you place the text within the
heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the
text depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to
<h6> tags, from highest level h1 (main heading) to the least level h6
(least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for
most important heading and h6 is used for least important.
Headings in HTML helps the search engine to understand and index
the structure of web page.
Note: The main keyword of the whole content of a webpage should be display by
h1 heading tag.
See this example:
1. <h1>Heading no. 1</h1>
2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
CAREER ADVANCEMENT CELL 4 |Pag
e
FULL STACK DEVELOPMENT
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the
keyword o f page </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-
heading with their paragraphs if
required.
</p>
</body>
</html>
CAREER ADVANCEMENT CELL 5 |Pag
e
FULL STACK DEVELOPMENT
Output:
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page.
It can create hyperlink to other web page as well as files, location, or any
URL. The "href" attribute is the most important attribute of the HTML a
tag. and which links to destination page or URL.
href attribute of HTML anchor tag
The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
<a href="[Link]">Click for Second Page</a>
Specify a location for Link using target attribute
If CAREER
we want to open that link to another page then we can use target attribute of
ADVANCEMENT
<a> tag. With the help of this link will be open in next page.
6 |Pag
FULL STACK DEVELOPMENT
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="[Link] target="_blank">
this- link </a>to go on home page of mrcet. </p>
</body>
</html>
Output:
HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML
image element.
Let's see an example of HTML image.
1. <h2>HTML Image Example</h2>
2. <img src="good_morning.jpg" alt ="Good Morning Friends"/>
Output:
CAREER ADVANCEMENT CELL 7 |Pag
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 8 |Pag
e
FULL STACK DEVELOPMENT
You have learnt about how to insert an image in your web page, now if we
want to give some height and width to display image according to our
requirement, then we can set it with height and width attributes of image.
Example:
<img src ="[Link]" height ="180" width ="300" alt ="animal image">
Output:
Note: Always try to insert the image with height and width, else it may flicker while
displaying on webpage.
Use of alt attribute
We can use alt attribute with tag. It will display an alternative text in case if
image cannot be displayed on browser. Following is the example for alt attribute:
1. <img src ="[Link]" height ="180" width ="300" alt ="animal image">
Output:
CAREER ADVANCEMENT CELL 9 |Pag
FULL STACK DEVELOPMENT
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>
CAREER ADVANCEMENT CELL 10 | P a g
e
FULL STACK DEVELOPMENT
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:
CAREER ADVANCEMENT CELL 11 | P a g
e
FULL STACK DEVELOPMENT
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list also. The Unordered list starts with <ul> tag and list
items start with the <li> tag.
o disc
o circle
o square
o none
HTML Unordered List Example
1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="circle"
1. <ul type ="circle" >
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
CAREER ADVANCEMENT CELL 12 | P a g
e
FULL STACK DEVELOPMENT
5. <li>SQL</li>
6. </ul>
Test it Now
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="square"
<ul type ="square" >
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
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. .
CAREER ADVANCEMENT CELL 13 | P a g
e
FULL STACK DEVELOPMENT
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 want 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>
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as
single line textfield control. The name attribute is optional, but it is required
for the server side component such as JSP, ASP, PHP etc.
<form>
First Name: <input type ="text" name ="firstname"/> <br/>
Last Name: <input type="text" name ="lastname"/> <br/>
</form>
HTML <textarea> tag in form
The <textarea> tag in HTML is used to insert multiple-line text in a form. The
size of <textarea> can be specify either using "rows" or "cols" attribute or by
CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
CAREER ADVANCEMENT CELL 14 | P a g
e
FULL STACK DEVELOPMENT
<body>
<form>
Enter your address:<br>
<textarea rows ="2" cols="20"></textarea>
</form>
</body>
</html>
Output:
Label Tag in Form
It is considered better to have label in form. As it makes the code
parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you
need to have for attribute in label tag that must be same as id attribute of input
tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will
use it, then it will provide a focus when you tap or click on label tag. It is more
worthy with touchscreens.
<form>
<label for="firstname">First Name: </label> <br/>
<input type ="text" id ="firstname" name ="firstname"/>
<br/> <label for ="lastname">Last Name: </label>
<input type ="text" id ="lastname" name ="lastname"/> <br/>
CAREER ADVANCEMENT CELL 15 | P a g
e
FULL STACK DEVELOPMENT
</form>
Output:
HTML Password Field Control
The password is not visible to the user in password field control.
1. <form>
2. <label for="password">Password: </label>
3. <input type ="password" id ="password" name ="password"/> <br/>
4. </form>
Output:
HTML 5 Email Field Control
CAREER ADVANCEMENT CELL 16 | P a g
e
FULL STACK DEVELOPMENT
The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.
<form>
<label for="email">Email: </label>
<input type ="email" id ="email" name ="email"/>
<br/> </form>
It will display in browser like below:
Radio Button Control
ADVERTISEMENT
The radio button is used to select one option from multiple options. It is
used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be
selected at a time.
Using radio buttons for multiple options, you can only choose a single option
at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id ="gender" name ="gender" value ="male"/>Male
<input type ="radio" id ="gender" name ="gender" value
="female"/>Femal
e <br/>
</form>
CAREER ADVANCEMENT CELL 17 | P a g
e
FULL STACK DEVELOPMENT
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type ="checkbox" id ="cricket" name ="cricket" value
="cricket"/> <label for ="cricket">Cricket</label> <br>
<input type ="checkbox" id ="football" name ="football" value
="football"/> <label for ="football">Football</label> <br>
<input type ="checkbox" id ="hockey" name ="hockey" value ="hockey"/>
<label for ="hockey">Hockey</label>
</form>
Note: These are similar to radio button except it can choose multiple options at a
time and radio button can select one button at a time, and its display.
Output:
CAREER ADVANCEMENT CELL 18 | P a g
e
FULL STACK DEVELOPMENT
Submit button control
HTML <input type="submit"> are used to add a submit button on web
page. When user clicks on submit button, then form get submit to the server.
Syntax:
1. <input type ="submit" value ="submit" >
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example:
<form>
<label for="name">Enter name</label><br>
<input type ="text" id ="name" name ="name"><br>
<label for="pass">Enter Password</label><br>
<input type ="Password" id ="pass" name ="pass"><br>
<input type ="submit" value ="submit" >
</form>
Output:
CAREER ADVANCEMENT CELL 19 | P a g
e
FULL STACK DEVELOPMENT
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a
form. This element is used with <legend> element which provide caption for
the grouped elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type ="text" id ="name" name ="name"><br>
<label for ="pass">Enter Password</label><br>
<input type ="Password" id ="pass" name ="pass"><br>
<input type="submit" value ="submit" >
</fieldset>
</form>
Output:
CAREER ADVANCEMENT CELL 20 | P a g
FULL STACK DEVELOPMENT
HTML Form Example
Following is the example for a simple form of registration.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name ="name"><br>
<label>Enter your email</label><br>
<input type="email" name ="email"><br>
<label>Enter your password</label><br>
<input type="password" name ="pass"><br>
<label>confirm your password</label><br>
<input type="password" name ="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id ="gender" name="gender" value ="male"/>Male <br>
<input type ="radio" id ="gender" name ="gender" value
="female"/>Female <br/>
<input type="radio" id ="gender" name="gender" value ="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
CAREER ADVANCEMENT CELL 21 | P a g
e
FULL STACK DEVELOPMENT
<input type ="submit" value ="sign-up">
</fieldset>
</form>
</body>
</html>
Output:
HTML Form Example
Let's see a simple example of creating HTML form.
<form action ="#" >
<table>
<tr>
<td class ="tdLabel"><label for ="register_name" class ="label">Enter
name:</label> </td>
<td><input type ="text" name ="name" value ="" id ="register_name" style
="wi dth:160px"/></td>
</tr>
<tr>
<td class ="tdLabel"><label for ="register_password" class ="label">Enter
CAREER
ADVANCEMENT
password:</ label></td>
<td><input type ="password" name ="password" id ="register_password"
style
22 | P a g
FULL STACK DEVELOPMENT
="width:160px"/></td>
</tr>
<tr>
<td class ="tdLabel"><label for ="register_email" class ="label">Enter
Email:</label>< /td>
<td
><input type="email" name ="email" value="" id ="register_email" style
="width:160px"/
></td>
</tr>
<tr>
<td class ="tdLabel"><label for ="register_gender" class ="label">Enter
Gender: </label></td>
<td>
<input type ="radio" name ="gender" id ="register_gendermale" value
="male"/> <label for ="register_gendermale">male</label>
<input type ="radio" name ="gender" id ="register_genderfemale" value
="female" />
<label for ="register_genderfemale">female</label>
</td>
</tr>
<tr>
<td class ="tdLabel"><label for ="register_country" class ="label">Select
Country:</la bel></td>
<td><select name ="country" id ="register_country" style
="width:160px" > <option value ="india">india</option>
<option value ="pakistan">pakistan</option>
<option value ="africa">africa</option>
<option value ="china">china</option>
<option value ="other">other</option>
</select>
</td>
</tr>
<tr>
<td colspan ="2"><div align ="right"><input type ="submit" id ="register_0"
va
lue ="register"/>
</div></td>
</tr>
CAREER ADVANCEMENT CELL 23 | P a g
e
FULL STACK DEVELOPMENT
</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:
CAREER
ADVANCEMENT
<html>
<head>
<title></title>
</head>
<body>
<h3 style="color: red;
24 | P a g
FULL STACK DEVELOPMENT
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
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;}
CAREER .green{color: green;}
ADVANCEMENT
</style>
</head>
<body>
25 | P a g
FULL STACK DEVELOPMENT
<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.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type ="text/css" href="[Link]">
</head>
<body>
CAREER ADVANCEMENT CELL 26 | P a g
e
FULL STACK DEVELOPMENT
<h2>Learning HTML with External 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>
CSS file:
body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}
WEB SERVER
A web server is a computer that stores web server software and a website's component files
(for example, HTML documents, images, CSS stylesheets, and JavaScript files). A web
server connects to the Internet and supports physical data interchange with other devices
connected to the web.
A web server includes several parts that control how web users access hosted files. At a
minimum, this is an HTTP server. An HTTP server is software that understands URLs (web
addresses) and HTTP (the protocol your browser uses to view webpages). An HTTP server
can be accessed through the domain names of the websites it stores, and it delivers the
CAREER ADVANCEMENT CELL 27 | P a g
e
FULL STACK DEVELOPMENT
content of these hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web server, the
browser requests the file via HTTP. When the request reaches the correct (hardware) web
server, the (software) HTTP server accepts the request, finds the requested document, and
sends it back to the browser, also through HTTP. (If the server doesn't find the requested
document, it returns a 404 response instead.)
Basic representation of a client/server connection through HTTP
To publish a website, you need either a static or a dynamic web server.
A static web server, or stack, consists of a computer (hardware) with an HTTP server
(software). We call it "static" because the server sends its hosted files as-is to your browser.
A dynamic web server consists of a static web server plus extra software, most commonly an
application server and a database. We call it "dynamic" because the application server
updates the hosted files before sending content to your browser via the HTTP server.
For example, to produce the final webpages you see in the browser, the application server
might fill an HTML template with content from a database. Sites like MDN or Wikipedia
have thousands of webpages. Typically, these kinds of sites are composed of only a few
HTML templates and a giant database, rather than thousands of static HTML documents.
This setup makes it easier to maintain and deliver the content.
Git & Github
What is Git?
Git is a popular version control system. It was created by Linus Torvalds
in 2005, and has been maintained by Junio Hamano since then.
It is used for:
. Tracking code changes
. Tracking who made changes
. Coding collaboration
What does Git do?
. Manage projects with Repositories
. Clone a project to work on a local copy
. Control and track changes with Staging and Committing
. Branch and Merge to allow for work on different parts and versions of
a project
CAREER 28 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
. Pull the latest version of the project to a local copy
. Push local updates to the main project
Working with Git
. Initialize Git on a folder, making it a Repository
. Git now creates a hidden folder to keep track of changes in that folder
. When a file is changed, added or deleted, it is considered modified
. You select the modified files you want to Stage
. The Staged files are Committed, which prompts Git to store a
permanent snapshot of the files
. Git allows you to see the full history of every commit.
. You can revert back to any previous commit.
. Git does not store a separate copy of every file in every commit, but
keeps track of changes made in each commit!
Github
GitHub is a code hosting platform for version control and collaboration. It
lets you and others work together on projects from anywhere.
This tutorial teaches you GitHub essentials like repositories, branches,
commits, and pull requests. You'll create your own Hello World repository
and learn GitHub's pull request workflow, a popular way to create and
review code.
In this quickstart guide, you will:
. Create and use a repository
. Start and manage a new branch
. Make changes to a file and push them to GitHub as commits
. Open and merge a pull request
To complete this tutorial, you need a GitHub account and Internet access.
You don't need to know how to code, use the command line, or install Git
(the version control software that GitHub is built on). If you have a
question about any of the expressions used in this guide, head on over to
the glossary to find out more about our terminology.
Creating a repository
A repository is usually used to organize a single project. Repositories can
contain folders and files, images, videos, spreadsheets, and data sets --
anything your project needs. Often, repositories include a README file, a
file with information about your project. README files are written in the
plain text Markdown language. You can use this cheat sheet to get started
with Markdown syntax. GitHub lets you add a README file at the same
time you create your new repository. GitHub also offers other common
CAREER ADVANCEMENT CELL 29 | P a g
e
FULL STACK DEVELOPMENT
options such as a license file, but you do not have to select any of them
now.
Your hello-world repository can be a place where you store ideas,
resources, or even share and discuss things with others.
1. In the upper-right corner of any page, use the drop-down menu,
and select
2. New repository.
3. In the Repository name box, enter hello-world.
4. In the Description box, write a short description.
5. Select Add a README file.
6. Select whether your repository will be Public or Private.
7. Click Create repository.
UNIT - II
CAREER ADVANCEMENT CELL 30 | P a g
e
FULL STACK DEVELOPMENT
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="[Link]('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<pid="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.
Following are the list for Window event attributes:
CAREER ADVANCEMENT CELL 31 | P a g
e
FULL STACK DEVELOPMENT
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>
<pid="demo"></p>
<script>
function myFunction() {
[Link]("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>
<pid="demo"></p>
<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello MRCET!";
}
</script>
</body>
</html>
2) JavaScript can change HTML style
Example:
<!DOCTYPE html>
<html>
<body>
<pid="demo">JavaScript can change the style of an HTML element.</p>
CAREER ADVANCEMENT CELL 32 | P a g
e
FULL STACK DEVELOPMENT
<script>
function myFunction() {
[Link]("demo").[Link] = "25px";
[Link]("demo").[Link] = "brown";
[Link]("demo").[Link] = "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"
}
[Link]('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="[Link]"></script>
CAREER ADVANCEMENT CELL 33 | P a g
e
FULL STACK DEVELOPMENT
</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:[Link]
function fun() {
var x = [Link]("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}
[Link]([Link]+" "+[Link]+" "+[Link]);
</script>
</body>
</html>
Output
102 Shyam Kumar 40000
CAREER ADVANCEMENT CELL 34 | P a g
e
FULL STACK DEVELOPMENT
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();
[Link]=101;
[Link]="Ravi Malik";
[Link]=50000;
[Link]([Link]+" "+[Link]+" "+[Link]);
</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){
[Link]=id;
[Link]=name;
[Link]=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
[Link]([Link]+" "+[Link]+" "+[Link]);
</script>
</body>
</html>
Output:
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.
CAREER ADVANCEMENT CELL 35 | P a g
e
FULL STACK DEVELOPMENT
<!DOCTYPE html>
<html>
<body>
<script>
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
[Link]=id;
[Link]=name;
}
//Declaring method
detail()
{
[Link]([Link]+" "+[Link]+"<br>")
}
}
//passing object to a variable
vare1=new Employee(101,"Martin Roy");
vare2=new Employee(102,"Duke William");
[Link](); //calling method
[Link]();
</script>
</body>
</html>
OUTPUT:
101 Martin Roy
102 Duke William
JQuery
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to
simplify the client-side scripting of HTML. It makes things like HTML document traversal
and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API
that works on a lot of different type of browsers.
The main purpose of jQuery is to provide an easy way to use JavaScript on your website to
make it more interactive and attractive. It is also used to add animation.
jQuery is a small, light-weight and fast JavaScript library. It is also referred as ?write less do
more? because it takes a lot of common tasks that requires many lines of JavaScript code to
accomplish, and binds them into methods that can be called with a single line of code
whenever needed. It is also very useful to simplify a lot of the complicated things from
JavaScript, like AJAX calls and DOM manipulation.
o jQuery is a small, fast and lightweight JavaScript library.
o jQuery is platform-independent.
o jQuery means "write less do more".
CAREER ADVANCEMENT CELL 36 | P a g
e
FULL STACK DEVELOPMENT
o jQuery simplifies AJAX call and DOM manipulation.
It is always advised to a fresher to learn the basics of web designing before starting to learn
jQuery. We should learn HTML, CSS and JavaScript first.
jQuery Example
File: [Link]
<!DOCTYPE html>
<html>
<head>
<title>First jQuery Example</title>
<script type="text/javascript" src="[Link]
[Link]">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").css("background-color", "pink");
});
</script>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
</html>
jQuery is aJavaScript framework. It facilitates the readability and the manipulation of HTML DOM
elements, event handling, animations, and AJAX calls. It’s also free,open-source softwarethat
adheres to the MIT License. As a result, it is one of the most popular JavaScript libraries.
jQuery Events
jQuery events are the actions that can be detected by your web application. They are used to
create dynamic webpages. An event shows the exact moment when something happens.
These are some examples of events.
o A mouse click
o An HTML form submission
o A webpage loading
o A keystroke on the keyboard
o Scrolling of the webpage etc.
jQuery click() event
When you click on an element, the click event occurs and once the click event occurs it
execute the click () method or attaches a function to run.
It is generally used together with other events of jQuery.
Syntax:
$(selector).click()
CAREER ADVANCEMENT CELL 37 | P a g
e
FULL STACK DEVELOPMENT
example to demonstrate jQuery click() event.
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the statement.</p>
</body>
</html>
example to demonstrate the jquery click() event. In this example, when you click on the
heading element, it will hide the current heading.
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
<script>
$(document).ready(function(){
$("h1,h2,h3").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>This heading will disappear if you click on this.</h1>
<h2>I will also disappear.</h2>
<h3>Me too.</h3>
</body>
</html>
jQuery focus()
The jQuery focus event occurs when an element gains focus. It is generated
by a mouse click or by navigating to it.
This event is implicitly used to limited sets of elements such as form
elements like <input>, <select> etc. and links <a href>. The focused
elements are usually highlighted in some way by the browsers.
The focus method is often used together with blur () method.
Syntax:
CAREER ADVANCEMENT CELL
38 | P a g e
FULL STACK DEVELOPMENT
$(selector).focus()
It triggers the focus event for selected elements.
$(selector).focus(function)
It adds afunction to the focus event.
Example of jQuery focus() event
Let's take an example to demonstrate jQuery focus() event.
<!doctype html>
<html lang ="en" >
<head>
<meta charset ="utf-8">
<title>focus demo</title>
<style>
span {
display: none;
}
</style>
<script src="[Link]
</head>
<body>
<p><input type ="text"> <span>Focus starts.. Write your name.</span></p>
<p><input type ="password"> <span>Focus starts.. Write your
password.</span></p >
<script>
$( "input" ).focus(function() {
$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );
});
</script>
</body>
</html>
jQuery submit()
jQuery submit event is sent to the element when the user attempts to submit a
form. This event is only attached to the <form> element. Forms can be
submitted either by clicking on the submit button or by pressing the enter
button on the keyboard when that certain form elements have focus. When the
submit event occurs, the submit()
method attaches a function with it to run.
Syntax:
$(selector).submit()
Example of jQuery submit() event
Let's take an example to demonstrate jQuery submit() event.
CAREER ADVANCEMENT CELL 39 | P a g
e
FULL STACK DEVELOPMENT
<!DOCTYPE html>
<html lang ="en" >
<head>
<meta charset ="utf-8">
<title>submit demo</title>
<style>
p{
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="[Link]
</head>
<body>
<p>Type 'MRCET' to submit this form finally.</p>
<form action ="javascript:alert( 'success!' );">
<div>
<input type ="text" >
<input type ="submit" >
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "MRCET" ) {
$( "span" ).text( "Submitted Successfully." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );
[Link]();
});
</script>
</body>
</html>
jQuerymouseover()
The mouseover event is occurred when you put your mouse cursor over the
selected element .Once the mouseover event is occurred, it executes the
mouseover () method or attach a function to run.
This event is generally used with mouseout() event.
Note: Most of the people are confused between mouseenter and mouseover.
CAREER ADVANCEMENT CELL 40 | P a g
e
FULL STACK DEVELOPMENT
Difference between mouseenter() and mouseover()
The mouseenter event is only triggered if the mouse pointer enters the
selected element whereas the mouseover event triggers if the mouse cursor
enters any child
elements as well as the selected element.
Syntax:
$(selector).mouseover()
It triggers the mouseover event for selected elements.
$(selector).mouseover(function)
Example of jQuery mouseover() event
Let's take an example to demonstrate jQuery mouseover() event.
<!DOCTYPE html>
<html>
<head>
<script src
="[Link] pt>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "lightgreen");
});
$("p").mouseout(function(){
$("p").css("background-color", "orange");
});
});
</script>
</head>
<body>
<p>Move your cursor over this paragraph.</p>
</body>
</html>
jQuerymouseover( ) event example 2
Let's see another example of jQuery mouseover() event.
<!DOCTYPE html>
<html lang ="en" >
<head>
<meta charset ="utf-8">
<title>mouseover demo</title>
<style>
[Link] {
width: 40%;
height: 120px;
CAREER ADVANCEMENT CELL 41 | P a g
e
FULL STACK DEVELOPMENT
margin: 0 15px;
background-color: lightgreen;
}
[Link] {
width: 60%;
height: 60%;
background-color: red;
margin: 10px auto;
}
</style>
<script src="[Link]
</head>
<body>
<div class ="out" >
<span style ="padding:20px">move your mouse</span>
<div class ="in"></div>
</div>
<script>
$( "[Link]" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
});
</script>
</body>
</html>
jQuery UI Categorization
We can categorize the jQuery UI into four groups.
1. Interactions
2. Widgets
3. Effects
4. Utilities
1) Interactions: Interactions are the set of plug-ins which facilitates users to
interact with DOM elements. These are the mostly used interactions:
o Draggable
o Droppable
o Resizable
o Selectable
o Sortable
CAREER ADVANCEMENT CELL 42 | P a g
e
FULL STACK DEVELOPMENT
2) Widgets: Widgets are the jQuery plug-ins which makes you able to create
user interface elements like date picker, progress bar etc. These are the
mostly used widgets:
o Accordion
o Autocomplete
o Dialog
o Button
o Date Picker
o Menu
o Progress Bar
o Tabs
o Tooltip
o Slider
o Spinner
3) Effects: The internal jQuery effects contain a full suite of custom
animation and transition for DOM elements.
o Hide
o Show
o Add Class
o Remove Class
o Switch Class
o Toggle Class
o Color Animation
o Effect
o Toggle
4) Utilities: Utilities are the modular tools, used by jQuery library internally.
o Position: It is used to set the position of the element according to the
other element's alignment (position).
Ajax programming
AJAX stands for Asynchronous JavaScript and XML. It describes a
concept of asynchronous data transfer (here: data encapsulated in XML)
between the client (usually a web browser) and a server to only exchange/
alter a part of the webpage without the need of a full pagereload. That means
the browser will issue an XML Http Request in the background and receive only
a part of the page - usually tied to one or more html-tags holding uids.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo"></p>
CAREER ADVANCEMENT CELL 43 | P a g
e
FULL STACK DEVELOPMENT
<hi> ajax demo</hi>
<button onclick="fun1()">click here</button>
<script>
function fun1()
{
var xhr=new XMLHttpRequest();
[Link]=function()
{
[Link]("demo").innerHTML=[Link]
ext; }
[Link]("GET","[Link]",true);
[Link]();
}
</script>
</body>
</html>
Output:
[Link]
hello ajax wants to interact with you
JSON Example
JSON example can be created by object and array. Each object can have
different data such as text, number, boolean etc. Let's see different JSON
examples using object and array.
JSON Object Example
A JSON object contains data in the form of key/value pair. The keys are
strings and the values are the JSON types. Keys and values are separated by
colon. Each entry (key/value pair) is separated by comma.
The { (curly brace) represents the JSON object.
{
"employee": {
"name": "sonoo",
"salary": 56000,
"married": true
}
}
CAREER ADVANCEMENT CELL 44 | P a g
e
FULL STACK DEVELOPMENT
JavaScript Memory usage
JavaScript automatically allocates memory when objects are created and frees
it when they are not used anymore (garbage collection). This automaticity is a
potential source of confusion: it can give developers the false impression that they
don't need to worry about memory management.
Memory life cycle
Regardless of the programming language, the memory lifecycle is pretty much always the
same:
1. Allocate the memory you need
2. Use the allocated memory (read, write)
3. Release the allocated memory when it is not needed anymore
The second part is explicit in all languages. The first and last parts are explicit in low-level
languages but are mostly implicit in high-level languages like JavaScript.
Allocation in JavaScript
Value initialization
In order to not bother the programmer with allocations, JavaScript will automatically allocate
memory when values are initially declared.
const n = 123; // allocates memory for a number
const s = "azerty"; // allocates memory for a string
consto = {
a: 1,
b: null,
}; // allocates memory for an object and contained values
// (like object) allocates memory for the array and
// contained values
const a = [1,null, "abra"];
function f(a) {
return a + 2;
} / / allocates a function ( which is a callable object)
// function expressions also allocate an object
[Link](
"click",
() => {
[Link] = "blue";
},
false,
);
CAREER ADVANCEMENT CELL 45 | P a g
e
FULL STACK DEVELOPMENT
Allocation via function calls
Some function calls result in object allocation.
const d = new Date(); // allocates a Date object
const e = document. createElement( " div" ) ; / / allocates a DOM element
Copy to Clipboard
Some methods allocate new values or objects:
const s = "azerty";
const s2 = [Link](0, 3); // s2 is a new string
// Since strings are immutable values,
// JavaScript may decide to not allocate memory,
// but just store the [0, 3] range.
const a = ["ouais ouais", "nannan"];
const a2 = ["generation", "nannan"];
const a3 = [Link](a2);
/ / new array with 4 elements being
// the concatenation of a and a2 elements.
Using values
Using values basically means reading and writing in allocated memory. This can be done by
reading or writing the value of a variable or an object property or even passing an argument
to a function.
Release when the memory is not needed anymore
The majority of memory management issues occur at this phase. The most difficult aspect of
this stage is determining when the allocated memory is no longer needed.
Low-level languages require the developer to manually determine at which point in the
program the allocated memory is no longer needed and to release it.
CAREER ADVANCEMENT CELL 46 | P a g
e
FULL STACK DEVELOPMENT
UNIT-3
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.
The create-react-app is an excellent tool for beginners, which allows you to
create and run React project very quickly. It does not take any configuration
manually. This tool is wrapping all of the required dependencies like
Webpack, Babel for React
CAREER ADVANCEMENT CELL 47 | P a g
e
FULL STACK DEVELOPMENT
project itself and then you need to focus on writing React code only. This tool
sets up the development environment, provides an excellent developer
experience, and optimizes the app for production.
Requirements
The Create React App is maintained by Facebook and can works on any
platform, for example, macOS, Windows, Linux, etc. To create a React
Project using create- react-app, you need to have installed the following things
in your system.
1. Node version >= 8.10
2. NPM version >= 5.6
Let us check the current version of Node and NPM in the system.
Run the following command to check the Node version in the command prompt.
1. $ node -v
Run the following command to check the NPM version in the command prompt.
1. $ npm -v
Installation
Here, we are going to learn how we can install React using CRA tool. For
this, we need to follow the steps as given below.
Install React
We can install React using npm package manager by using the following
command. There is no need to worry about the complexity of React
installation. The create- react-app npm package manager will manage
everything, which needed for React project.
1. C:\Users\javatpoint> npm install -g create-react-app
Create a new React project
Once the React installation is successful, we can create a new React
project using create-react-app command. Here, I choose "reactproject" name
for my project.
1. C:\Users\javatpoint> create-react-app reactproject
CAREER ADVANCEMENT CELL 48 | P a g
e
FULL STACK DEVELOPMENT
NOTE: We can combine the above two steps in a single command using npx. The
npx is a package runner tool which comes with npm 5.2 and above version.
1. C:\Users\javatpoint> npx create-react-app reactproject
The above command will take some time to install the React and create a new
project with the name "reactproject." Now, we can see the terminal as like below.
The above screen tells that the React project is created successfully on our
system. Now, we need to start the server so that we can access the
application on the browser. Type the following command in the terminal
window.
1. $ cd Desktop
2. $ npm start
NPM is a package manager which starts the server and access the
application at default server [Link] Now, we will get the
following screen.
CAREER ADVANCEMENT CELL 49 | P a g e
FULL STACK DEVELOPMENT
Next, open the project on Code editor. Here, I am using Visual Studio Code.
Our project's default structure looks like as below image.
In React application, there are several files and folders in the root directory.
Some of them are as follows:
1. node_modules: It contains the React library and any other third party
libraries needed.
2. public: It holds the public assets of the application. It contains the [Link]
where React will mount the application by default on the <div id="root"></div>
element.
3. src: It contains the [Link], [Link], [Link], [Link], [Link], and
[Link] files. Here, the [Link] file always responsible for displaying the
output screen in React.
4. [Link]: It is generated automatically for any operations where
npm package modifies either the node_modules tree or [Link]. It
cannot be published. It will be ignored if it finds any other place rather
than the top-level package.
CAREER ADVANCEMENT CELL 50 | P a g
e
FULL STACK DEVELOPMENT
5. [Link]: It holds various metadata required for the project. It gives
information to npm, which allows to identify the project as well as
handle the project?s dependencies.
6. [Link]: It provides the documentation to read about React topics.
React Environment Setup
Now, open the src >> [Link] file and make changes which you want to
display on the screen. After making desired changes, save the file. As soon as
we save the file, Webpack recompiles the code, and the page will refresh
automatically, and changes are reflected on the browser screen. Now, we can
create as many components as we want, import the newly created component
inside the [Link] file and that file will be included in our main [Link] file
after compiling by Webpack.
Next, if we want to make the project for the production mode, type the
following command. This command will generate the production build,
which is best optimized.
$ npm build
React Features
Currently, ReactJS gaining quick popularity as the best JavaScript framework
among web developers. It is playing an essential role in the front-end
ecosystem. The important features of ReactJS are as following.
o JSX
o Components
o One-way Data Binding
o Virtual DOM
o Simplicity
o Performance
JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML
or HTML like syntax used by ReactJS. This syntax is processed into
JavaScript calls of React Framework. It extends the ES6 so that HTML like
text can co-exist with JavaScript react code. It is not necessary to use JSX,
but it is recommended to use in ReactJS.
Components
CAREER is all about components. ReactJS application is made up of
ReactJS
ADVANCEMENT
multiple components, and each component has its own logic and controls.
These components can be reusable which help you to maintain the code when
working on larger scale projects.
One-way Data Binding
ReactJS is designed in such a manner that follows unidirectional data flow or
one- way data binding. The benefits of one-way data binding give you
better control throughout the application. If the data flow is in another
direction, then it requires additional features. It is because components are
supposed to be immutable and the data within them cannot be changed. Flux
is a pattern that helps to keep your data
51 | P a g
FULL STACK DEVELOPMENT
unidirectional. This makes the application more flexible that leads to
increase efficiency.
Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works
like a one-way data binding. Whenever any modifications happen in the web
application, the entire UI is re-rendered in virtual DOM representation.
Then it checks the difference between the previous DOM representation
and new DOM. Once it has done, the real DOM will update only the things
that have actually changed. This makes the application faster, and there is
nowastage of memory.
Simplicity
ReactJS uses JSX file which makes the application simple and to code as
well as understand. We know that ReactJS is a component-based approach
which makes the code reusable as your need. This makes it simple to use and
learn.
Performance
ReactJS is known to be a great performer. This feature makes it much
better than other frameworks out there today. The reason behind this is that it
manages a virtual DOM. The DOM is a cross-platform and programming API
which deals with HTML, XML or XHTML. The DOM exists entirely in memory.
Due to this, when we create a component, we did not write directly to the
DOM. Instead, we are writing virtual components that will turn into the
DOM leading to smoother and faster performance.
React JSX
As we have already seen that, all of the React components have a render
function. The render function specifies the HTML output of a React
component. JSX(JavaScript Extension), is a React extension which allows
writing JavaScript code that looks like HTML. In other words, JSX is an
HTML-like syntax used by React that extends ECMAScript so that HTML-
like syntax can co-exist with JavaScript/React code. The syntax is used by
preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into
standard JavaScript objects that a JavaScript engine will parse.
JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree
structures) in the same file where you write JavaScript code, then
preprocessor will transform these expressions into actual JavaScript code.
Just like XML/HTML, JSX tags have a tag name, attributes, and children.
Example
Here, we will write JSX syntax in JSX file and see the corresponding
JavaScript code which transforms by preprocessor(babel).
JSX File
<div>Hello JavaTpoint</div>
Corresponding Output
1. [Link]("div", null, "Hello JavaTpoint");
The above line creates a react element and passing three arguments inside
where the first is the name of the element which is div, second is the
attributes passed in
CAREER ADVANCEMENT CELL 52 | P a g
e
FULL STACK DEVELOPMENT
the div tag, and last is the content you pass which is the "Hello JavaTpoint."
Why use JSX?
o It is faster than regular JavaScript because it performs optimization
while translating the code to JavaScript.
o Instead of separating technologies by putting markup and logic in
separate files, React uses components that contain both. We will learn
components in a further section.
o It is type-safe, and most of the errors can be found at compilation time.
o It makes easier to create templates.
React Components
Earlier, the developers write more than thousands of lines of code for developing a single
page application. These applications follow the traditional DOM structure, and making
changes in them was a very challenging task. If any mistake found, it manually searches the
entire application and update accordingly. The component-based approach was introduced to
overcome an issue. In this approach, the entire application is divided into a small logical
group of code, which is known as components.
A Component is considered as the core building blocks of a React application. It makes the
task of building UIs much easier. Each component exists in the same space, but they work
independently from one another and merge all in a parent component, which will be the final
UI of your application.
Every React component have their own structure, methods as well as APIs. They can be
reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the
root is the starting component, and each of the other pieces becomes branches, which are
further divided into sub-branches.
In ReactJS, we have mainly two types of components. They are
1. Functional Components
2. Class Components
Functional Components
In React, function components are a way to write components that only contain a render
method and don't have their own state. They are simply JavaScript functions that mayor may
not receive data as parameters. We can create a function that takes props(properties) as input
CAREER ADVANCEMENT CELL 53 | P a g
FULL STACK DEVELOPMENT
and returns what should be rendered. A valid functional component can be shown in the
below example.
function WelcomeMessage(props) {
return <h1>Welcome to the , {[Link]}</h1>;
}
The functional component is also known as a stateless component because they do not hold
or manage state. It can be explained in the below example.
Example
import React, { Component } from 'react';
class App extends [Link] {
render() {
return (
<div>
<First/>
<Second/>
</div>
);
}
}
class First extends [Link] {
render() {
return (
<div>
<h1>JavaTpoint</h1>
</div>
);
}
}
class Second extends [Link] {
render() {
return (
<div>
<h2>[Link]</h2>
<p>This websites contains the great CS tutorial.</p>
</div>
);
}
}
export default App;
Output:
CAREER ADVANCEMENT CELL 54 | P a g
e
FULL STACK DEVELOPMENT
Class Components
Class components are more complex than functional components. It requires you to extend
from React. Component and create a render function which returns a React element. You can
pass data from one class to other class components. You can create a class by defining a class
that extends Component and has a render function. Valid class component is shown in the
below example.
class MyComponent extends [Link] {
render() {
return (
<div>This is main component.</div>
);
}
}
The class component is also known as a stateful component because they can hold or manage
local state. It can be explained in the below example.
Example
In this example, we are creating the list of unordered elements, where we will dynamically
insert StudentName for every object from the data array. Here, we are using ES6 arrow
syntax (=>) which looks much cleaner than the old JavaScript syntax. It helps us to create our
elements with fewer lines of code. It is especially useful when we need to create a list with a
lot of items.
import React, { Component } from 'react';
class App extends [Link] {
constructor() {
super();
[Link] = {
data:
[
{
"name":"Abhishek"
},
{
"name":"Saharsh"
},
{
"name":"Ajay"
}
CAREER 55 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
]
}
}
render() {
return (
<div>
<StudentName/>
<ul>
{[Link]((item) => <List data = {item} />)}
</ul>
</div>
);
}
}
class StudentName extends [Link] {
render() {
return (
<div>
<h1>Student Name Detail</h1>
</div>
);
}
}
class List extends [Link] {
render() {
return (
<ul>
<li>{[Link]}</li>
</ul>
);
}
}
export default App;
Output:
React State
The state is an updatable structure that is used to contain data or information
about the component. The state in a component can change over time. The
change in state over time can happen as a response to user action or system
event. A component with the state is known as stateful components. It
is the heart of the react component which determines the behavior of the
component and how it will render. They are also responsible for making a
component dynamic and interactive.
A state must be kept as simple as possible. It can be set
by using the setState() method and calling setState() method triggers UI
updates. A state
CAREER ADVANCEMENT CELL 56 | P a g
e
FULL STACK DEVELOPMENT
represents the component's local state or information. It can only be
accessed or modified inside the component or by the component directly. To
set an initial state before any interaction occurs, we need to use the
getInitialState() method.
For example, if we have five components that need data or information from
the state, then we need to create one container component that will keep the
state for all of them.
Defining State
To define a state, you have to first declare a default set of values for
defining the component's initial state. To do this, add a class constructor
which assigns an initial state using [Link]. The '[Link]'
property can be rendered inside render() method.
Example
The below sample code shows how we can create a stateful component
using ES6 syntax.
import React, { Component } from 'react';
class App extends [Link] {
constructor() {
super();
[Link] = { displayBio: true };
}
render() {
const bio = [Link] ? (
<div>
<p><h3>Javatpoint is one of the best Java training institute in
Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a team of
experienced Java developers and trainers from multinational companies to
teach our campus stude nts. </h3></p>
</div>
) : null;
return (
<div>
<h1> Welcome to JavaTpoint!! </h1>
{ bio }
</div>
);
}
}
export default App;
To set the state, it is required to call the super() method in the
constructor. It is because [Link] is uninitialized before the super() method
has been called.
Output
CAREER ADVANCEMENT CELL 57 | P a g
e
FULL STACK DEVELOPMENT
Changing the State
We can change the component state by using the setState() method and
passing a new state object as the argument. Now, create a new method
toggleDisplayBio() in the above example and bind this keyword to the
toggleDisplayBio() method otherwise we can't access this inside
toggleDisplayBio() method.
[Link] = [Link](this);
Example
In this example, we are going to add a button to the render() method. Clicking on
this button triggers the toggleDisplayBio() method which displays the desired output.
import React, { Component } from 'react';
class App extends [Link] {
constructor() {
super();
[Link] = { displayBio: false };
[Link]('Component this', this);
[Link] = [Link](this);
}
toggleDisplayBio(){
[Link]({displayBio: ![Link]});
}
render() {
return (
<div>
<h1>Welcome to JavaTpoint!!</h1>
{
[Link] ? (
<div>
<p><h4>Javatpoint is one of the best Java training
institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a
team of experience d Java developers and trainers from multinational
companies to teach our campu s students. </h4></p>
<button onClick={[Link]}> Show Less
</button >
</div>
):(
<div>
<button onClick={[Link]}> Read More
</but
ton>
CAREER ADVANCEMENT CELL 58 | P a g
e
FULL STACK DEVELOPMENT
</div>
)
}
</div>
)
}
}
export default App;
Output:
When you click the Read More button, you will get the below output, and when you
click the Show Less button, you will get the output as shown in the above image.
React Props
Props stand for "Properties." They are read-only components. It is an object
which stores the value of attributes of a tag and work similar to the HTML
attributes. It gives a way to pass data from one component to other
components. It is similar to function arguments. Props are passed to the
component in the same way as arguments passed in a function.
Props are immutable so we cannot modify the props from inside the
component. Inside the components, we can add attributes called props.
These attributes are available in the component as [Link] and can be used
to render dynamic data in our render method.
When you need immutable data in the component, you have to add
props to [Link]() method in the [Link] file of your ReactJS project
and used it inside the component in which you need. It can be explained in the
below example.
Example
[Link]
CAREER
import React, { Component } from 'react';
ADVANCEMENT
class App extends [Link] {
render() {
return (
<div>
<h1> Welcome to { [Link] } </h1>
<p> <h4> Javatpoint is one of the best Java training institute in
Noida, De lhi, Gurugram, Ghaziabad and Faridabad. </h4> </p>
59 | P a g
FULL STACK DEVELOPMENT
</div>
);
}
}
export default App;
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './[Link]';
[Link](<App name = "JavaTpoint!!" />,
[Link]('ap p'));
Output
Default Props
It is not necessary to always add props in the [Link]() element.
You can also set default props directly on the component constructor. It can
be explained in the below example.
Example
[Link]
import React, { Component } from 'react';
class App extends [Link] {
render() {
return (
<div>
<h1>Default Props Example</h1>
<h3>Welcome to {[Link]}</h3>
<p>Javatpoint is one of the best Java training institute in Noida,
Delhi, Gu rugram, Ghaziabad and Faridabad. </p>
</div>
);
}
}
CAREER
ADVANCEMENT
[Link] = {
name: "JavaTpoint"
}
export default App;
[Link]
import React from 'react';
60 | P a g
FULL STACK DEVELOPMENT
import ReactDOM from 'react-dom';
import App from './[Link]';
[Link](<App/>, [Link]('app'));
Output
State and Props
It is possible to combine both state and props in your app. You can set the
state in the parent component and pass it in the child component using
props. It can be shown in the below example.
Example
[Link]
import React, { Component } from 'react';
class App extends [Link] {
constructor(props) {
super(props);
[Link] = {
name: "JavaTpoint",
}
}
render() {
return (
<div>
<JTPjtpProp = {[Link]}/>
</div>
);
}
}
class JTP extends [Link] {
render() {
return (
<div>
CAREER
ADVANCEMENT
<h1>State & Props Example</h1>
<h3>Welcome to {[Link]}</h3>
<p>Javatpoint is one of the best Java training institute in Noida,
Delhi, G urugram, Ghaziabad and Faridabad. </p>
</div>
);
}
61 | P a g
FULL STACK DEVELOPMENT
}
export default App;
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './[Link]';
[Link](<App/>, [Link]('app'));
Output:
React Forms
Forms are an integral part of any modern web application. It allows the
users to interact with the application as well as gather information from the
users. Forms can perform many tasks that depend on the nature of your
business requirements and logic such as authentication of the user, adding
user, searching, filtering, booking, ordering, etc. A form can contain text fields,
buttons, checkbox, radio button, etc.
Creating Form
React offers a stateful, reactive approach to build a form. The component
rather than the DOM usually handles the React form. In React, the form is
usually implemented by using controlled components.
There are mainly two types of form input in React.
1. Uncontrolled component
2. Controlled component
Uncontrolled component
The uncontrolled input is similar to the traditional HTML form inputs. The DOM
itself handles the form data. Here, the HTML elements maintain their own state
that will be updated when the input value changes. To write an uncontrolled
component, you need to use a ref to get form values from the DOM. In other
words, there is no need to write an event handler for every state update. You
can use a ref to access the input field value of the form from the DOM.
Example
In this example, the code accepts a field username and company name
in an uncontrolled component.
import React, { Component } from 'react';
class App extends [Link] {
constructor(props) {
super(props);
CAREER ADVANCEMENT CELL 62 | P a g
e
FULL STACK DEVELOPMENT
[Link] = [Link](this);
[Link] = [Link]();
}
updateSubmit(event) {
alert('You have entered the UserName and CompanyName
successfully.'); [Link]();
}
render() {
return (
<form onSubmit={[Link]}>
<h1>Uncontrolled Form Example</h1>
<label>Name:
<input type="text" ref={[Link]} />
</label>
<label>
CompanyName:
<input type="text" ref={[Link]} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;
Output
When you execute the above code, you will see the following screen.
After filling the data in the field, you get the message that can be seen in the below
screen.
Controlled Component
In HTML, form elements typically maintain their own state and update it
according to the user input. In the controlled component, the input form
element is handled by the component rather than the DOM. Here, the
mutable state is kept in the state property and will be updated only with
setState() method.
Controlled components have functions that govern the data passing into
them on every onChange event, rather than grabbing the data only once, e.g.,
when you click
CAREER ADVANCEMENT CELL 63 | P a g
e
FULL STACK DEVELOPMENT
a submit button. This data is then saved to state and updated with
setState() method. This makes component have better control over the form
elements and data.
A controlled component takes its current value through props and
notifies the changes through callbacks like an onChange event. A parent
component "controls" this changes by handling the callback and managing its
own state and then passing the new values as props to the controlled
component. It is also called as a "dumb component."
Example
import React, { Component } from 'react';
class App extends [Link] {
constructor(props) {
super(props);
[Link] = {value: ''};
[Link] = [Link](this);
[Link] = [Link](this);
}
handleChange(event) {
[Link]({value: [Link]});
}
handleSubmit(event) {
alert('You have submitted the input successfully: ' +
[Link]); [Link]();
}
render() {
return (
<form onSubmit={[Link]}>
<h1>Controlled Form Example</h1>
<label>
Name:
<input type="text" value={[Link]}
onChange={[Link]
nge} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default App;
Output
When you execute the above code, you will see the following screen.
CAREER ADVANCEMENT CELL 64 | P a g
e
FULL STACK DEVELOPMENT
After filling the data in the field, you get the message that can be seen in the
below screen.
Handling Multiple Inputs in Controlled Component
If you want to handle multiple controlled input elements, add a name
attribute to each element, and then the handler function decided what to do
based on the value of [Link].
Example
import React, { Component } from 'react';
class App extends [Link] {
constructor(props) {
super(props);
[Link] = {
personGoing: true,
numberOfPersons: 5
};
[Link] =
[Link](this); }
handleInputChange(event) {
const target = [Link];
const value = [Link] === 'checkbox' ? [Link] :
[Link]; const name = [Link];
[Link]({
[name]: value
});
}
render() {
return (
<form>
CAREER
ADVANCEMENT
<h1>Multiple Input Controlled Form Example</h1>
<label>
Is Person going:
<input
name="personGoing"
type="checkbox"
65 | P a g
FULL STACK DEVELOPMENT
checked={[Link]}
onChange={[Link]} />
</label>
<br />
<label>
Number of persons:
<input
name="numberOfPersons"
type="number"
value={[Link]}
onChange={[Link]} />
</label>
</form>
);
}
}
export default App;
Output
The Example
Before we go further, take a look at the following example:
What you have here is a simple React app that uses React Router to provide
all of the navigation and view-loading goodness! Click on the various links to
load the relevant content, and feel free to open up this page in its own browser
windowto use the back and forward buttons to see them working.
In the following sections, we are going to be building this app in
pieces. By the end, not only will you have re-created this app, you'll
hopefully have learned enough about React Router to build cooler
and more awesomer things.
Getting Started
The first thing we need to do is get our project setup. We'll use our
trusty create-react-app command to do this. From your favorite
terminal, navigate to the folder you want to create your app, and
type the following:
CAREER ADVANCEMENT CELL 66 | P a g
e
FULL STACK DEVELOPMENT
create-react-app react_spa
This will create our new project inside a folder called react_spa. Go
ahead and navigate into this folder:
cd react_spa
Normally, this is where we start messing around with deleting the
existing content to start from a blank slate. We will do that, but first,
we are going to install React Router. To do that, run the following
command:
npm i react-router-dom --save
This copies the appropriate React Router files and registers it in
our [Link] so that our app is made aware of its existence.
That's good stuff, right?
Now that you've done this, it is time to clean up our project to start
from a clean slate. From inside your react_spa folder, delete
everything found inside your public and src folders. Once you've
done this, let's create our [Link] file that will serve as our app's
starting point. In your public folder, create a file
called [Link] and add the following contents into it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Router Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Take a quick glance at the HTML. There shouldn't be anything
surprising here. Next, we'll create our JavaScript entry point. Inside
the src folder, create a file called [Link] and add the following
contents into it:
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
[Link](
<Main/>,
[Link]("root")
CAREER ADVANCEMENT CELL 67 | P a g
e
FULL STACK DEVELOPMENT
);
Our [Link] call lives here, and what we are rendering is
our Main component...which doesn't exist yet. The Main component
will be the starting point for our SPA expedition using React Router,
and we'll see how starting with the next section.
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 [Link] 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>
);
}
CAREER ADVANCEMENT CELL 68 | P a g
e
FULL STACK DEVELOPMENT
export default Main;
Once you have pasted this, take a look at what we have here. We
have a component called Main that returns some HTML. That's it.
To see what we have so far in action, npm start it up and see what
is going on in your browser.
You should see an unstyled version of an app title and
some list items appear:
I know that this doesn't look all fancy and styled, but that's OK for
now. We will deal with that later. The important thing to call out is
that there is nothing React Router specific here. ABSOLUTELY
NOTHING!
Creating our Content Pages
Our app will have three pages of content. This content will just be a
simple component that prints out some JSX. Let's just get those
created and out of the way! First, create a file called [Link] in
our src directory and add the following content:
import React, { Component } from "react";
class Home extends Component {
render() {
return (
<div>
<h2>HELLO</h2>
<p>Cras facilisis urna ornare ex volutpat, et
CAREER ADVANCEMENT CELL 69 | P a g
e
FULL STACK DEVELOPMENT
convallis erat elementum. Ut aliquam, ipsum vitae
gravida suscipit, metus dui bibendum est, eget rhoncus nibh
metus nec massa. Maecenas hendrerit laoreet augue
nec molestie. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.</p>
<p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
</div>
);
}
}
export default Home;
Next, create a file called [Link] in the same location and add in the
following:
import React, { Component } from "react";
class Stuff extends Component {
render() {
return (
<div>
<h2>STUFF</h2>
<p>Mauris sem velit, vehicula eget sodales vitae,
rhoncus eget sapien:</p>
<ol>
<li>Nulla pulvinar diam</li>
<li>Facilisis bibendum</li>
<li>Vestibulum vulputate</li>
<li>Eget erat</li>
<li>Id porttitor</li>
</ol>
</div>
);
}
}
export default Stuff;
We just have one more page left. Create a file called [Link] in
our src folder and make sure its contents are the following:
import React, { Component } from "react";
class Contact extends Component {
render() {
return (
<div>
<h2>GOT QUESTIONS?</h2>
CAREER ADVANCEMENT CELL 70 | P a g
e
FULL STACK DEVELOPMENT
<p>The easiest thing to do is post on
our <a href="[Link]
</p>
</div>
);
}
}
export default Contact;
That's the last of our content we are going to add. If you took a look
at what it is you were adding, you'll see that these components can't
get any simpler. They just returned some boilerplate JSX content.
Now, make sure to save all of your changes to these three files.
We'll look at how to make them useful shortly.
Using React Router
We have our app frame in the form of our Main component. We have
our content pages represented by the Home , Stuff,
and Contact components. What we need to do is tie all of
these together to create our app. This is where React Router comes
in. To start using it, go back to [Link], and ensure your import
statements look as follows:
import React, { Component } from "react";
import {
Route,
NavLink,
HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";
We are importing Route, NavLink, and HashRouter from the react-
router-dom NPM package we installed earlier. In addition, we are
importing our Home , Stuff, and Contact components since we will be
referencing them as part of loading our content.
The way React Router works is by defining what I call a routing
region. Inside this region, you will have two things:
i. Your navigation links
ii. The container to load your content into
There is a close correlation between what URL your navigation links
specify and the content that ultimately gets loaded. There is no way
to easily explain this without first getting our hands dirty and
implementing what we just read about.
CAREER ADVANCEMENT CELL 71 | P a g
e
FULL STACK DEVELOPMENT
The first thing we are going to do is define our routing region.
Inside our Main component's render method, add the following
highlighted lines:
class Main extends Component {
render() {
return (
<HashRouter>
<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>
</HashRouter> );
}
}
The HashRouter component provides the foundation for the
navigation and browser history handling that routing is
made up of. What we are going to do next is define our
navigation links. We already have list elements with
the a element defined. We need to replace them with the
more specialized NavLink component, so go ahead and
make the following highlighted changes:
class Main extends Component {
render() {
return (
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
</div>
</div>
</HashRouter>
);
}
CAREER ADVANCEMENT CELL 72 | P a g
e
FULL STACK DEVELOPMENT
}
For each link, pay attention to the URL we are telling our
router to navigate to. This URL value (defined by
the to prop) acts as an identifier to ensure the right
content gets loaded. The way we match the URL with the
content is by using a Route component. Go ahead and
add the
following highlighted lines:
class Main extends Component {
render() {
return (
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
<Route path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
);
}
}
As you can see, the Route component contains a path prop.
The value you specify for the path determines when this route is
going to be active. When a route is active, the component
specified by the component prop gets rendered. For example,
when we click on
the Stuff link (whose path is /stuff as set by
the NavLink component's to prop), the route whose path value
is also /stuff becomes active. This means the contents
of our Stuff component get rendered.
You can see all of this for yourself. Jump back to your browser to
see the live updates or run npm start again. Click around on the links
to see the content loading in and out. Something seems off, though,
right? The content for our home page seems to always display even
if we are clicking on the Stuff or Contact links:
CAREER ADVANCEMENT CELL 73 | P a g
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 74 | P a g
e
FULL STACK DEVELOPMENT
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 [Link] 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;
}
[Link] li {
display: inline;
list-style-type: none;
margin: 0;
}
[Link] {
background-color: #111;
padding: 0;
}
[Link] 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;
}
CAREER ADVANCEMENT CELL 75 | P a g
e
FULL STACK DEVELOPMENT
.content li {
margin-bottom: 10px;
}
After you've done this, we need to reference this style
sheet in our app. At the top of [Link], add
the import statement to do just that:
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./[Link]"; [Link](
<Main/>,
[Link]("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>
CAREER ADVANCEMENT CELL 76 | P a g
e
FULL STACK DEVELOPMENT
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 [Link] 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:
CAREER ADVANCEMENT CELL 77 | P a g
e
FULL STACK DEVELOPMENT
CAREER ADVANCEMENT CELL 78 | P a g
e
FULL STACK DEVELOPMENT
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 −
CAREER ADVANCEMENT CELL 79 | P a g
e
FULL STACK DEVELOPMENT
. 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 [Link] file. The following is an example to show declaration
and mapping for HelloWeb DispatcherServlet example −
<web-app id = "WebApp_ID" version = "2.4"
xmlns = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link] 2 [Link]">
<display-name>Spring MVC Application</display-name>
<servlet>
<servlet-name>HelloWeb</servlet-name>
<servlet-class>
[Link]
</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 [Link] 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]-[Link] located
in the application's WebContent/WEB-INF directory. In this case, our file will
be [Link].
Next, <servlet-mapping> tag indicates what URLs will be handled by which
DispatcherServlet. Here all the HTTP requests ending with .jsp will be handled by
CAREER ADVANCEMENT CELL 80 | P a g
e
FULL STACK DEVELOPMENT
the HelloWeb DispatcherServlet.
If you do not want to go with default filename as [servlet-name]-[Link] and
default location as WebContent/WEB-INF, you can customize this file name and
location by adding the servlet listener ContextLoaderListener in your [Link] file as
follows −
<web-app...>
<!-------- DispatcherServlet definition goes here----->
....
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/[Link]</param-value>
</context-param>
<listener>
<listener-class>
[Link]
</listener-class>
</listener>
</web-app>
Now, let us check the required configuration for [Link] file, placed in
your web application's WebContent/WEB-INF directory −
<beans xmlns = "[Link]
xmlns:context = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link]
[Link]
[Link]
<context:component-scan base-package = "[Link]" />
<bean class = "[Link]">
<property name = "prefix" value = "/WEB-INF/jsp/" />
<property name = "suffix" value = ".jsp" />
</bean>
</beans>
Following are the important points about [Link] file −
. The [servlet-name]-[Link] file will be used to create the beans defined,
overriding the definitions of any beans defined with the same name in the
global scope.
. The <context:component-scan...> tag will be use to activate Spring MVC
annotation scanning capability which allows to make use of annotations like
@Controller and @RequestMapping etc.
CAREER ADVANCEMENT CELL 81 | P a g
e
FULL STACK DEVELOPMENT
. The InternalResourceViewResolver will have rules defined to resolve the view
names. As per the above defined rule, a logical view named hello is delegated
to a view implementation located at /WEB-INF/jsp/[Link] .
The following section will show you how to create your actual components, i.e.,
Controller, Model, and View.
Defining a Controller
The DispatcherServlet delegates the request to the controllers to execute the
functionality specific to it. The @Controller annotation indicates that a particular
class serves the role of a controller. The @RequestMapping annotation is used to
map a URL to either an entire class or a particular handler method.
@Controller
@RequestMapping("/hello")
public class HelloController {
@RequestMapping(method = [Link])
public String printHello(ModelMap model) {
[Link]("message", "Hello Spring MVC Framework!");
return "hello";
}
}
The @Controller annotation defines the class as a Spring MVC controller. Here, the
first usage of @RequestMapping indicates that all handling methods on this
controller are relative to the /hello path.
Next annotation @RequestMapping(method = [Link]) is used to
declare the printHello() method as the controller's default service method to handle
HTTP GET request. You can define another method to handle any POST request at
the same URL.
You can write the above controller in another form where you can add additional
attributes in @RequestMapping as follows −
@Controller
public class HelloController {
@RequestMapping(value = "/hello", method = [Link])
public String printHello(ModelMap model) {
[Link]("message", "Hello Spring MVC Framework!");
return "hello";
}
}
The value attribute indicates the URL to which the handler method is mapped and
the method attribute defines the service method to handle HTTP GET request. The
following important points are to be noted about the controller defined above −
. You will define required business logic inside a service method. You can call
another method inside this method as per requirement.
. Based on the business logic defined, you will create a model within this
method. You can use setter different model attributes and these attributes will
CAREER 82 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
be accessed by the view to present the final result. This example creates a
model with its attribute "message".
. A defined service method can return a String, which contains the name of
the view to be used to render the model. This example returns "hello" as
logical view name.
Creating JSP Views
Spring MVC supports many types of views for different presentation technologies.
These include - JSPs, HTML, PDF, Excel worksheets, XML, Velocity templates,
XSLT, JSON, Atom and RSS feeds, JasperReports, etc. But most commonly we use
JSP templates written with JSTL.
Let us write a simple hello view in /WEB-INF/hello/[Link] −
<html>
<head>
<title>Hello Spring MVC</title>
</head>
<body>
<h2>${message}</h2>
</body>
</html>
Here ${message} is the attribute which we have set up inside the Controller. You
can have multiple attributes to be displayed inside your view.
Spring Web MVC Framework Examples
Based on the above concepts, let us check few important examples which will help
you in building your Spring Web Applications −
[Link]. Example & Description
1 Spring MVC Hello World Example
This example will explain how to write a simple Spring Web Hello World
application.
2 Spring MVC Form Handling Example
This example will explain how to write a Spring Web application using
HTML forms to submit the data to the controller and display a processed
result.
3 Spring Page Redirection Example
Learn how to use page redirection functionality in Spring MVC
Framework.
CAREER 83 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
4 Spring Static Pages Example
Learn how to access static pages along with dynamic pages in Spring
MVC Framework.
5 Spring Exception Handling Example
Learn how to handle exceptions in Spring MVC Framework.
[Link]
RESTful API using Spring Framework
Web-based application development is a common part ofJavadevelopment. It is part
and parcel of the enterprise domain wherein they share many common attributes of
building a production-ready application. Spring uniquely addresses the concern for
building a Web application through its MVC framework. It is called MVC because it
is based upon the MVC (Model-View-Controller) pattern. Refer toWikipedia: Model-
view-controllerfor quick information about this. Web applications, in most cases,
have a REST counterpart for resource sharing. This article builds up on both the idea
and ends with aquick example to describe them in a terse manner.
Spring MVC
A Web application is inherently multi-layered because the intricacies between the user
request and server response go through several in-between stages of information
processing. Each stage is handled by a layer. For example, the Web interaction begins
with user interaction with the browser, such as by triggering a request and getting a
response from the server. The request response paradigm is nothing more than an
exchange of certain arranged data, which can be anywhere from trivial to heavily
loaded information gathered from, for example, a form submitted by the user. The
URL encapsulates the request from the user and flutters into the network oblivion.
Voilà! It is returned back with the digital PIZZA you have requested onto the platter
called a browser. The request actually goes through a bunch of agents under the
purview of the Spring MVC framework. Each of these agents performs specific
functions,technically called request processing, before actually responding back to
the requester. Here is an illustration to give you an idea.
CAREER ADVANCEMENT CELL 84 | P a g
e
FULL STACK DEVELOPMENT
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 [Link] 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 [Link],
Angular, JSP, and soon. The controller is decoupled from the view bypassing 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.
CAREER 85 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
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 thesiswhere REST is apart 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 [Link] mean a list of employees to search
and [Link] mean the detail of an employee with,
say, ID 101. Hence, the URL/URI actually represents the actual location of aresource
on the Web. The resource maybe anything a Webpage, animage, 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
[Link] POST Creates a list of employees
[Link] PUT or Updates a list of employees
PATCH
[Link] DELETE Deletes a list of employees
[Link] GET Gets a list of employees
CAREER 86 | P a g
ADVANCEMENT
FULL STACK DEVELOPMENT
[Link] POST Creates a employee with ID 101
[Link] PUT or Updates employee with ID 101
PATCH
[Link] DELETE Deletes employee with ID 101
[Link] 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 aresource on the server. For instance, the PUT instruction can
be used to create anew resource and POST can be used to update aresource.
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.
. Consuming REST resources using RestTemplate.
CAREER ADVANCEMENT CELL 87 | P a g
e
FULL STACK DEVELOPMENT
A Quick Example: Creating a Simple REST Endpoint
When working with REST services with Spring, we either publish application data as
a REST service or access data in the application from third-party REST services. Here
in this sample application, we combine Spring MVC to work with a REST endpoint in
a controller named EmployeeController.
Firstly, we create a model class named Employee. This maybe designated with JPA
annotation to persist in the backend database. But, to keep it simple, we’ll not use
JPA; instead, we’ll supply dummy data through the EmployeeService class. In a real
situation, data is fetched from the backend database server and the data access
methods are defined in a repository class. To give a hint, in our case, if we had used
JPA with a back-end database, it may have been an interface that
extends CrudRepository, something like this.
public interface EmployeeRepository extends
CrudRepository< Employee, String> {
// ...
[Link]
package
com. mano. spring_ mvc_ rest_ example. spring_ mvc_ rest. employee
;
public class Employee {
private String id;
private String name;
private String address;
public Employee( ) {
CAREER ADVANCEMENT CELL 88 | P a g
e
FULL STACK DEVELOPMENT
public Employee(String id, String name, String
address) {
[Link] = id;
[Link] = name;
this. address = address;
public String getId() {
return id;
public void setId( String id) {
[Link] = id;
public String getName( ) {
return name;
public void setName(String name) {
[Link] = name;
public String getAddress( ) {
return address;
public void setAddress(String address) {
CAREER ADVANCEMENT CELL 89 | P a g
e
FULL STACK DEVELOPMENT
this. address = address;
[Link]
package com. mano. spring_ mvc_ rest_ example. spring_
mvc_ rest. employee;
import [Link];
import java. util. Arrays;
import java. util. List;
@Service
public class EmployeeService {
List< Employee> employeeList= Arrays. asList(
new Employee( " spiderman" , " Peter Parker" ,
"New York"),
new Employee( " batman" , " Bruce Wayne" ,
"Gotham City"),
new Employee( " superman" , " Clark Kent" ,
"Metropolis"),
new Employee( " blackpanther" , " T ' Challa" ,
"Wakanda"),
new Employee( " ironman" , " Tony Stark" ,
CAREER ADVANCEMENT CELL 90 | P a g
e
FULL STACK DEVELOPMENT
"New York")
);
public List< Employee> getEmployees( ) {
return employeeList;
public Employee getEmployee(String id){
return [Link]().filter(e->[Link]()
.equals(id)).findFirst().get();
public void addEmployee(Employee employee){
public void updateEmployee(Employee employee, String
id){
for(int i=0;i<[Link]();i++){
Employee e= [Link]( i ) ;
if([Link]().equals(id)) {
employeeList. set(i, employee);
break;
public void deleteEmployee(String id){
CAREER ADVANCEMENT CELL 91 | P a g
e
FULL STACK DEVELOPMENT
[Link](e->[Link]().equals(id));
[Link]
package
com. mano. spring_ mvc_ rest_ example. spring_ mvc_ rest. employee
;
import
[Link];
import org. springframework. web. bind. annotation. * ;
import java. util. List;
@RestController
public class EmployeeController {
@ Autowired
private EmployeeService employeeService;
@RequestMapping( "/employees" )
public List< Employee> getEmployees( ) {
return [Link]();
@RequestMapping("/employees/{empid}")
public Employee getEmployee( @ PathVariable( " empid" )
String id){
return [Link](id);
CAREER ADVANCEMENT CELL 92 | P a g
e
FULL STACK DEVELOPMENT
@RequestMapping(method= [Link],
value="/employees")
public void addEmployee(@RequestBody Employee
employee){
[Link](employee);
@ RequestMapping( method = RequestMethod. PUT,
value="/employees/{id}")
public void updateEmployee(@RequestBody Employee
employee,
@PathVariable String id){
[Link](employee, id);
@ RequestMapping( method = RequestMethod. DELETE,
value="/employees/{id}")
public void deleteEmployee(@PathVariable String id){
employeeService> . deleteEmployee( id) ;
}
Observe that the Web controller class named EmployeeController is designated as
a @RestController annotation. This is a convenience annotation that actually
combines the @ Controller and @ ResponseBody annotations.
The @Controller annotation designates a POJO as a Web controller and is a
specialization of @Component. When we designate a POJO class with @Controller or
@Component, or even a @RestController, Spring auto detects them by considering
CAREER ADVANCEMENT CELL 93 | P a g
e
FULL STACK DEVELOPMENT
themas a candidate while class path scanning. The @ResponseBody annotation
indicates that the method response value should be bound to the Web response body.
The valid URL requests for publishing REST resources for the above code are as
follows:
. Get all employees:[Link]
. Get one employee: [Link]
Conclusion
For REST CRUD operations such as adding, updating, and deleting Employee, we
need a HTTP client application that enables us to test Web services, such as postman;
otherwise, we need to implement the view layer of the application with the help of
JavaScript frameworks such as jQuery,AngularJS, and the like. To keep the write-up
well within limits, we have not implemented them here. If possible, we’ll take them
up in a separate write-up. By the way, we have only scratched the surface of Spring
MVC and Spring REST support. Take this as a warm-up before the deep plunge you
may want to take into the stream of Spring. As you swim across, you’ll find many
interesting sight scenes. 。
[Link]
Building an application using Maven
Lifecycle Management
One of the primary objectives of Maven is to manage the
lifecycle of a Java project. While building a Java application may
appear to be a simple, one-step process, there are actually
multiple steps that take place. Maven divides this process into
three lifecycles:
1. clean: Prepares the project for building by removing unneeded
files and dependencies
2. default: Builds the project
3. site: Creates project documentation
CAREER ADVANCEMENT CELL 94 | P a g
e
FULL STACK DEVELOPMENT
Phases
Maven further subdivides these lifecycles into phases, which
represent a stage in the build process. For example, the default
lifecycle includes
the following phases (as well as others):
1. validate
2. compile
3. test
4. package
5. deploy
In the same way as a deployment pipeline (pp. 103
ofContinuous Delivery) granularizes the stages of
deployment into discrete steps,
Maven also divides its build process into distinct phases. These
phases create a chain, where the execution of a later phase
executes dependent phases.
For example,if we wish to package an application through a Maven
build, our application must first be validated, compiled, and then
tested before Maven can generate the resulting package. Thus,
when executing the package phase of a build, Maven with first
execute
the validate, compile, and test phases of the build before finally
executing the package phase. Maven phases, therefore, act as a
sequence of ordered steps.
We can execute phases by supplying them as command-line
arguments to the mvn command:
1
mvn package
CAREER ADVANCEMENT CELL 95 | P a g
e
FULL STACK DEVELOPMENT
Goals & Plugins
Maven breaks phases down one more time into goals, which represent
discrete tasks that are executed as part of each phase. For
example, when we execute the compile phase in a Maven build, we
are actually
compiling both the main sources that makeup our project as well
as the test sources that will be used when executing our
automated testcases.
Thus, the compile phase is composed of two goals:
1. compiler:compile
2. compiler:testCompile
The compiler portion of the goal is the plugin name. A Maven
plugin is an artifact that supplies Maven goals. The addition of
these plugins
allows Maven to be extended beyond its basic functionality.
For example, suppose that we wish to add a goal that verifies that our
code meets the formatting standard of our company. To do this,
we could create a new plugin that has a goal that checks the
source code and
compares it to our company standard, succeeding ifour code
meets the standard and failing otherwise.
We can then tie this goal into the validate phase so that when
Maven runs the validate phase (such as when the compile phase is
run), our custom goal is executed. Creating such a plugin is
outside the scope of this article, but detailed information can
be found in the official
Maven Plugin Developmentdocumentation.
Note that a goal maybe associated with zero or more phases. If
no phase is associated with the goal, the goal will not be included
in a build by
default but can be explicitly executed. For example, if we create a
CAREER ADVANCEMENT CELL 96 | P a g
e
FULL STACK DEVELOPMENT
goal foo:bar that is not associated with any phase, Maven will not
execute this goal for us (since no dependency is created to a
phase that Maven is executing), but we can explicitly instruct
Maven to execute this goal on the command line:
1
mvn foo:bar
Likewise,a phase can have zero or more goals associated with
it. If a phase does not have any goals associated with it,
though, it will not be executed by Maven.
For a completelist of all phases and goals included in Maven by
default, see the official Maven Introduction to the Build
Lifecycledocumentation.
[Link]
CAREER ADVANCEMENT CELL 97 | P a g
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 98 | P a g
e
FULL STACK DEVELOPMENT
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 , R 2 … .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.
Case 1: If we want to retrieve attributes ROLL_NO and NAME of all
CAREER ADVANCEMENT CELL 99 | P a g
e
FULL STACK DEVELOPMENT
students, the query will be:
SELECT ROLL_NO, NAME FROM STUDENT;
ROLL_NO NAME
1 RAM
2 RAMESH
3 SUJIT
4 SURESH
Case 2: If we want to retrieve ROLL_NO and NAME of the students
whose ROLL_NO is greater than 2, the query will be:
SELECT ROLL_NO, NAME FROM STUDENT
WHERE ROLL_NO>2;
ROLL_NO NAME
3 SUJIT
4 SURESH
CASE 3: If we want to retrieve all attributes of students, we can write * in
place of writing all attributes as:
SELECT * FROM STUDENT
WHERE ROLL_NO>2;
ROLL_NO NAME ADDRESS PHONE AGE
3 SUJIT ROHTAK 9E+09 20
4 SURESH DELHI 9E+09 18
CASE 4: If we want to represent the relation in ascending order by AGE, we
can use ORDER BY clause as:
SELECT * FROM STUDENT ORDER BY AGE;
ROLL_NO NAME ADDRESS PHONE AGE
1 RAM DELHI 9455123451 18
2 RAMESH GURGAON 9652431543 18
CAREER ADVANCEMENT CELL 100 |
Pag
FULL STACK DEVELOPMENT
4 SURESH DELHI 9156768971 18
3 SUJIT ROHTAK 9156253131 20
Note: ORDER BY AGE is equivalent to ORDER BY AGE ASC. If we want to
retrieve the results in descending order of AGE, we can use ORDER
BY AGE DESC.
CASE 5: If we want to retrieve distinct values of an attribute or group of
attribute, DISTINCT is used as in:
SELECT DISTINCT ADDRESS FROM STUDENT;
ADDRESS
DELHI
GURGAON
ROHTAK
If DISTINCT is not used, DELHI will be repeated twice in result set. Before
understanding GROUP BY and HAVING, we need to understand
aggregations functions in SQL.
AGGRATION FUNCTIONS: Aggregation functions are used to perform
mathematical operations on data values of a relation. Some of the common
aggregation functions used in SQL are:
1. COUNT: Count function is used to count the number of rows in a relation.
e.g; SELECT COUNT (PHONE) FROM STUDENT;
COUNT(PHONE)
4
2. SUM: SUM function is used to add the values of an attribute in a relation.
e.g; SELECT SUM (AGE) FROM STUDENT;
SUM(AGE)
74
In the same way, MIN, MAX and AVG can be used. As we have seen
above, all aggregation functions return only 1 row.
AVERAGE: It gives the average values of the tupples. It is also defined as
sum divided by count values.
Syntax:AVG(attributename)
CAREER ADVANCEMENT CELL 101 |
Pag
e
FULL STACK DEVELOPMENT
OR
Syntax: SUM(attributename)/COUNT(attributename)
The above mentioned syntax also retrieves the average value of tupples.
MAXIMUM: It extracts the maximum value among the set oftupples.
Syntax:MAX(attributename)
MINIMUM: It extracts the minimum value amongst the set of all the tupples.
Syntax:MIN(attributename)
GROUP BY: Group by is used to group the tuples of a relation based on an
attribute or group of attribute. It is always combined with aggregation function
which is computed on group. e.g.;
SELECT ADDRESS, SUM(AGE) FROM STUDENT
GROUP BY (ADDRESS);
In this query, SUM(AGE) will be computed but not for entire table but for
each address. i.e.; sum of AGE for address DELHI(18+18=36) and similarly
for other address as well. The output is:
ADDRESS SUM(AGE)
DELHI 36
GURGAON 18
ROHTAK 20
If we try to execute the query given below, it will result in error because
although we have computed SUM(AGE) for each address, there are more
than 1 ROLL_NO for each address we have grouped. So it can’t be
displayed in result set. We need to use aggregate functions on columns after
SELECT statement to make sense of the resulting set whenever we are
using GROUP BY.
SELECT ROLL_NO, ADDRESS, SUM(AGE) FROM STUDENT
GROUP BY (ADDRESS);
What is Data Normalization and Why Is It
Important?
Normalization is the process of reducing data redundancy in a table and
improving data integrity. Then why do you need it? If there is no
normalization in SQL, there will be many problems, such as:
CAREER ADVANCEMENT CELL
102 |
Page
FULL STACK DEVELOPMENT
. Insert Anomaly: This happens when we cannot insert data into the table
without another.
. Update Anomaly: This is due to data inconsistency caused by data
redundancy and data update.
. Delete exception: Occurs when some attributes are lost due to the
deletion of other attributes.
So normalizationis a way of organizing data in a database. Normalization
involves organizing the columns and tables in the database to ensure that
their dependencies are correctly implemented using database constraints.
Normalization is the process of organizing data in a proper manner. It is used
to minimize the duplication of various relationships in the database. It is also
used to troubleshoot exceptions such as inserts, deletes, and updates in the
table. It helps to split a large table into several small normalized tables.
Relational links and links are used to reduce redundancy. Normalization,
also known as database normalization or data normalization, is an important
part of relational database design because it helps to improve the speed,
accuracy, and efficiency of the database.
Now the is a question arises: What is the relationship between SQL and
normalization? Well, SQL is the language used to interact with the database.
Normalization in SQL improves data distribution. In order to initiate
interaction, the data in the database must be normalized. Otherwise, we
cannot continue because it will cause an exception. Normalization can also
make it easier to design the database to have the best structure for atomic
elements (that is, elements that cannot be broken down into smaller parts).
Usually, we break large tables into small tables to improve efficiency. Edgar
F . Codd defined the first paradigm in 1 9 7 0 , and finally other paradigms.
When normalizing a database, organize data into tables and columns. Make
sure that each table contains only relevant data. If the data is not directly
related, create a new table for that data. Normalization is necessary to
ensure that the table only contains data directly related to the primary key,
each data field contains only one data element, and to remove redundant
(duplicated and unnecessary) data.
DDL
DDL is Data Definition Language and is used to define the structures like schema, database,
tables, constraints etc. Examples of DDL are create and alter statements.
DML
DML is Data Manipulation Language and is used to manipulate data. Examples of DML are
insert, update and delete statements.
Following are the important differences between DDL and DML.
CAREER ADVANCEMENT CELL 103 |
Pag
e
FULL STACK DEVELOPMENT
Sr. Key DDL DML
No.
Stands for DDL stands for Data Definition DML stands for Data
1
Language. Manipulation Language.
Usage DDL statements are used to create DML statement is used to
2 database, schema, constraints, users, insert, update or delete the
tables etc. records.
Classification DDL has no further classification. DML is further classified into
3 procedural DML and non-
procedural DML.
Commands CREATE, DROP, RENAME and INSERT, UPDATE and
4
ALTER. DELETE.
Transaction Control language is a language that manages transactions within the database.
It is used to execute the changes made by the DML statements.
TCL Commands
Transaction Control Language (TCL) Commands are:
. Commit - It is used to save the transactions in the database.
. Rollback - It is used to restore the database to that state which was last
committed.
. Begin - It is used at the beginning of a transaction.
. Savepoint - The changes done till savpoint will be unchanged and all the
transactions after savepoint will be rolled back.
Example
Given below is an example of the usage of the TCL commands in the database management
system (DBMS) -
BEGIN TRANSACTION
UPDATE employees
SET empname=’bob’
WHERE empid=’001’
UPDATE employees
SET empname =’bob’
WHERE city=’hyderabad’
IF @@ROWCOUNT=5
CAREER ADVANCEMENT CELL 104 |
Pag
e
FULL STACK DEVELOPMENT
COMMIT TRANSACTION
ELSE
ROLLBACK TRANSACTION
In the above example after we begin the transaction, we are trying to update the employee’s
name with some value of id. If we affect five rows with our first query then, it will
COMMIT transaction else It will be ROLLBACK.
Difference between Commit, rollback and savepoint of TCL commands
Sno. Rollback Commit Savepoint
1. Rollback means the database DML commands saves Savepoint helps to
is restored to the last modification and it save the transaction
committed state permanently saves the temporarily.
transaction.
2. Syntax- ROLLBACK [To Syntax- COMMIT; Syntax- SAVEPOINT
SAVEPOINT_NAME]; [savepoint_name;]
3. Example- ROLLBACK Example- SQL> COMMIT; Example-
Update5; SAVEPOINT
table_create;
SPRING JDBC EXAMPLE
To understand the concepts related to Spring JDBC framework with JdbcTemplate class, let us
write a simple example which will implement all the CRUD operations on the following Student
table.
CREATE TABLE Student(
ID INT NOT NULL AUTO_INCREMENT,
NAME VARCHAR(20) NOT NULL,
AGE INT NOT NULL,
PRIMARY KEY (ID)
);
Steps to Create a JDBC Spring Application:
Step Description
1 Create a project with a name SpringExample and create a package [Link]
under the src folder in the created project.
2 Add required Spring libraries using Add External JARs.
3 Add Spring JDBC specific latest libraries [Link],
[Link] and [Link] in the
project. You can download required libraries if you do not have them already.
4 Create DAO interface StudentDAO and list down all the required methods.
5 Create other required Java classes Student, StudentMapper, StudentJDBCTemplate
and MainApp under the [Link] package.
CAREER ADVANCEMENT CELL 105 |
Pag
e
FULL STACK DEVELOPMENT
6 Make sure you already created Student table in TEST database. Also make sure
your MySQL server is working fine and you have read/write access on the database
using the give username and password.
7 Create Beans configuration file [Link] under the src folder.
8 The final step is to create the content of all the Java files and Bean Configuration file
and run the application as explained below.
1. Spring JDBC - insert Query
The following example will demonstrate how to create a query using Insert query with the
help of Spring JDBC. We'll insert a few records in Student Table.
Syntax
String insertQuery = "insert into Student (name, age) values (?, ?)";
[Link]( insertQuery, name, age);
Where,
. insertQuery − Insert query having placeholders.
. jdbcTemplateObject − StudentJDBCTemplate object to insert student object
in database.
To understand the above-mentioned concepts related to Spring JDBC, let us write an example
which will insert a query. To write our example use the following steps to create a Spring
application.
Following is the content of the Data Access Object interface file [Link].
package [Link];
import [Link];
import [Link];
public interface StudentDAO {
/**
* This is the method to be used to initialize
* database resources ie. connection.
*/
public void setDataSource(DataSourceds);
/**
* This is the method to be used to create
* a record in the Student table.
*/
public void create(String name, Integer age);
/**
* This is the method to be used to list down
* all the records from the Student table.
*/
CAREER ADVANCEMENT CELL 106 |
Pag
e
FULL STACK DEVELOPMENT
public List<Student> listStudents();
}
Following is the content of the [Link] file.
package [Link];
public class Student {
private Integer age;
private String name;
private Integer id;
public void setAge(Integer age) {
[Link] = age;
}
public Integer getAge() {
return age;
}
public void setName(String name) {
[Link] = name;
}
public String getName() {
return name;
}
public void setId(Integer id) {
[Link] = id;
}
public Integer getId() {
return id;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentMapper implements RowMapper<Student> {
public Student mapRow(ResultSet rs, int rowNum) throws SQLException {
Student student = new Student();
[Link]([Link]("id"));
[Link]([Link]("name"));
[Link]([Link]("age"));
return student;
}
}
Following is the implementation class file [Link] for the defined
DAO interface StudentDAO.
CAREER ADVANCEMENT CELL 107 |
Pag
e
FULL STACK DEVELOPMENT
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentJDBCTemplate implements StudentDAO {
private DataSource dataSource;
private JdbcTemplate jdbcTemplateObject;
public void setDataSource(DataSource dataSource) {
[Link] = dataSource;
[Link] = new JdbcTemplate(dataSource);
}
public void create(String name, Integer age) {
String insertQuery = "insert into Student (name, age) values (?, ?)";
[Link]( insertQuery, name, age);
[Link]("Created Record Name = " + name + " Age = " + age);
return;
}
public List<Student> listStudents() {
String SQL = "select * from Student";
List <Student> students = [Link](SQL, new StudentMapper());
return students;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainApp {
public static void main(String[] args) {
ApplicationContext context = new ClassPathXmlApplicationContext("[Link]");
StudentJDBCTemplate studentJDBCTemplate =
(StudentJDBCTemplate)[Link]("studentJDBCTemplate");
[Link]("------Records Creation--------" );
[Link]("Zara", 11);
[Link]("Nuha", 2);
[Link]("Ayan", 15);
[Link]("------Listing Multiple Records--------" );
List<Student> students = [Link]();
CAREER ADVANCEMENT CELL 108 |
Pag
e
FULL STACK DEVELOPMENT
for (Student record : students) {
[Link]("ID : " + [Link]() );
[Link](", Name : " + [Link]() );
[Link](", Age : " + [Link]());
}
}
}
Following is the configuration file [Link].
<?xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link] ">
<!-- Initialization for data source -->
<bean id = "dataSource"
class = "[Link]">
<property name = "driverClassName" value = "[Link]"/>
<property name = "url" value = "jdbc:mysql://localhost:3306/TEST"/>
<property name = "username" value = "root"/>
<property name = "password" value = "admin"/>
</bean>
<!-- Definition for studentJDBCTemplate bean -->
<bean id = "studentJDBCTemplate"
class = "[Link]">
<property name = "dataSource" ref = "dataSource" />
</bean>
</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.
Records Creation
--------
Created Record Name = Zara Age = 11
Created Record Name = Nuha Age = 2
Created Record Name = Ayan Age = 15
------Listing Multiple Records--------
ID : 1, Name : Zara, Age : 11
ID : 2, Name : Nuha, Age : 2
ID : 3, Name : Ayan, Age : 15
2. Spring JDBC - Select Query
Following example will demonstrate how to read a query using Spring JDBC. We'll read
available records in Student Table.
CAREER 109 |
ADVANCEMENT Pag
FULL STACK DEVELOPMENT
Syntax
String selectQuery = "select * from Student";
List <Student> students = [Link](selectQuery, new StudentMapper());
Where,
. selectQuery − Select query to read students.
. jdbcTemplateObject − StudentJDBCTemplate object to read student object
from database.
. StudentMapper − StudentMapper is a RowMapper object to map each
fetched record to student object.
To understand above mentioned concepts related to Spring JDBC, let us write an example
which will select a query. To write our example, use the following steps to create a Spring
application.
Following is the content of the Data Access Object interface file [Link].
package [Link];
import [Link];
import [Link];
public interface StudentDAO {
/**
* This is the method to be used to initialize
* database resources ie. connection.
*/
public void setDataSource(DataSourceds);
/**
* This is the method to be used to list down
* all the records from the Student table.
*/
public List<Student> listStudents();
}
Following is the content of the [Link] file.
package [Link];
public class Student {
private Integer age;
private String name;
private Integer id;
public void setAge(Integer age) {
[Link] = age;
}
public Integer getAge() {
return age;
}
CAREER ADVANCEMENT CELL 110 |
Pag
e
FULL STACK DEVELOPMENT
public void setName(String name) {
[Link] = name;
}
public String getName() {
return name;
}
public void setId(Integer id) {
[Link] = id;
}
public Integer getId() {
return id;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentMapper implements RowMapper<Student> {
public Student mapRow(ResultSet rs, int rowNum) throws SQLException {
Student student = new Student();
[Link]([Link]("id"));
[Link]([Link]("name"));
[Link]([Link]("age"));
return student;
}
}
Following is the implementation class file [Link] for the defined
DAO interface StudentDAO.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentJDBCTemplate implements StudentDAO {
private DataSource dataSource;
private JdbcTemplate jdbcTemplateObject;
public void setDataSource(DataSource dataSource) {
[Link] = dataSource;
[Link] = new JdbcTemplate(dataSource);
}
public List<Student> listStudents() {
String SQL = "select * from Student";
List <Student> students = [Link](SQL, new StudentMapper());
return students;
CAREER ADVANCEMENT CELL 111 |
Pag
e
FULL STACK DEVELOPMENT
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainApp {
public static void main(String[] args) {
ApplicationContext context = new ClassPathXmlApplicationContext("[Link]");
StudentJDBCTemplate studentJDBCTemplate =
(StudentJDBCTemplate)[Link]("studentJDBCTemplate");
[Link]("------Listing Multiple Records--------" );
List<Student> students = [Link]();
for (Student record : students) {
[Link]("ID : " + [Link]() );
[Link](", Name : " + [Link]() );
[Link](", Age : " + [Link]());
}
}
}
Following is the configuration file [Link].
<?xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link] ">
<!-- Initialization for data source -->
<bean id = "dataSource"
class = "[Link]">
<property name = "driverClassName" value = "[Link]"/>
<property name = "url" value = "jdbc:mysql://localhost:3306/TEST"/>
<property name = "username" value = "root"/>
<property name = "password" value = "admin"/>
</bean>
<!-- Definition for studentJDBCTemplate bean -->
<bean id="studentJDBCTemplate"
class = "[Link]">
<property name = "dataSource" ref = "dataSource" />
</bean>
</beans>
CAREER ADVANCEMENT CELL 112 |
Pag
e
FULL STACK DEVELOPMENT
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.
------Listing Multiple Records--------
ID : 1, Name : Zara, Age : 11
ID : 2, Name : Nuha, Age : 2
ID : 3, Name : Ayan, Age : 15
3. Spring JDBC - Update Query
Following example will demonstrate how to update a query using Spring JDBC. We'll update
the available records in Student Table.
Syntax
String updateQuery = "update Student set age = ? where id = ?";
[Link](updateQuery, age, id);
Where,
. updateQuery − Update query to update student with place holders.
. jdbcTemplateObject − StudentJDBCTemplate object to update student object
in the database.
To understand the above-mentioned concepts related to Spring JDBC, let us write an example
which will update a query. To write our example, let us have a working Eclipse IDE in place
and use the following steps to create a Spring application.
Following is the content of the Data Access Object interface file [Link].
package [Link];
import [Link];
import [Link];
public interface StudentDAO {
/**
* This is the method to be used to initialize
* database resources ie. connection.
*/
public void setDataSource(DataSourceds);
/**
* This is the method to be used to update
* a record into the Student table.
*/
public void update(Integer id, Integer age);
/**
* This is the method to be used to list down
* a record from the Student table corresponding
* to a passed student id.
*/
CAREER ADVANCEMENT CELL 113 |
Pag
e
FULL STACK DEVELOPMENT
public Student getStudent(Integer id);
}
Following is the content of the [Link] file.
package [Link];
public class Student {
private Integer age;
private String name;
private Integer id;
public void setAge(Integer age) {
[Link] = age;
}
public Integer getAge() {
return age;
}
public void setName(String name) {
[Link] = name;
}
public String getName() {
return name;
}
public void setId(Integer id) {
[Link] = id;
}
public Integer getId() {
return id;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentMapper implements RowMapper<Student> {
public Student mapRow(ResultSet rs, int rowNum) throws SQLException {
Student student = new Student();
[Link]([Link]("id"));
[Link]([Link]("name"));
[Link]([Link]("age"));
return student;
}
}
Following is the implementation class file [Link] for the defined
DAO interface StudentDAO.
CAREER ADVANCEMENT CELL 114 |
Pag
e
FULL STACK DEVELOPMENT
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentJDBCTemplate implements StudentDAO {
private DataSource dataSource;
private JdbcTemplate jdbcTemplateObject;
public void setDataSource(DataSource dataSource) {
[Link] = dataSource;
[Link] = new JdbcTemplate(dataSource);
}
public void update(Integer id, Integer age){
String SQL = "update Student set age = ? where id = ?";
[Link](SQL, age, id);
[Link]("Updated Record with ID = " + id );
return;
}
public Student getStudent(Integer id) {
String SQL = "select * from Student where id = ?";
Student student = [Link](
SQL, new Object[]{id}, new StudentMapper()
);
return student;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainApp {
public static void main(String[] args) {
ApplicationContext context = new ClassPathXmlApplicationContext("[Link]");
StudentJDBCTemplate studentJDBCTemplate =
(StudentJDBCTemplate)[Link]("studentJDBCTemplate");
[Link]("----Updating Record with ID = 2 -----" );
[Link](2, 20);
[Link]("----Listing Record with ID = 2 -----" );
Student student = [Link](2);
[Link]("ID : " + [Link]() );
[Link](", Name : " + [Link]() );
[Link](", Age : " + [Link]());
CAREER ADVANCEMENT CELL 115 |
Pag
e
FULL STACK DEVELOPMENT
}
}
Following is the configuration file [Link].
<?xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link] ">
<!-- Initialization for data source -->
<bean id = "dataSource"
class = "[Link]">
<property name = "driverClassName" value = "[Link]"/>
<property name = "url" value = "jdbc:mysql://localhost:3306/TEST"/>
<property name = "username" value = "root"/>
<property name = "password" value = "admin"/>
</bean>
<!-- Definition for studentJDBCTemplate bean -->
<bean id = "studentJDBCTemplate"
class = "[Link]">
<property name = "dataSource" ref = "dataSource" />
</bean>
</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
4. Spring JDBC - Delete Query
The following example will demonstrate how to delete a query using Spring JDBC. We'll
delete one of the available records in Student Table
Syntax
String deleteQuery = "delete from Student where id = ?";
[Link](deleteQuery, id);
Where,
. deleteQuery − Delete query to delete student with placeholders.
. jdbcTemplateObject − StudentJDBCTemplate object to delete student object
in the database.
To understand the above-mentioned concepts related to Spring JDBC, let us write an example
CAREER ADVANCEMENT CELL 116 |
Pag
e
FULL STACK DEVELOPMENT
which will delete a query. To write our example, use the following steps to create a Spring
application.
Following is the content of the Data Access Object interface file [Link].
package [Link];
import [Link];
import [Link];
public interface StudentDAO {
/**
* This is the method to be used to initialize
* database resources ie. connection.
*/
public void setDataSource(DataSourceds);
/**
* This is the method to be used to list down
* all the records from the Student table.
*/
public List<Student> listStudents();
/**
* This is the method to be used to delete
* a record from the Student table corresponding
* to a passed student id.
*/
public void delete(Integer id);
}
Following is the content of the [Link] file.
package [Link];
public class Student {
private Integer age;
private String name;
private Integer id;
public void setAge(Integer age) {
[Link] = age;
}
public Integer getAge() {
return age;
}
public void setName(String name) {
[Link] = name;
}
public String getName() {
return name;
}
public void setId(Integer id) {
CAREER ADVANCEMENT CELL 117 |
Pag
e
FULL STACK DEVELOPMENT
[Link] = id;
}
public Integer getId() {
return id;
}
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentMapper implements RowMapper<Student> {
public Student mapRow(ResultSet rs, int rowNum) throws SQLException {
Student student = new Student();
[Link]([Link]("id"));
[Link]([Link]("name"));
[Link]([Link]("age"));
return student;
}
}
Following is the implementation class file [Link] for the defined
DAO interface StudentDAO.
package [Link];
import [Link];
import [Link];
import [Link];
public class StudentJDBCTemplate implements StudentDAO {
private DataSource dataSource;
private JdbcTemplate jdbcTemplateObject;
public void setDataSource(DataSource dataSource) {
[Link] = dataSource;
[Link] = new JdbcTemplate(dataSource);
}
public List<Student> listStudents() {
String SQL = "select * from Student";
List <Student> students = [Link](SQL, new StudentMapper());
return students;
}
public void delete(Integer id){
String SQL = "delete from Student where id = ?";
[Link](SQL, id);
[Link]("Deleted Record with ID = " + id );
return;
}
CAREER ADVANCEMENT CELL 118 |
Pag
e
FULL STACK DEVELOPMENT
}
Following is the content of the [Link] file.
package [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainApp {
public static void main(String[] args) {
ApplicationContext context = new ClassPathXmlApplicationContext("[Link]");
StudentJDBCTemplate studentJDBCTemplate =
(StudentJDBCTemplate)[Link]("studentJDBCTemplate");
[Link]("----Delete Record with ID = 2 -----" );
[Link](2);
[Link]("------Listing Multiple Records--------" );
List<Student> students = [Link]();
for (Student record : students) {
[Link]("ID : " + [Link]() );
[Link](", Name : " + [Link]() );
[Link](", Age : " + [Link]());
}
}
}
Following is the configuration file [Link].
<?xml version = "1.0" encoding = "UTF-8"?>
<beans xmlns = "[Link]
xmlns:xsi = "[Link]
xsi:schemaLocation = "[Link]
[Link] ">
<!-- Initialization for data source -->
<bean id = "dataSource"
class = "[Link]">
<property name = "driverClassName" value = "[Link]"/>
<property name = "url" value = "jdbc:mysql://localhost:3306/TEST"/>
<property name = "username" value = "root"/>
<property name = "password" value = "admin"/>
</bean>
<!-- Definition for studentJDBCTemplate bean -->
<bean id = "studentJDBCTemplate"
class = "[Link]">
<property name = "dataSource" ref = "dataSource" />
</bean>
CAREER ADVANCEMENT CELL 119 |
Pag
e
FULL STACK DEVELOPMENT
</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.
CAREER ADVANCEMENT CELL 120 |
Pag
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 121 |
Pag
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 122 |
Pag
e
FULL STACK DEVELOPMENT
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
CAREER ADVANCEMENT CELL 123 |
Pag
e
FULL STACK DEVELOPMENT
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
Real World Applications of Cloud Computing
In simple Cloud Computing refers to the on-demand availability of IT
resources over internet. It delivers different types of services to the customer
over the internet. There are three basic types of services models are
available in cloud computing i.e., Infrastructure As A Service (IAAS),
Platform As A Service (PAAS), Software As A Service (SAAS). On the basis
of accessing and availing cloud computing services, they are divided mainly
into four types of cloud i.e Public cloud, Private Cloud, Hybrid Cloud, and
CAREER ADVANCEMENT CELL 124 |
Pag
e
FULL STACK DEVELOPMENT
Community cloud which is called Cloud deployment model. The demand for
cloud services is increasing so fast and the global cloud computing market is
growing at that rate. A large number of organizations and different business
sectors are preferring cloud services nowadays as they are getting a list of
benefits from cloud computing. Different organizations using cloud computing
for different purposes and with respect to that Cloud Service Providers are
providing various applications in different fields. Applications of Cloud
Computing in real-world : Cloud Service Providers (CSP) are providing
many types of cloud services and now if we will cloud computing has
touched every sector by providing various cloud applications. Sharing and
managing resources is easy in cloud computing that’s why it is one of the
dominant fields of computing. These properties have made it an active
component in many fields. Now let’s know some of the real-world
applications of cloud computing.
1. Online Data Storage: Cloud computing allows storing data like files,
images, audios, and videos, etc on the cloud storage. The organization
need not set physical storage systems to store a huge volume of business
data which costs so high nowadays. As they are growing technologically,
data generation is also growing with respect to time, and storing that
becoming problem. In that situation, Cloud storage is providing this
service to store and access data any time as per requirement.
2. Backup and Recovery : Cloud vendors provide security from their side
by storing safe to the data as well as providing a backup facility to the
data. They offer various recovery application for retrieving the lost data. In
the traditional way backup of data is a very complex problem and also it is
very difficult sometimes impossible to recover the lost data. But cloud
computing has made backup and recovery applications very easy where
there is no fear of running out of backup media or loss of data.
3. BigdataAnalysis : We know the volume of big data is so high where
storing that in traditional data management system for an organization is
impossible. But cloud computing has resolved that problem by allowing
the organizations to store their large volume of data in cloud storage
without worrying about physical storage. Next comes analyzing the raw
data and finding out insights or useful information from it is a big
challenge as it requires high-quality tools for data analytics. Cloud
computing provides the biggest facility to organizations in terms of storing
and analyzing big data.
4. Testingand development : Setting up the platform for development and
finally performing different types of testing to check the readiness of the
product before delivery requires different types of IT resources and
infrastructure. But Cloud computing provides the easiest approach for
development as well as testing even if deployment by using their IT
resources with minimal expenses. Organizations find it more helpful as
they got scalable and flexible cloud services for product development,
testing, and deployment.
CAREER 125 |
ADVANCEMENT Pag
FULL STACK DEVELOPMENT
5. Anti-VirusApplications : Previously, organizations were installing
antivirus software within their system even if we will see we personally
also keep antivirus software in our system for safety from outside cyber
threats. But nowadays cloud computing provides cloud antivirus software
which means the software is stored in the cloud and monitors your
system/organization’s system remotely. This antivirus software identifies
the security risks and fixes them. Sometimes also they give a feature to
download the software.
6. E-commerceApplication : Cloud-based e-commerce allows responding
quickly to the opportunities which are emerging. Users respond quickly to
the market opportunities as well as the traditional e-commerce responds
to the challenges quickly. Cloud-based e-commerce gives a new
approach to doing business with the minimum amount as well as
minimum time possible. Customer data, product data, and other
operational systems are managed in cloud environments.
7. Cloud computing in education : Cloud computing in the education
sector brings an unbelievable change in learning by providing e-learning,
online distance learning platforms, and student information portals to the
students. It is a new trend in education that provides an attractive
environment for learning, teaching, experimenting, etc to students, faculty
members, and researchers. Everyone associated with the field can
connect to the cloud of their organization and access data and information
from there.
8. E-GovernanceApplication : Cloud computing can provide its services to
multiple activities conducted by the government. It can support the
government to move from the traditional ways of management and
service providers to an advanced way of everything by expanding the
availability of the environment, making the environment more scalable
and customized. It can help the government to reduce the unnecessary
cost in managing, installing, and upgrading applications and doing all
these with help of could computing and utilizing that money public service.
9. Cloud Computing in Medical Fields : In the medical field also nowadays
cloud computing is used for storing and accessing the data as it allows to
store data and access it through the internet without worrying about any
physical setup. It facilitates easier access and distribution of information
among the various medical professional and the individual patients.
Similarly, with help of cloud computing offsite buildings and treatment
facilities like labs, doctors making emergency house calls and
ambulances information, etc can be easily accessed and updated
remotely instead of having to wait until they can access a hospital
computer.
10. Entertainment Applications : Many people get entertainment from
the internet, in that case, cloud computing is the perfect place for
reaching to a varied consumer base. Therefore different types of
entertainment industries reach near the target audience by adopting a
multi-cloud strategy. Cloud-based entertainment provides various
CAREER ADVANCEMENT CELL 126 |
Pag
e
FULL STACK DEVELOPMENT
entertainment applications such as online music/video, online games and
video conferencing, streaming services, etc and it can reach any device
be it TV, mobile, set-top box, or any other form. It is a new form of
entertainment called On-Demand Entertainment (ODE). With respect to
this as a cloud, the market is growing rapidly and it is providing various
services day by day. So other application of cloud computing includes
social applications, management application, business applications, art
application, and many more. So in the future cloud computing is going to
touch many more sectors by providing more applications and services.
1. What are the different commands used in MySQL?
2. Describe Different types of cloud computing deployment models
3. a) Write a program to insert a record using Spring JDBC
b) Write short note on DDL query with example
4. a) Write a program to delete a record using Spring JDBC
b) Explain about DML Query with example
5. a) Write a program to update a record using Spring JDBC[8M]
b) Describe DCL and TCL in detail with example
6. Write a program to read records using Spring JDBC
7. Describe Different types of cloud computing deployment models
8. Explain Real World Applications of Cloud Computing.
9. Write a program to perform any DML operation using Spring JDBC
CAREER ADVANCEMENT CELL 127 |
Pag
e
FULL STACK DEVELOPMENT
CAREER ADVANCEMENT CELL 128 |
Pag
e
You might also like
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Understanding Static Web Pages and HTMLNo ratings yetUnderstanding Static Web Pages and HTML221 pages
- HTML and CSS Basics for Web DevelopmentNo ratings yetHTML and CSS Basics for Web Development326 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure19 pages
- HTML Notes - 66588229 - 2026 - 03 - 03 - 10 - 48No ratings yetHTML Notes - 66588229 - 2026 - 03 - 03 - 10 - 4827 pages
- Introduction to Web Applications and HTMLNo ratings yetIntroduction to Web Applications and HTML27 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure22 pages
- HTML and CSS Basics for Web DevelopmentNo ratings yetHTML and CSS Basics for Web Development326 pages
- Evolution of HTML: A Historical OverviewNo ratings yetEvolution of HTML: A Historical Overview42 pages
- Information Security Awareness - Password Management - Completion - CertificateNo ratings yetInformation Security Awareness - Password Management - Completion - Certificate1 page
- Financial Accounting and Cash Flow AnalysisNo ratings yetFinancial Accounting and Cash Flow Analysis34 pages
- Overview of Plasma Proteins and FunctionsNo ratings yetOverview of Plasma Proteins and Functions21 pages
- Financial Bid Tabulation for Tender DRMENGGRNC-12-2025No ratings yetFinancial Bid Tabulation for Tender DRMENGGRNC-12-20253 pages
- Snack Heroes Advocacy for Student HealthNo ratings yetSnack Heroes Advocacy for Student Health2 pages
- IIM Udaipur: Irrationality in Business EconomicsNo ratings yetIIM Udaipur: Irrationality in Business Economics5 pages
- Multipurpose Furniture for Small Living RoomsNo ratings yetMultipurpose Furniture for Small Living Rooms7 pages
- Entrepreneurial Character Traits OverviewNo ratings yetEntrepreneurial Character Traits Overview13 pages
- Brain and Spine Tumors: 1st Edition GuideNo ratings yetBrain and Spine Tumors: 1st Edition Guide14 pages
- Lesson Plan on Formulating CounterclaimsNo ratings yetLesson Plan on Formulating Counterclaims8 pages
- Health Symposium on Substance Abuse & Oral CareNo ratings yetHealth Symposium on Substance Abuse & Oral Care4 pages
- Cemtop 250T Self-Leveling Floor CompoundNo ratings yetCemtop 250T Self-Leveling Floor Compound3 pages
- Java Access Modifiers and Inheritance GuideNo ratings yetJava Access Modifiers and Inheritance Guide26 pages