SUMMER TRAINING REPORT

“WEB DEVELOPMENT”

Submitted in Partial fulfillment of the requirements for

the degree of

Bachelor of Technology
(Information Technology)

Submitted to: Submitted By:

Ms. Anita Yadav Kunal Kapoor

Assistant Professor 03713303121

(Information Technology)

HMR INSTITUTE OF TECHNOLOGY AND

MANAGEMENT HAMIDPUR, DELHI 110036

Affiliated to

GURU GOBIND SINGH INDRAPRASTHA

UNIVERSITY

Sector – 16 C Dwarka, Delhi – 110078, India

2021-2025
1 of 54
 DECLARATION

I Kunal Kapoor, student of 5th semester (Information Technology) hereby declare

that the summer training report and PPT on the basis of the course done from Udemy
is submitted to Department of Information Technology, HMR Institute of
Technology and Management, Delhi, Affiliated to Guru Gobind Singh Indraprastha
University, Dwarka(New Delhi) In partial fulfilment of requirement for the award
of the degree Of Bachelors of Technology in Information Technology, has not been
previously formed the basis for the award of any degree, diploma, or other similar
title or recognition.
This is to certify that the above statement made by the candidate is correct to the best
of my knowledge.

New Delhi
Date: (Signature of Proctor)
Ms. Anita Yadav
(Assistant Professor)
(IT Department)

2 of 54
 ACKNOWLEDGEMENT

I am pleased to present this summer training report which I have done from Udemy.
It is indeed a great pleasure for me to express my sense of gratitude towards our
guide Ms. Anita mam whose teachings in this online session set a path for web
development. We are extremely thankful for her invaluable guidance, mentorship,
and unwavering support throughout the duration of the training. Her expertise and
constructive feedback have been instrumental in shaping this report and above all
her constant encouragement has made it possible for us to complete this work. I
would also like to give our sincere thanks to Mr. Narendra sir Head of department
of Information Technology (IT) for necessary help and providing us with the
required facilities for competition of this internship report. I would like to thank the
entire teaching staff who are directly or indirectly involved in the various data
collection and software assistance for bringing forward this training report. I express
my deep sense of gratitude towards my parents for their cooperation and wishes,
which was very much needed in completing this summer training course at this time.

Kunal Kapoor
03713303121

3 of 54
 ABSTRACT

Web development is a dynamic and multifaceted field that encompasses the design, creation, and
maintenance of websites and web applications. In the ever-evolving landscape of the World Wide
Web, web development plays a pivotal role in shaping the digital experiences of users across the
globe. This abstract explores the fundamental components and key aspects of web development,
delving into both the front-end and back-end technologies that drive the creation of interactive and
feature-rich online platforms.
The front-end of web development involves crafting the user interface (UI) and user experience
(UX) of a website or application. It encompasses the use of HTML, CSS, and JavaScript to create
visually appealing and responsive layouts. Modern front-end frameworks and libraries, such as
React, Angular, and Vue.js, have revolutionized the way developers build and organize client-side
code, enabling the creation of dynamic and efficient user interfaces.
On the backend, web development involves server-side scripting, database management, and
server configuration. Server-side languages like Node.js, Python (Django/Flask), Ruby (Ruby on
Rails), and PHP empower developers to handle business logic, process requests, and interact with
databases. Backend development is crucial for building robust and scalable web applications, often
employing frameworks like Express.js, Django, or Flask to streamline the development process.
Web development embraces the concept of full-stack development, where developers possess
skills in both front-end and back-end technologies. This holistic approach enables the creation of
end-to-end solutions, allowing developers to architect and optimize every aspect of a web
application.
Key technologies and tools, such as version control systems (e.g., Git), package managers (e.g.,
npm), and integrated development environments (IDEs), enhance the collaborative and iterative
nature of web development. Cloud platforms and services, including AWS, Azure, and Google
Cloud, provide scalable infrastructure, enabling developers to deploy and host web applications
globally.
Moreover, the rise of responsive design, progressive web apps (PWAs), and web components
exemplify the adaptability and innovation within web development. Accessibility, security, and
performance optimization are integral considerations, ensuring that web applications are inclusive,
secure, and provide seamless user experiences.
In conclusion, web development is a dynamic and interdisciplinary domain that continues to
evolve with technological advancements. The collaboration of frontend and backend technologies,
coupled with an emphasis on best practices, user-centric design, and scalable architecture, defines
the landscape of contemporary web development. As the digital realm expands, web development
remains at the forefront, shaping the online experiences that connect individuals, businesses, and
communities worldwide.

4 of 54
 TABLE OF CONTENT: -

Frontend Development
1.HTML
 HTML Elements
 HTML Documents
 HTML Tags
 HTML Tables

2. CSS (Cascading stylesheet)

 Define
 CSS Background color
 CSS Background image
 Box Model
 CSS Borders
 CSS Margins
 CSS Padding
 Google fonts
 CSS icons

3.JAVASCRIPT

 Introduction
 Key Features
 Syntax and Basic Concepts
 Objects and Arrays
 Document Object Model (DOM)
 Asynchronous JavaScript
 ES6 and Modern JavaScript
 Framework and Libraries

Backend Development
 What is Backend development?
 What does Backend developer do?
 Backend programming languages
 JavaScript (Node.js)
 Node.js NPM
 Frameworks in Backend development
 Express (JavaScript)

5 of 54
  Features of Expree.js
 Advantages of Express.js
 Limitations of Expree.js
 Companies that are using Express.js
 Installation and First Program

Database
 What is database?
 Role of database in web application
 Why do Web App developers Need a database
 Web Application databases offer benefits
 Types of databases in Web Application
 MySQL
 MongoDB
 How to connect database to Web Application

