SUMMER TRAINING REPORT

Web Devlopment Project

Submitted in partial fulfillment of

the Requirements for the award of
Degree of Bachelor of Technology
in
Information Technology and Engineering

Submitted By

Name: RAJAT KUMAR

University Roll No.: 03314813121

SUBMITTED TO:

Department of Information Technology and Engineering Maharaja Agrasen Institute of

Technology, Delhi

DECLARATION

I hereby declare that the Summer Training Report - 1 is an authentic record of my own work as requirements of
Summer Training during the period from 24/07/23 to 24/09/23 for the award of degree of B.Tech. (Information
Technology and Engineering), Maharaja Agrasen Institute of Technology, New Delhi under the guidance of Ms.
Anjela Yu
 (I)
RAJAT KUMAR 03314813121

Certificate

(II)
ACKNOWLEDGEMENT

I would like to express my sincere gratitude to CODING NINJAS, Mr.Ankush Singla (Instructor of
DSA) for providing their invaluable guidance, comments and suggestions
throughout the course. I would specially thank Mr.Ankush Singla my training mentor
forconstantly motivating me to work harder and for encouragementand invaluable
assistance.

Also, I would like to thanks to my parent for giving encouragementand support. Without
their constant support, I might not be able to complete this training properly. I would also
like to say thanks tomy friends for being there for me when I needed their help.

(III)

Table content
 S. No. TITLE

1 Declaration

2 Acknowledgement

3 Certification

4 Flowchart

5 Conditionals and Loops

5.1 Operators and For Loop

5.2 Arrays

5.3 Searching and Sorting

5.4 Character Arrays and 2D Arrays

5.5 Linked List

5.6 Stack and Queue

5.7 Priority Queues

5.8 Hashmap

6 DP and Graph

6.1 FINAL PROJECT OVERVIEW

6.2 Skill used : Backend

6.3 Output

7 Reason for choosing Web Devlopment

Introduction

Web development is the work involved in developing a web sitefor the Internet.
Web development can range from developing asimple single static page of plain text
to complex web-based internet applications, electronic businesses, and social
network services.
 There are two broad divisions of web development –

front-end development (also called client-side development) and back-

enddevelopment (also called server-side development).

Front-end development refers to constructing what a user sees when they load a
web application – the content, design and how
you interact with it. This is done with three codes – HTML, CSS andJavaScript.

HTML, short for Hyper Text Mark-up Language, is a special code for‘marking up’ text
in order to turn it into a web page. Every web page on the net is written in HTML, and it
will form the backbone of any web application. CSS, short for Cascading Style Sheets, is
a code for setting style rules for the appearance of web pages. CSS handles the cosmetic
side of the web. Finally, JavaScript is a scripting language that’s widely used to add
functionality and
interactivity to web pages.

Back-end development controls what goes on behind the scenes

of a web application. A back-end often uses a database to generatethe front-end. Back-
end scripts are written in many different coding languages and frameworks, such as…

• Firebase

• Node js
• Express Js

• Mongodb

But, I have learnt Firebase as the Back-end script in my summertraining. Because Firebase is
the Easy scripting language on theweb. Currently, it is one of the most loved languages used for
dynamic web pages. It is widely used open source general-purposescripting
language which is best for web development. I also learned Structured Query language in Wampp
server for handling Relationaldatabase Management sys

1
Technology Learnt

I learnt web Development from Udemy summer training . I learntthese technologies during the 2
months training period:
• HTML

• CSS
 • Bootstrap

• Tailwind

• Javascript

• React

• Firebase

• Nodejs +Express

• Mongodb

Basic Hardware/Software Requirements:

Operating System:
• Windows 7, Windows 8 or Windows 10

• Mac OSX 10.8, 10.9, 10.10 or 10.11 Hardware:

• Processor (CPU) with 2 gigahertz
•A minimum of 2 GB of RAM
• Monitor Resolution 1024 X 768 or high
•A minimum of 20 GB of available space
Browsers:
• Chrome* 36+
• Edge* 20+
• Mozilla Firefox 31+
• Internet Explorer 11+ (Windows only)
• Safari 6+ (MacOS only)

2
There is a lot more to say about it. Web site is actually laid out inthree fundamental layers, namely:

1. Structure Layer: We use HTML to give structure and semanticmeaning to the

content.
2. Presentation Layer: Use CSS to give a layout and visualpresentation to
the content.
3. Behaviour Layer: Use JavaScript to give additional interactionto the website.
3
HTML:

HTML is an acronym which stands for “Hyper Text MarkupLanguage” which is used for creating web pages

and
web applications.