6 of 54
 FRONT-END DEVELOPMENT

HTML

HTML stands for Hyper Text Markup Language HTML is the standard markup language for Web
pages HTML elements are the building blocks of HTML pages HTML elements are represented
by tags BASIC TERMS:
∗
Project structure:
<
!Doctype
><
html
><
body
>
.............................................
<
/body
><
/html
>

HTML Elements
An HTML element is a start tag and an end tag with content in between:

Heading Tag

HTML Documents
The HTML document itself begins with html tag and ends with html tag followed by’/’ forward
slash. The visible part of the HTML document is between body tag.

7 of 54
<HTML> tag:
The HTML <title> tag is used for declaring the title, or name, of the HTML document. The title is
usually displayed in the browser’s title bar (at the top). It is also displayed in browser bookmarks
and search results. The title tag is placed between the opening and closing <head> tags. The <link>
element is used to define a relationship between an HTML document and an external re-source.
This element is most used to define the relationship between document and one or more external
CSS stylesheets.

 HTML Headings
HTML headings are defined with h1 to h6 tags.

 HTML Paragraphs
HTML paragraphs are defined with p tags:

 HTML Links

8 of 54
 HTML links are defined with a tag:

 HTML Images:
HTML images are defined with img tags.
The source file (src), alternative text (alt), width, and height are provided as attributes:

 HTML Buttons:
HTML buttons are defined with button tags:

• HTML Lists
HTML lists are defined with ultag(unordered/bullet list) or oltag(ordered/numbered list)
tags, followed by li tags (list items):

• HTML Tables:
An HTML table is defined with a table tag. Table rows are defined with tr tags. Table
headers are defined with th tags. (bold and centred by default). Table cells (data) are
defined with td tags.

9 of 54
  <Body>tag:
Description. The HTML <body> tag defines the main content of the HTML document or the
section of the HTML document that will be directly visible on your web page. This tag is also
commonly referred to as the<body>element.

• <header>:
The <header> element is intended to usually contain the section’s heading(an<h1>-<h6>element
or an<hgroup> element), but this is not required. The<header>element can also be used to wrap a
section’s table of contents, a search form, or any relevant logos.

• <div>tag:
The<div>tag defines a division or a section in an HTML document. The
<div>element is often used as a container for other HTML elements to style them with CSS or to
perform certain tasks with JavaScript. The div tag is known as Division tag.
The Div tag is used in HTML to make divisions of content in the web page like (text, images,
header, footer, navigation bar etc).
Div tag has both open (<) and closing (>) tag and it is mandatory to close the tag.

10 of 54
The Div is the most usable tag in web development because it helps us to separate out data in the
web page and we can create a particular section for particular data or function in the web pages.
Div tag is Block level tagIt is a generic container tagIt is used to the group of various tags of
HTML so that sections can be created, and style can be Applied on them. Left center right.

• <br>tag:
The HTML anchor tag defines a hyperlink that links one page to another page. The ”href” attribute
is the most important attribute of the HTML a tag. An unvisited link is displayed underlined and
blue. A visited link displayed underlined and purple. An active link is underlined and red.

• <footer>tag:
HTML5 <footer> Element. The <footer>element specifies a footer for a document or
section. A <footer> element should contain information about its containing element. A footer
typically contains the author of the document, copyright information, links to terms of use, contact
information, etc.

• <form>tag:
The <form>tag is used in conjunction with form-associated
elements. Tocreateaform, youcannestform-associatedelementsinsidetheopening/closing
<form>tags. You can also use the form attribute within those elements to reference the ID of the
form to use.

CSS
CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used
for describing the presentation of a document written in a markup language like HTML. CSS
is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

 CSS Syntax
A CSS rule consists of a selector and a declaration block:

The selector points to the HTML element to style (h1). The declaration block (in curly
braces) contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon. In the following example
all p tag elements will be 32px wide, center-aligned, and with red.

11 of 54
Example:

 External Style Sheet

The external style sheet is generally used when you want to make changes on multiple
pages. It is ideal for this condition because it facilitates you to change the look of the entire
web site by changing just one file. It uses the link tag on every page and the link tag should
be put inside the head section.
Example:

The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.

12 of 54
 Inline Style
We can apply CSS in a single element by inline CSS technique. The inline CSS
is also a method to insert style sheets in HTML document. This method mitigates some
advantages of style sheets so it is advised to use this method sparingly. If you want to use
inline CSS, you should use the style attribute to the relevant tag.

13 of 54
 Internal Style:
It is used for a single Webpage.
This is done through a special HTML tag called the style element.
If you have a multipage website, then you probably should not be using the internal style
instead you should be using something called external CSS Style.

 External Style:
What is External CSS?
External CSS is used to style multiple HTML pages with a single style sheet.
External CSS contains a separate CSS file with a .css extension. The CSS file
contains style properties added on selectors (For example class, id, heading, …
etc.).
How to Link a CSS File to an HTML File ?
To link a CSS file to an HTML file, use the <link> element within the HTML
file’s <head> section with the rel attribute set to “stylesheet” and
the href attribute specifying the CSS file’s path.
CSS property is written in a separate file with a .css extension and should be linked
to the HTML document using a link tag. External CSS sets styles for elements once
and applies them consistently across multiple web pages, ensuring a unified design.

14 of 54
 Example:

 CSS BACKGROUND:
The CSS background properties are used to define the background effects for elements.
There are lots of properties to design the background.
CSS background properties are as follows:
 CSS Background-color Property: The background-color property in CSS is used to specify the
background color of an element.
 CSS Background-image Property: The background-image property is used to set one or more
background images to an element.
 CSS Background-repeat Property: The background-repeat property in CSS is used to repeat
the background image both horizontally and vertically.
 CSS Background-attachment Property: The background-attachment property in CSS is used to
specify the kind of attachment of the background image with respect to its container.
 CSS Background-position Property: In CSS body-position property is mainly used to set an
image at a certain position.
 CSS Background-origin Property: The background-origin is a property defined in CSS which
helps in adjusting the background image of the webpage.
 CSS Background-clip Property: The background-clip property in CSS is used to define how to
extend the background (color or image) within an element

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example:

15 of 54
 Box Model in CSS:

 CSS Borders:
The CSS border properties allow you to specify the style, width, and color of an element's
border.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;

16 of 54
 }
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>Geeksforgeeks</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
</body>
</html>

 CSS Padding:
CSS Padding is the space between the content and the border of an element. It adds
spacing inside the element, controlling its internal space, thus affecting its dimensions and
appearance.

CSS Padding Properties:

CSS provides properties to specify padding for each side of an element individually.
 padding-top: Sets the padding for the top side of the element.
 padding-right: Sets the padding for the right side of the element.
 padding-bottom: Sets the padding for the bottom side of the element.
 padding-left: Sets the padding for the left side of the element.

Padding properties can have the following values:
 Length in cm, px, pt, etc.
 Width % of the element.

 Google Fonts in CSS:

Google Fonts provides a library of hundreds of free and open-source fonts that can be used
in web design. we will explore how to use Google Fonts in CSS. The library contains a
vast collection of fonts that can be used in web design, mobile apps, etc.
In this article, we’ll see how to use Google fonts in CSS. Google Fonts provide us with
API, we have to call that API so that we get a JavaScript file or say script file which we
have to include in our HTML code so that we can use different Google fonts.
o Syntax
The syntax for using Google Fonts in CSS is relatively simple. The first step is to
link to the font using the HTML code below:

17 of 54
 <link href=’https://fonts.googleapis.com/css?family=Font+Name’
rel=’stylesheet’>

o Replace Font+Name with the name of the font you want to use.
o Next, we will add this language in our CSS file so this font will be applied to the
particular portion of the webpage
body
{
font-family:’FontName';
}
o So, this will apply, or text written between body tags in HTML will have the above-
mentioned font.
o Approach
o It is very easy to add Google Fonts to a webpage as mentioned below step by step
how to do it. To add any type of font to our web pages we need to add that font
script file in our webpage. so, in the first step, we will add that script file to our
webpage by making a simple API call to the Google Font API as mentioned below.
o Step 1: If you want to use the Open Sans font, the HTML code to add the script file
would be:

<link href=’https://fonts.googleapis.com/css?family=Open+Sans’
rel=’stylesheet’>

o Step 2: The next step is to apply the font to your CSS code using the font-
family property. For example:
Body
{
font-family:'OpenSans', sans-serif;
}
o This will set the font of the entire body of your web page to Open Sans. The sans-
serif fallback is used in case the font fails to load or is not supported by the user’s
browser.
o We will understand the implementation with the help of code examples that uses
the Google font in HTML.

Example:

18 of 54
 Google Icons in CSS:
To use the Google icons, add the following line inside the <head> section of your HTML
page:

Example:

19 of 54
 JAVASCRIPT
Introduction
Overview of JavaScript
JavaScript is a versatile, high-level, interpreted programming language that was initially developed
to add interactivity to static HTML pages. As a client-side scripting language, it runs in web
browsers and allows developers to create dynamic user interfaces, making web applications more
engaging and responsive.
JavaScript's role has expanded beyond the browser with the advent of Node.js, a server-side
runtime that enables JavaScript to be used for backend development as well. This dual capability
positions JavaScript as a powerful language for full-stack development.
Historical Evolution
JavaScript was created by Netscape in 1995, originally named "Mocha" and later "LiveScript"
before settling on "JavaScript." Its early years saw rapid adoption due to its ability to enhance the
user experience on websites. Over time, JavaScript underwent standardization with the
ECMAScript specifications, ensuring compatibility across different environments.

Key Features:
 Interactivity:
JavaScript enables the creation of interactive elements on web pages, allowing for dynamic
user experiences without the need for page reloads.
 Asynchronous Programming:
Asynchronous programming is fundamental to JavaScript's design, facilitating non-
blocking operations. Promises and the async/await syntax simplify the handling of
asynchronous tasks, improving code readability.

20 of 54
  Object-Oriented:
JavaScript is an object-oriented language, supporting principles such as encapsulation,
inheritance, and polymorphism.
 Dynamic Typing:
JavaScript's dynamic typing allows variables to hold values of any type. While this
flexibility enhances development speed, developers must be mindful of potential type-
related issues during runtime.
 Cross-Platform:
JavaScript's versatility extends to cross-platform development, enabling the creation of
mobile applications using frameworks like React Native. Additionally, with frameworks
like Electron, JavaScript can be used to build desktop applications.

Syntax and Basic Concepts:

 Variables:
Variables are containers for storing data. In JavaScript, variables are declared using var,
let, or const.

 Data Types:
JavaScript has primitive data types (e.g., string, number, boolean) and complex data types
(e.g., object, array, function).
 Operators:
JavaScript supports various operators, including arithmetic, comparison, logical, and
assignment operators.

 Functions:
Functions are blocks of reusable code. They can be named or anonymous, and they may
take parameters and return values.

21 of 54
  Control Flow:
JavaScript supports conditional statements (if, else if, else) and loops (for, while, do-while,
for...in, for...of).