In the late 1980’s, a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In1989, he wrote a memo proposing an internet based
hypertextsystem.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was
a document called "HTML Tags"proposed by Tim in late 1991. The latest version of HTML is
HTML5. Let's see what is meant by Hypertext Markup Language, and Web page.

HyperText: Hypertext simply means "Text within Text." A text hasa 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.

Markup language: A markup language is a computer languagethat is used to apply layout

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

Web Page: A web page is a document which is commonly writtenin 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.

Hence, HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in anice format on a web browser. An HTML document is made of

many HTML tags and each HTML tag contains different content.

4
CODE:

5
 6
Output:
7
8
CSS:

CSS stands for Cascading Style Sheet. CSS is used to design HTML tags.CSS is a widely
used language on the web. HTML, CSS and JavaScript are used for web designing. It
helps the web designers to apply style on HTML tags. CSS is used to define styles for
 your web pages, including the design, layout and variations in display for different
devices and screen sizes. SGML (Standard GeneralizedMarkup Language) is the origin of
CSS. It is a language that definesmarkup languages.

CSS handles the look and feel part of a web page. Using CSS, you can control the colour
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colours are used, layout designs, and variations in
display for different devices and screen sizes as well asa variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSSis combined with the markup languages
HTML or XHTML.There aremany advantages of web development.
You can write CSS once and then reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many Web pages as you want.
To make a global change, simply change the style, and all elements in all the web pages
will be updated automatically.
CSS can be used to style HTML elements in three ways:

1. Inline: CSS rule applied as an attribute to the HTML element.Has the most
precedence.

2. Internal: Many CSS rules can be written inside the same HTMLfile for elements.It
has less precedence than the above one.

3. External: CSS rules are written in a separate file and then linked to the
respective HTML file. Has the less precedence.

Advantages of CSS

CSS saves time − you can write CSS once and then reuse samesheet
in multiple HTML pages. You can define a style for each HTML
element and apply it to as many Web pages as you want.

Pages load faster − If you are using CSS, you do not need to
writeHTML tag attributes every time. Just write one CSS rule
of a tag and apply it to all the occurrences of that tag. So
less code meansfaster download times.

Easy maintenance − To make a global change, simply change

thestyle, and all elements in all the web pages will be updated
automatically.

Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to yourHTML page in comparison
to HTML attributes.

9
Multiple Device Compatibility − Style sheets allow content to
beoptimized for more than one type of device. By using the same
HTML document, different versions of a website can be
presentedfor handheld devices such as PDAs and cell phones or
for printing.
Global web standards − Now HTML attributes are being
deprecated and it is being recommended to use CSS. So it’s a good

idea to start using CSS in all the HTML pages to make themcompatible to future

browsers. Limitations of CSS:

• Ascending by selectors is not possible

• Limitations of vertical control
• No expressions
• No column declaration
• Pseudo-class not controlled by dynamic behaviour
• Rules, styles, targeting specific text not possible

CSS frameworks are the pre-planned libraries which make easyand more standard
compliant web page styling. The frequentlyused CSS framework is Bootstrap which I
have learned in this training.

10
Code:

Basic:
11
Basics output:

12
ADVANCED:

Flex:

Html:
CSS:

13
Output:
 14
Bootstrap:

Bootstrap is an open-source JavaScript framework developed bythe team at Twitter.

They Used HTML CSS JS for building user defined interface! We can say it “Front
endframework”.

Bootstrap is a CSS based framework used to make websites

responsive. The Purpose of bootstrap is to make faster responsivewebsites, which will
adjust itself on all devices like
Mobile phones, tablets, computer, Laptop and all. Bootstrap is theworld’s most popular
front end framework to develop mobile first,responsive website very easily. It is very
easy to get started with, itis highly customizable, and you can develop websites very
quickly. The Bootstrap community is pretty huge as well.
Earlier whenever we are writing CSS we used to define all the properties in the separate
CSS file that we want to attach the separate CSS file, wherein bootstrap they have already
written some classes in the bootstrap.css file. You just have to import thatCSS file and
use their classes.
In addition, Bootstrap requires Jquery to work. Jquery is a popularand widely used
JavaScript library which both simplifies and adds JavaScript cross-browser compatibility.

Bootstrap can be boiled down to three main files:

• Bootstrap.css – a CSS framework

• Bootstrap.js – a JavaScript/Jquery framework
• Glyphicons – a font (an icon font set)
In addition, Bootstrap requires Jquery to work. Jquery is a popularand widely
used JavaScript library which both simplifies and adds JavaScript cross-browser
Compatability.

Advantages of Bootstrap