Objects and Arrays:

 Objects:
Objects in JavaScript are collections of key-value pairs.

 Arrays:
Arrays are ordered lists of values.

22 of 54
Document Object Model (DOM):
The Document Object Model (DOM) is a programming interface for web documents. It represents
the structure of a document as a tree of objects, where each object corresponds to a part of the
document, such as elements, attributes, and text content. The DOM provides a way for programs
(usually written in JavaScript) to dynamically interact with and manipulate the content, structure,
and style of HTML and XML documents.

 Document Object:
At the top of the DOM tree is the document object, typically represented by the document
variable in JavaScript. It serves as the entry point for interacting with the entire HTML or
XML document.

 Node:
Nodes are the building blocks of the DOM tree. Everything in a document is a node:
elements, attributes, text, comments, etc. Nodes have different types, such as Element,
Text, Comment, and Attribute.
 Element:
Elements represent the actual HTML or XML tags in the document. They are nodes that
can have attributes, child nodes, and text content.

 Attributes:
Attributes are properties of elements. They define additional information about an element
and are accessed and manipulated using JavaScript.

23 of 54
 Methods for Selecting Nodes:
JavaScript provides methods to select nodes in the DOM. Common methods include
getElementById, getElementsByClassName, getElementsByTagName, and
querySelector.

 Traversal:
Traversal involves moving between different nodes in the DOM tree. Common traversal
methods include parentNode, childNodes, firstChild, lastChild, nextSibling, and
previousSibling.

 Manipulating Content:
JavaScript allows you to dynamically modify the content of the document. Common
methods include innerHTML, textContent, appendChild, removeChild, and
replaceChild.

 Events:
Events are actions or occurrences that happen in the browser, such as a user clicking a
button or the page finishing loading. JavaScript can respond to these events using event
listeners.

 Creating and Modifying Elements:

JavaScript allows the creation of new elements and the modification of existing ones.
Methods like createElement, appendChild, and setAttribute are commonly used for this
purpose.

24 of 54
Asynchronous JavaScript:
 Promises:
Promises are a mechanism for handling asynchronous operations and managing callbacks.

 Async/Await:
Async/await is a syntactic sugar for working with promises, making asynchronous code
more readable and manageable.

25 of 54
ES6 and Modern JavaScript:
ECMAScript 6 (ES6), also known as ECMAScript 2015, is a major update to the ECMAScript
standard, which is the specification that JavaScript follows. ES6 introduces several new features
and enhancements to JavaScript, making the language more expressive, readable, and powerful.
When people refer to "modern JavaScript," they often mean using the features introduced in ES6
and subsequent versions.
 Arrow Functions:
Shorter syntax for writing functions.

 Template Literals:
A more concise way to concatenate strings.

 Destructuring:
Extracting values from arrays and objects more conveniently.

 Classes:
A more structured way to define and create objects.

26 of 54
Front-End JavaScript
JavaScript plays a crucial role in front-end development, enabling the creation of dynamic,
responsive, and interactive user interfaces. Frameworks like React, Angular, and Vue.js provide
powerful tools for building modern web applications.
Front-End Frameworks and Libraries:
 React:
React.js is a popular JavaScript library for building user interfaces, particularly for building
single-page applications where user interactions are key. Developed and maintained by
Facebook, React has gained widespread adoption in the web development community due
to its declarative approach, component-based architecture, and efficient rendering.
React uses a declarative syntax, allowing developers to describe the desired outcome
without specifying the step-by-step process of achieving it. This leads to more readable
and maintainable code.

27 of 54
 In this example, Counter is a simple functional component that uses the useState hook to
manage its internal state. It displays a count and provides a button to increment the count
when clicked.
 Angular:
AngularJS, often referred to as Angular 1, is a JavaScript-based open-source front-end web
application framework developed and maintained by Google. It was the first version of the
Angular framework and is distinct from Angular (commonly referred to as Angular 2 and
later versions), which is a complete rewrite of the original AngularJS.
AngularJS introduced a new approach to building web applications by providing a
framework for dynamic and interactive single-page applications (SPAs). While newer
versions of Angular have superseded AngularJS in terms of features and architecture,
AngularJS still has relevance, and understanding its concepts can be valuable for
maintaining legacy projects.

28 of 54
 In this example, an AngularJS module and controller are defined. The controller sets up
data ($scope.items) that can be bound to the view.
 Vue.js:
Vue.js, often referred to simply as Vue, is a progressive JavaScript framework used for
building user interfaces. It is designed from the ground up to be incrementally adaptable,
allowing developers to integrate it into existing projects or use it as the primary library for
developing single-page applications (SPAs).

In this example, the Vue.js component displays a greeting and provides a button to change
the greeting when clicked. The @click directive binds the button to the changeGreeting
method.

29 of 54
 BACKEND DEVELOPMENT

What is Back-end development?

Back-end development refers to the development of server-side logic that powers websites and
apps from behind the scenes. It includes all the code needed to build out the database, server, and
application. From database migrations to API integrations to setting up the server-side
technologies that make a website tick, a back-end web developer may be the talent you need to get
your next web project off the ground.
When you submit a form, that data gets stored in an organized database, accessed to send you an
email. These operations are also part of the back-end and thus the responsibility of back-end
developers.

What does a Back-end developer do?

Depending on the company, a back-end developer will be responsible for some, most, or all of the
following:
 Developing the systems and processes to meet the application’s specified requirements.
 Maintaining databases, including data storage and retrieval, organization, backups, and
security.
 Finding and fixing bugs in the back-end code.
 Managing any APIs, the company uses to integrate applications, both externally and
internally.
 Conducting performance optimization to increase efficiency and improve the user
experience.
 Creating and maintaining libraries of code that can be reused by developers across the
organization.
 Helping develop the overall architecture of the application’s back end.
 Securing the application from cyberattacks.

The backend comprises three main parts: -

 A Database - A database helps us store a large amount of information in an efficient and

structured way compared to storing that information in a text file.
 Server - A server is a computer that receives user requests through the front-end interface
(also known as the client) and responds with a result computed by the application.
 Application - An application is a computer program that listens for requests on the server,
retrieves information from the database, and sends a response through the server.

30 of 54
Back-End Programming Languages: -
Programming languages are computer languages that programmers use to communicate with
computers to create software including:
 JavaScript (Node.js)
 Python
 C#

JavaScript (Node.js)
 Node.js is an open-source server environment
 Node.js is free
 Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
 Node.js uses JavaScript on the server
 Node.js uses asynchronous programming!

What can Node.js do?

 Node.js can generate dynamic page content
 Node.js can create, open, read, write, delete, and close files on the server
 Node.js can collect form data
 Node.js can add, delete, modify data in your database

How to download Node.js

The official Node.js website has installation instructions for Node.js: https://nodejs.org

What is Node.js Modules?

Modules are same as Javascript libraries. A set of functions you want to include in your application.
Syntax: -
const module = require('module_name');

Module.exports
 It is a special object
 By using module.exports we can use any function variable, value or any other information
present in one file into another

Require ()

31 of 54
A built-in function to include external modules that exists in separate files.

What is Node.js NPM?

NPM (Node Package Manager) is the default package manager for Node.js and is written entirely
in Javascript .
A package contains all the files needed for a module and modules are the JavaScript libraries that
can be included in Node project according to the requirement of the project.
NPM can install all the dependencies of a project through the package.json file. It can also update
and uninstall packages. In the package.json file, each dependency can specify a range of valid

32 of 54
versions using the semantic versioning scheme, allowing developers to auto-update their packages
while at the same time avoiding unwanted breaking changes.

What is a Package?

A package in Node.js contains all the files you need for a module.

Package.json

The package. json file contains descriptive and functional metadata about a project, such as a name,
version, and dependencies. The file provides the npm package manager with various information
to help identify the project and handle dependencies.
When you want to store data between server restarts with Node, JSON files are a simple and
convenient choice. Whether you are reading a config file or persisting data for your application,
Node has some built in utilities that make it easy to read and write JSON files.

The package.json file is the heart of Node.js system. It is the manifest file of any Node.js project
and contains the metadata of the project. The package.json file is the essential part to understand,
learn and work with the Node.js. It is the first step to learn about development in Node.js.

Local VS Global install

When we install any package in a directory it is installed locally means it can be used only in that
directory .

To use any package globally(i.e. in any directory) we need to install it globally .

Local install is a good practice.

Global install

npm install –g<-package name->

Frameworks in Back-end development

Frameworks are designed to make building and deploying web applications much easier. They
provide a standard way to build applications while providing different libraries, templates, data-
access solutions, authentication and authorization solutions, security measures and boilerplate
code, among many other features. Some of the most popular frameworks include:
 Express (JavaScript)