The biggest advantage of using Bootstrap is that it comes with freeset of tools for
creating flexible and responsive web layouts as wellas common interface components.
Here are some more advantages, why one should opt for Bootstrap:

• Save lots of time — you can save lots of time and efforts using the Bootstrap
predefined design templates and classesand concentrate on other
development work.
• Responsive features — Using Bootstrap you can easily
create responsive designs. Bootstrap responsive featuresmake your web pages
to appear more appropriately on
different devices and screen resolutions without any changein markup.
 15
• Consistent design — All Bootstrap components share the same design

templates and styles through a central library,

so that the designs and layouts of your web pages areconsistent throughout your
development.
• Easy to use — Bootstrap is very easy to use. Anybody withthe basic working
knowledge of HTML and CSS can start development with Bootstrap.

• Compatible with browsers — Bootstrap is created withmodern browsers

in mind and it is compatible with all
modern browsers such as Mozilla Firefox, Google Chrome,etc
• Open Source — And the best part is, it is completely free todownload and use

Future Scope
One thing we can all agree on is that we need to understand whatwill happen in the
future to
Bootstrap, for the sake of web development’s future. Bootstrap’sGithub states that as
of now (insert date) they’re almost done
with V4.1 which is concerned with a constant grid system, utilities, and small new
features. They’re also working on V4.2 that promises to bring enhancements to
forms and components.
The conclusion we can draw from this is that the people behind Bootstrap are very invested in it,
super hard working and definitelycontinuously. That’s the first good sign. Having Twitter behind is the
other. Let’s face it, any framework backed by a huge company does well. And it makes all the sense in the
world.

16
PROJECT BY USING BOOSTRAP:
Source Code-

17
18
19
Output:
20
21
Tailwind Css:

Tailwind CSS can be used to style websites in the fastest and easiest way. Tailwind
CSS is basically a utility-first CSS framework for rapidlybuilding custom user
interfaces. It is a highly customizable, low
 level CSS framework that gives you all of the building blocks you need to build bespoke
designs without any annoying opinionated styles you have tofight to override. The beauty of
this thing called tailwind is it doesn’t impose design specifications or how your site should
look, you simply bring tiny components together to construct a user interface that is unique.
WhatTailwind simply does is take a ‘raw’ CSS file, process this CSS file over
aconfiguration file, and produce an output.

Why Tailwind CSS?

• The faster UI building process
• It is a utility-first CSS framework which means we can use utilityclasses to
build custom designs without writing CSS as in the traditional approach.
• No more silly names for CSS classes and Id.
• Minimum lines of Code in CSS file.
• We can customize the designs to make the components.
• Makes the website responsive.
• Makes the changes in the desired manner.

CSS is global in nature and if make changes in the file the propertyis changed in all
the HTML files linked to it. But with the help of Tailwind CSS, we can use utility
classes and make localchanges.

Installation: There are two ways to use the CSS we can install them on ourserver or we
can use the CDN link as well.

Method 1: Install Tailwind via npm

Step 1: npm init -y
Step 2: npm install tailwindcss
Step 3: Use the @tailwind directive to inject Tailwind’s base, components, and
utility styles into your CSS file.

22
Javascript:

JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming

language with first-class functions. While it is most well-known as the scripting language
for Web pages, many non-browser environments also use it, such
as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,multi
paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and
declarative (e.g. functional programming) styles.
 JavaScript's dynamic capabilities include runtime object construction, variable parameter
lists, function variables, dynamic script creation (via eval), object introspection (via
for...in and Object utilities), and source-code recovery (JavaScriptfunctions store their
source text and can be retrieved through toString()).

This section is dedicated to the JavaScript language itself, and not the parts that arespecific
to Web pages or other host environments. For information about APIs that are specific to
Web pages, please see Web APIs and DOM.

The standards for JavaScript are the ECMAScript Language Specification (ECMA-262)and
the ECMAScript Internationalization API specification (ECMA-402). As soon as one
browser implements a feature, we try to document it. This means that cases where some
proposals for new ECMAScript features have already been implementedin browsers,
documentation and examples in MDN articles may use some of those new features. Most of
the time, this happens between the stages 3 and 4, and is usually before the spec is officially
published.

Do not confuse JavaScript with the Java programming language — JavaScript is not
"Interpreted Java". Both "Java" and "JavaScript" are trademarks or registered trademarks
of Oracle in the U.S. and other countries. However, the two programming languages have
very different syntax, semantics, and use.

23
List Of topics cover in Javascript:
Project:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Type your
24
<title>Calculator</title>
</head>

<body>
<div class="calculator-container">
<div class="calculator">
<input type="text" disabled id="number-input" /> <input
placeholder="ANS" type="text" disabled id="result" /> <div
class="buttons">
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
-
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
*
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
/
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
7
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
8
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>