33 of 54
  Django (Python)
 Spring (Java)
 .NET (C#)

Express (JavaScript)
Express is a node js web application framework that provides broad features for building web and
mobile applications. It is used to build a single page, multipage, and hybrid web application.

It's a layer built on the top of the Node js that helps manage servers and routes.

Why Express js?

 Express was created to make APIs and web applications with ease.
 It saves a lot of coding time almost by half and still makes web and
mobile applications are efficient.
 Another reason for using express is that it is written in javascript as JavaScript is an easy
language even if you don't have a previous
knowledge of any language. Express lets so many new developers enter the field of
web development.

The reason behind creating an express framework for node js is:

 Time-efficient
 Fast
 Economical
 Easy to learn
 Asynchronous

Features of Express.js

Middleware
Middleware is a request handler that has access to the application's request-response cycle.
Routing
It refers to how an application's endpoint's URLs respond to client requests.

34 of 54
Templating
It provides templating engines to build dynamic content on the web pages by creating HTML
templates on the server.

Debugging
Express makes it easier as it identifies the exact part where bugs are.

Advantages of Using Express with Node.js

 Express is Unopinionated, and we can customize it.

 For request handling, we can use Middleware.
 A single language is used for frontend and backend development.
 Express is fast to link it with databases like MySQL, MongoDB, etc.
 Express allows dynamic rendering of HTML Pages based on passing arguments to
templates.

Limitations of Express JS
 Sometimes, there is no structural way to organize things, and the code becomes non-
understandable.
 There are so many issues with callbacks.
 The error messages that will come are challenging to understand.

Companies That Are Using Express JS

 Netflix
 IBM
 eBay
 Uber

Installation and the First Program

To install Express JS on your system first you need to install node js then we will write a command
to install express in the terminal.

 npm install express

The express js will be installed in your system.

35 of 54
 DATABASE

What is Database?
The term "database" was coined by Peter Naur in 1960 to describe his approach to developing
software systems. Naur produced a definition that stated, "A file may be regarded as a logical
record of facts or ideas, whereas a database contains information organized so that it can be
used readily and flexibly."
Database plays a critical role in web app development. It is one of the most important aspects
of building an application. It is necessary that you have a good knowledge of databases before
using them in your application. Database design plays a key role in the operation of your
website and provides you with information regarding transactions, data integrity, and security
issues.
In the early days of computing, databases were synonymous with files on disk. The term is still
commonly used this way, for example when people refer to their hard drive as their "main
database".

Data is the foundation of a web application. It is used to store user information, session data,
and other application data. The database is the central repository for all of this data. Web
applications use a variety of databases to store data such as flat files, relational databases,
object-relational databases, and NoSQL databases. Each type of database has its own
advantages and disadvantages when it comes to storing and retrieving data.

A database is a collection of data and information that is stored in an organized manner for
easy retrieval. The primary purpose of a database is to store, retrieve, and update information.
A database can be used to store data related to any aspect of business operations.

Databases can be very large, containing millions of records, or very small, containing just a few
records or even a single record. They may be stored on hard disks or other media, or they may
exist only in memory. In the early days of computing, databases were stored on tape drives or
punch cards. Today they're stored on hard drives, flash memory cards, and other media.

Databases are designed to ensure that the data they contain is organized and easily retrievable.
A database management system (DBMS) is the software used to create and maintain a database.

Role of Database in Web Application

Web application development agency, developers, and designers use databases to store and
organize the data that their applications need. The role of databases in web application
development has increased over time. As a result, a number of developers create applications
that use databases. You can't fully understand web application development without
36 of 54
understanding the role of databases. A database is nothing but an organized collection of data
that helps us, whether creating or modifying any program. Some examples of this kind of
organization are the bookshelf, the NAS storage, and even databases on your desktop
computers!

The role of databases in a web application is very important. The web application interacts with
the database to store data and retrieve data from it. The database is used to store all the
information that the user needs to store. For example, if you are developing a shopping cart
website then it will contain product details, customer details, order details, etc. In this case, you
need to store this information in a database so that we can use them later on.

Why Do Web App Developers Need a Database?

The first thing one should know when it comes to databases is the need. There are huge numbers
of businesses out there, whose revenue depends on the success and future of their database.
You see, a database is extremely important for online companies and businesses as well. These
days databases are used for various purposes like managing financial records, setting up
customer profiles, keeping inventory and ordering information, etc. But what does all this
mean?

Most modern web applications are based on a database. The database stores information about
the users, products, orders, and more. A database is an important component of any web
application because it provides a central location for storing user information and business
logic. In addition to this, it allows you to store complex data structures with minimal effort.

Databases are used by businesses to collect and store customer information, financial records,
and inventory data. They're also used in research projects to store information about
experiments or tests. For example, if you were conducting a survey on the habits of people who
eat cereal for breakfast, you might use a database to keep track of your results.
Databases are also used by government agencies to store public records like birth certificates
and marriage licenses. Databases are also used by medical researchers who need to record the
medical history of patients in order to determine how effective certain treatments may be for
different diseases or conditions.

Web Application Databases Offer Benefits

Web applications are becoming more and more popular because they allow users to access
information from different devices at the same time. A web application database offers benefits
such as:

 Security: A web application database provides security features such as encryption and
password protection. If a user’s password becomes lost or compromised, it will not be
possible for someone else to access the information stored in the database.

37 of 54
  Accessibility: Users can access their data from any internet-enabled device, which
includes smartphones and tablets as well as laptops and desktops. This means that users
do not have to worry about losing their valuable data because it is stored on another
device.

 Reliability and scalability: Web applications are usually accessed by many users
simultaneously, unlike traditional desktop applications that are accessed by one person
at a time, so web apps need to be able to handle more requests simultaneously than their
desktop counterparts. Web application databases use distributed architecture (multiple
servers) to scale up quickly when demand increases, so they can handle large numbers
of simultaneous requests without slowing down or crashing.
 Ease of maintenance for IT staff: Because web application databases use distributed
architecture, problems can be isolated and fixed quickly, which reduces downtime for
the end user and reduces costs for IT staff responsible for maintaining the system. Also,
with database automation tools we can make database tasks easier and safer.

Types of Databases in Web Application

A database is a collection of records, each of which is similar to other records in the same
database. There are two types of databases: relational and non-relational. Relational databases
are built on the principles of tabular data, which means there has to be a one- to-one relationship
between the columns and rows in the table. A non-Relational Database is also known as NoSQL
Database.

 Relational
A database is a large collection of structured data, which can be accessed to find specific
information. Relational databases are famous for their structure and have been used by
programmers for years.

38 of 54
 A relational database is data storage that maintains a relationship between two or more
entities. It is used whenever you want to store information in a way that it can be retrieved
by your application. In general, we can say that a relational database is a data storage
structure where each tuple on its own occupies one record and consists of values of
attributes.

There are many advantages of using relational databases over other databases. Apart from
this, there are also some disadvantages associated with using these databases which need
careful consideration before employing them for storing your data.

Advantages

The main advantages of relational databases include:

 Data integrity. A correctly implemented relational database ensures that all data entered
remains accurate, complete, and consistent over time. This helps ensure that all users
have access to the most up-to-date data possible at any given moment without having to
worry about whether it will still be there when they need it later on down the line.

 They're easy to use. Relational databases are designed to be easy to understand and use.
The relationships between all the tables and data elements are clearly defined, making it
easy to understand how they work together. This makes it easier for people with little or
no database experience to understand how to use them without having to learn an
entirely new language.

 Scalability. Relational databases scale easily from small applications up to large

enterprise systems. You can add more disk space and memory resources when needed
without taking down your application or disrupting end users. This makes relational
databases ideal for large-scale applications, such as data warehouses or customer
relationship management systems.

 High availability and disaster recovery capabilities. Relational databases provide

automated backup capabilities that allow you to recover quickly from hardware failures
or other disasters without requiring human intervention or manual restoration
procedures. This makes relational databases ideal for mission-critical applications where
downtime is not an option.

Disadvantages

 Not suitable for real-time data analysis. Relational databases can't be used for real-
time data analysis because they don't store the data in such a way that it can be queried

39 of 54
 quickly. This means that if you want to analyze your data in real-time, you need a
technology other than Relational databases. A good example is NoSQL which is more
suitable for real-time analysis because it stores data in a different manner than relational
databases do.

 The inability to store documents or graphs in their native format. This means that
you need to transform your data into tabular format before storing it. This can be very
inconvenient if you want to query your data in a different way than what is supported
by the database engine itself (for example, by using SQL or Structured Query
Language).

 Not very good at storing sparse data (i.e., large empty spaces). For example, if you
want to store all email addresses from your customers and only non-empty addresses are
stored, then this will take up a lot of space compared to storing every single email
address even if it's empty (the latter would take less space).

 Relational databases have a fixed schema. You cannot change the structure of the
database during its lifetime, this is called fixed schema. This can limit your ability to
add new features or change existing ones. For example, if you want to add a new column
for an existing table in a relational database, you will have to re-write all queries that
use this table and also update all other tables that reference this table. This can be time-
consuming and error prone.

 Non-Relational

Non-relational databases (sometimes called object-oriented databases) are very different

from Relational databases. The term non-relational (or NoSQL) database describes any
kind of database in which there is no strict distinction between relations, rows, and
columns. The term non-relational comes from the fact that the objects stored within the
databases are not based on relationships (also called joins), but rather are based on an
implicit, often unstructured structure. Non-relational databases exist mainly to help solve
problems relating to responsiveness, scalability, and performance.

Non-relational databases (or NoSQL) are a class of database management systems that
were designed to be more flexible than a relational database. The main reason is that they
are disconnected from the original data structure and don't use the traditional relationships
between tables in database design which makes them easier to organize, manage, and
access.

40 of 54
Advantages

 Speed. The most obvious advantage of non-relational databases is that they can be
extremely fast. Non-relational databases can do things that would take too long in a
relational database, such as searching every record or even all records on disk, without
having to query the database first.

 Simplicity. Non-relational databases are generally easier to understand and use than
relational ones, making them ideal for smaller projects where there aren't many users or
developers working with the data at any given time. NoSQL databases might not be ideal
for complex projects.

 Scalability. Because they are not constrained by the schema, non-relational databases
can scale more easily than relational databases. You can add more hardware and
therefore more nodes, which increases the overall performance of the system. This is
particularly useful when you need to perform complex computations on large amounts
of data.

 Data can be stored in any format necessary for the application. For example, if your
application requires XML documents, then you can store them in an XML column
instead of forcing them into a table schema.

 The processing time for queries is faster in some cases because there is no need to
traverse through multiple tables or join across multiple databases like with relational
databases.

Disadvantages

 No standardization. Each vendor has its own APIs and features, making it challenging
to implement cross-platform applications.

 Some non-relational databases (especially those used for big data) have problems
dealing with large amounts of data at once because they don't have good query
optimization algorithms built into them as relational databases do.

 A non-relational database doesn't have a fixed structure like a relational database,

so you'll need to write code that can handle the unexpected — for example, you might

41 of 54
 have to write code that handles different field lengths depending on what kind of data is
being stored. This can make it harder to maintain your application, especially if it's being
used by other people who aren't aware of these differences.

 The biggest disadvantage of non-relational databases is that they don't support

ACID transactions. In other words, to update data in a non-relational database, you
need to perform multiple queries and then combine them together. The other problem is
that these databases are not compatible with each other, so it's difficult to integrate them
into a single system.

List of Popular Web App Databases

Many different types of databases exist, with different features and capabilities. Some databases
are relational (or SQL-based), while others are non-relational (NoSQL). These are the best
databases for web applications. Depending upon your needs choose a right database to build
your software appplications.

 MySQL (Relational)

MySQL is a relational database management system (RDBMS) based on SQL. It is a

popular database server, and a multi-user, multi-threaded SQL database. MySQL is
developed by Oracle Corporation. The name "MySQL" is a play on the name of co-
founder Michael Widenius's earlier project, Monty Python's Flying Circus. It is written
in C and C++ programming languages, with some elements written in Java. It has been
licensed under GPLv2 since 2004, but it can be used under the terms of the GNU Affero
General Public License.
MySQL database is often used for data storage, especially in web applications, and it is
also widely used for creating and maintaining relational database tables. MySQL is
owned by Oracle Corporation and was developed by a Swedish company called MySQL
AB, which was bought by Sun Microsystems in 2008. As of 2009, the project is managed
by Oracle Corporation.

It has become the most popular open source and best database software in the world, used
on the web and mobile applications, by corporations large and small and across all
industry.

 MongoDB (non-relational)

MongoDB is an open-source document-oriented database developed by MongoDB

Inc. (formerly 10gen). The first version was released in 2009. It is written in C++

42 of 54
 and provides a document-oriented data model that can be queried using a JSON-
like query language.

A document can be thought of as a virtual "sheet" or "document" in a spreadsheet

application such as Microsoft Excel or Google Sheets. A document contains multiple
fields that may be similar to cells in an Excel spreadsheet or cells in an Access database
table. These fields can have different types: text, numbers, dates, and so on.

MongoDB's development began in 2007 when its creators were working on software for
the social media website Facebook.com. They attempted to create a new kind of database
that would be better suited to the needs of web applications than traditional relational
databases, but they found that commercial offerings did not meet their requirements. As
a result, they developed a prototype called GridFS before founding 10gen to continue
work on it as a product named MongoDB. In 2009, the company changed its name to
MongoDB Inc., and in February 2010 it released the first production version of
MongoDB.

How to Connect Database to Web Application

Connecting a database to a web application is an important step in your development process.

By connecting your database to your web application, you can easily add new data, modify
existing data, delete data, and more.

There are a few ways to do it. The simplest way is to use a direct query to get the value you
need. This is not recommended because it will severely limit your flexibility and scalability.

Another approach is to use a stored procedure that returns the value. This can be done in SQL
Server, MySQL server, or other RDBMSs. But what if your web application needs more than
one value from the database? You would need to issue multiple queries or use another method.

43 of 54
 PROJECT
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<title>Password Generator | JavaScript Project</title>
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="inputBox">
<input type="text" class="passBox" id="passBox" disabled />
<span class="material-icons" id="copyIcon">content_copy</span>
</div>
<input type="range" min="1" max="30" value="8" id="inputSlider"
<div class="row">
44 of 54
 <p>Password Length</p>
<span id="sliderValue"></span>
</div>
<div class="row">
<label for="lowercase">Include Lowercase Letters (a-z)</label>
<input type="checkbox" name="lowercase" id="lowercase" checked/>
</div>
<div class="row">
<label for="uppercase">Include Uppercase Letters (A-Z)</label>
<input type="checkbox" name="uppercase" id="uppercase" checked/>
</div>
<div class="row">
<label for="numbers">Include Numbers (0-9)</label>
<input type="checkbox" name="numbers" id="numbers" checked/>
</div>
<div class="row">
<label for="symbols">Include Symbols (@-*)</label>
<input type="checkbox" name="symbols" id="symbols" checked/>
</div>
<button type="button" class="genBtn" id="genBtn">
Generate Password
</button>
</div>
<script src="script.js"></script>

45 of 54
 </body>
</html>

Style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
max-width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom, #ffa585, #45c5d8);
color: #fff;
font-weight: 600;
}
.container{
border: 0.5px solid #fff;
border-radius: 10px;

46 of 54
 padding: 28px 32px;
display: flex;
flex-direction: column;
background: transparent;
box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}
.container h1{
font-size: 1.4rem;
margin-block: 8px;
}
.inputBox{
position: relative;
}
.inputBox span{
position: absolute;
top: 16px;
right: 6px;
color: #000;
font-size: 28px;
cursor: pointer;
z-index: 2;
}
.passBox{
background-color: #fff;

47 of 54
 border: none;
outline: none;
padding: 10px;
width: 300px;
border-radius: 4px;
font-size: 20px;
margin-block: 8px;
text-overflow: ellipsis;
}
.row{
display: flex;
margin-block: 8px;
}
.row p, .row label{
flex-basis: 100%;
font-size: 18px;
}
.row input[type="checkbox"]{
width: 20px;
height: 20px;
}
.genBtn{
border: none;
outline: none;

48 of 54
 background-color: #2c619e;
padding: 12px 24px;
color: #fff;
font-size: 18px;
margin-block: 8px;
font-weight: 700;
cursor: pointer;
border-radius: 4px;
}
.genBtn:hover{
background-color: #0066ff;
}

Script.js
let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");
// Showing input slider value
sliderValue.textContent = inputSlider.value;

49 of 54
inputSlider.addEventListener('input', ()=>{
sliderValue.textContent = inputSlider.value;
});
genBtn.addEventListener('click', ()=>{
passBox.value = generatePassword();
})
let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";
// Function to generate Password
function generatePassword(){
let genPassword = "";
let allChars = "";
allChars += lowercase.checked ? lowerChars : "";
allChars += uppercase.checked ? upperChars : "";
allChars += numbers.checked ? allNumbers : "";
allChars += symbols.checked ? allSymbols : "";
if(allChars == "" || allChars.length == 0){
return genPassword;
}
let i = 1;
while(i<=inputSlider.value){
genPassword += allChars.charAt(Math.floor(Math.random() *
allChars.length));
50 of 54
 i++;
}
return genPassword;
}
copyIcon.addEventListener('click', ()=>{
if(passBox.value != "" || passBox.value.length >=1){
navigator.clipboard.writeText(passBox.value);
copyIcon.innerText = "check";
copyIcon.title = "Password Copied";
setTimeout(()=>{
copyIcon.innerHTML = "content_copy";
copyIcon.title = "";
}, 3000)
}
});

51 of 54
 CONCLUSIONS AND SCOPE FOR FUTURE STUDY

This course has been helpful to me. Also, my confidence in web development
developed because of the organised material, which included educational modules,
assessments, hands-on practise, and assistance. This web development training
included instructive videos, tasks, projects, and a practise environment where I could
put what I learned into reality. This helped to solidify my comprehension and
application of the topics. and it was a pleasure to work on the project. Web
designing or web development is a short-term professional job-oriented course.
There are huge opportunities available for the students who want to work in this
field. Many private and public organizations hire web designer for their online work
and website development. With the rapid advent of online industry, the demand of
web development professionals is increasing, and this has created a huge job
opportunity for the aspirants in the upcoming days. Also, an experienced person in
this field can also work as a freelancer; there are many online companies which
provide online projects to the individuals.

52 of 54
Certificate

53 of 54
 REFERENCES:

HTML: - https://www.w3schools.com/html/html_intro.asp
CSS: - https://www.w3schools.com/css/css_intro.asp
JavaScript:- https://www.geeksforgeeks.org/introduction-to-javascript/
Node.js: - https://www.w3schools.com/nodejs/nodejs_intro.asp
Express.js: - https://www.simplilearn.com/tutorials/nodejs-tutorial/what-is-express-
js
Database: - https://www.javatpoint.com/what-is-database

54 of 54