9
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons">

4
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
5
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
6
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
1
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
2
</div>
<div
onclick="handleClickButton(this)"
class="col col-3 cal-buttons"
>
3
</div>
</div>
<div class="row">
<div
onclick="handleClickButton(this)"
class="col col-4 cal-buttons"
>
0
</div>
<div onclick="reset()" class="col col-8 cal-

buttons">Clear</div> 26

</div>
</div>
</div>
</div>
<script src="script.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/
bootstrap.bundle.min.js" integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN
" crossorigin="anonymous"
></script>
</body>
 </html>

Javascript:

const input = document.getElementById("number-input");

const result = document.getElementById("result");

function handleClickButton(el) {
console.log(el.innerText);
const exp = `${input.value}${el.innerText}`;
input.value = exp;
if (["+", "-", "*", "/"].includes(el.innerText)) return;
result.value = eval(exp);
}

function reset() {
input.value = "";
result.value = "";
}

Output:

27
React JS:

React is a JavaScript-based UI development library. Facebook and an open-source

developer community run it. Although React is a library rather than a language, it is widely
used in web development. library fist appeared in May 2013 and is now one of the most
commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux and
React Native, beyond mere UI.

ReactJS History:
 When compared to other technologies on the market, React is a new technology. Jordan
Walke, a software engineer at Facebook, founded the library in 2011, giving itlife. the likes
of XHP, a straightforward HTML component framework for PHP, have an influence on
React. Reacts newsfeed was its debut application in 2011. Later, Instagram picks it up and
incorporates it into their platform.

Why React?

React’s popularity today has eclipsed that of all other front-end

developmentframeworks. Here is why:

Easy creation of dynamic applications: React makes it is easy to create dynamic web
applications because it requires less coding and offers more functionality, asopposed
to JavaScript, where coding often gets complex very quickly.

Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual
DOM companies the components’ previous states and updates only the items in the Real DOM that
were changed, instead of updating allof the components again, as conventional web applications do.

28
It can be used for the development of both web and mobile apps: We already know that
React is used foí the development of web applications, but that’s not allit can do. here is a
framework called React Native, derived from React itself, that is hugely popular and is used
for creating beautiful mobile applications. So, in reality, React can be used for making both
web and mobile applications.

Dedicated tools for easy debugging: Facebook has released a Chrome extensionthat can be
used to debug React applications. this makes the process of
debugging React web applications faster and easier.

the above reasons more than justify the popularity of the React library and why it is
being adopted by a large number of organizations and businesses. Now
let’sfamiliarize ourselves with Reacts features.

List of topic done in React:

ReactJS Introduction to JSX

ReactJS Rendering Elements
ReactJS Components
ReactJS Components – Set 2
 ReactJS Props – Set 1
ReactJS Props – Set 2
ReactJS State in React
ReactJS Lifecycle of Components
ReactJS Conditional Rendering
ReactJS Lists
ReactJS Keys
ReactJS forms

29
Firebase:

What is Google Firebase? It is a mobile application development platform from Google with
powerful features for developing, handling, and enhancingapplications. Firebase is a backend
platform for building web and mobile applications. (1)

Firebase is fundamentally a collection of tools developers can rely on,creating

applications and expanding them based on demand.

Firebase aims to solve three main problems for developers:

Build an app, fast

Release and monitor an app with confidence
Engage users

What are Firebase use cases?

The Firebase use cases are pretty broad and include:

MVPs – Minimum viable products

Realtime applications
Chat and messaging apps
Ads optimization based on user behavior
 Sharing photos
User retention optimization via machine learning
Business applications

30
Node + Express JS:

Node (or more formally Node.js) is an open-source, cross-platform runtime environment that
allows developers to create all kinds of server-side tools and applications in JavaScript. The
runtime is intended for use outside of a browser context (i.e. running directly on a computer
or server OS). As such, the environment omits browser-specific JavaScript APIs and adds
support for more traditional OS APIs including HTTP and file system libraries.

From a web server development perspective Node has a number of benefits:

• Great performance! Node was designed to optimize throughput and scalability in web
applications and is a good solution for many common web-development problems (e.g. real
time web applications).
• Code is written in "plain old JavaScript", which meansthat less time is spent dealing with

"context shift" between languages when you're writing both client-side and server-side code. •
JavaScript is a relatively new programming language and benefits from improvements in
language design when compared to other traditional web-server languages (e.g. Python,
PHP, etc.) Many other new and popular languages compile/convert into JavaScript so you
can also use TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc.
• The node package manager (npm) provides access to hundreds of thousands of reusable
packages. It also has best-in-class dependency resolution and can also be used to
automate most of the build toolchain.
• Node.js is portable. It is available on Microsoft Windows, macOS, Linux, Solaris, FreeBSD,
OpenBSD, WebOS, and NonStop OS. Furthermore, it is well-supported by many web hosting
providers, that often provide specific infrastructure and documentation for hosting Node
sites.
 • It has a very active third party ecosystem and developer community, with lots of people who
are willing to help.

You can use Node.js to create a simple web server using the Node HTTP package.

Hello Node.js

The following example creates a web server that listens for any kind of HTTP request on the
URL http://127.0.0.1:8000/ — when a request is received, the script will respond with the
string: "Hello World". If you have already installed node, you can follow these steps to try
out the example:

1. Open Terminal (on Windows, open the command line utility)

2. Create the folder where you want to save the program, for example, test-node and then
enterit by entering the following command into your terminal:
BASHCopy to Clipboard
cd test-node
3. Using your favorite text editor, create a file called hello.js and paste the following code into it:
JSCopy to Clipboard
// Load HTTP module

31
const http = require("http");

const hostname =
"127.0.0.1";const port =
8000;

// Create HTTP server

const server = http.createServer(function (req, res) {
// Set the response HTTP header with HTTP status and
Content typeres.writeHead(200, { "Content-Type":
"text/plain" });

// Send the response body "Hello

World"res.end("Hello World\n");
});

// Prints a log once the server starts

listeningserver.listen(port, hostname,
function () {
console.log(`Server running at http://${hostname}:${port}/`);
});

4. Save the file in the folder you created above.

5. Go back to the terminal and type the following command:

BASHCopy to Clipboard
node hello.js

Finally, navigate to http://localhost:8000 in your web browser; you should see the text "Hello
World" in the upper left of an otherwise empty web page.
Web Frameworks

Other common web-development tasks are not directly supported by Node itself. If you
want to add specific handling for different HTTP verbs (e.g. GET, POST, DELETE, etc.),
separately handle requests at different URL paths ("routes"), serve static files, or use
templates to dynamically create the response, Node won't be of much use on its own. You
will either needto write the code yourself, or you can avoid reinventing the wheel and use a
web framework!

32
Introducing Express

Express is the most popular Node web framework, and is the underlying library for a number
of other popular Node web frameworks. It provides mechanisms to:

Write handlers for requests with different HTTP verbs at different URL paths
(routes). Integrate with "view" rendering engines in order to generate responses by
inserting data intotemplates.
Set common web application settings like the port to use for connecting, and
the location oftemplates that are used for rendering the response.
Add additional request processing "middleware" at any point within the
request handlingpipeline.

While Express itself is fairly minimalist, developers have created compatible middleware
packages to address almost any web development problem. There are libraries to work with
cookies, sessions, user logins, URL parameters, POST data, security headers, and many
more.

You can find a list of middleware packages maintained by the Express team at Express
Middleware (along with a list of some popular 3rd party packages).

How popular are Node and Express?

The popularity of a web framework is important because it is an indicator of whether it

will continue to be maintained, and what resources are likely to be available in terms of
documentation, add-on libraries, and technical support.

There isn't any readily-available and definitive measure of the popularity of server-side
frameworks (although you can estimate popularity using mechanisms like counting the
number of GitHub projects and StackOverflow questions for each platform). A better
question is whether Node and Express are "popular enough" to avoid the problems of
unpopular platforms. Are they continuing to evolve? Can you get help if you need it? Is there
 an opportunity for you to get paid work if you learn Express?

Based on the number of high profile companies that use Express, the number of people
contributing to the codebase, and the number of people providing both free and paid for
support, then yes, Express is a popular framework!

33
What does Express code look like?

In a traditional data-driven website, a web application waits for HTTP requests from the web
browser (or other client). When a request is received the application works out what action is
needed based on the URL pattern and possibly associated information contained in POST
dataor GET data. Depending on what is required it may then read or write information from
a database or perform other tasks required to satisfy the request. The application will then

return a response to the web browser, often dynamically creating an HTML page for the
browser to display by inserting the retrieved data into placeholders in an HTML
template.

Express provides methods to specify what function is called for a particular HTTP verb
(GET, POST, SET, etc.) and URL pattern ("Route"), and methods to specify what
template
("view") engine is used, where template files are located, and what template to use to render
a response. You can use Express middleware to add support for cookies, sessions, and users,
getting POST/GET parameters, etc. You can use any database mechanism supported by Node
(Express does not define any database-related behavior).

The following sections explain some of the common things you'll see when working
with Express and Node code.
34