IT 22511 FULL

STACK WEB
DEVELOPMENT
III year/5 semester
Full Stack Web
Developer
• A full stack web developer is a person who can develop both client
and server software.
• In addition to mastering HTML and CSS, he/she also knows how to:
• Program a browser (like using JavaScript, jQuery, Angular, or Vue)
• Program a server (like using PHP, ASP, Python, or Node)
• Program a database (like using SQL, SQLite, or MongoDB)
Skills required for a full stack
developer.
VISION
To be an institution of eminence of optimal human
development, excellent engineering education and
pioneering research towards developing a technically-
empowered humane society.
MISSION
To transform the (rural) youth into top class professionals and
technocrats willing to serve local and global society with ethical
integrity, by providing vibrant academic experience of learning,
research and innovation and stimulating opportunities to develop
personal maturity and professional skills, with inspiring and high caliber
faculty in a quality and serene infrastructural environment.
DEPARTMENT VISION
To be an institution of eminence of optimal human development,
excellent engineering education and pioneering research towards
developing a technically–empowered humane society
DEPARTMENT MISSION
To transform the (rural) youth into top class professionals and technocrats
willing to serve local and global society with ethical integrity, by
providing vibrant academic experience of learning, research and
innovation and stimulating opportunities to develop personal maturity
and professional skills, with inspiring and high caliber faculty in a quality
and serene infrastructural environment.
 SYLLAB
UNIT I BASICS OF FULL STACK 6 US
Understanding the Basic Web Development Framework - User -
Browser – Webserver – Backend Services – MVC Architecture -
Understanding the different stacks –The role of Express – Angular –
Node – Mongo DB – React
UNIT II NODE JS 6
Basics of Node JS – Installation – Working with Node packages – Using
Node package manager – Creating a simple Node.js application – Using
Events.
UNIT III MONGO DB 6
Understanding NoSQL and MongoDB – Building MongoDB Environment
– User accounts – Access control – Administering databases – Database
connectivity.
UNIT IV EXPRESS AND ANGULAR 6

Implementing Express in Node.js – Configuring routes – Using Request and

Response objects–Angular – Typescript - Implementing Classes, Modules,
Functions – Angular Components
UNIT V REACT 6

MERN STACK – Basic React applications – React Components –– React State –

Event Handling, Stateless Components, Designing Components – Express REST
APIs
TEXT BOOKS
1. Brad Dayley, Brendan Dayley, Caleb Dayley, ‘Node.js, MongoDB and Angular Web
Development’, Addison-Wesley, Second Edition, 2018
2. Vasan Subramanian, ‘Pro MERN Stack, Full Stack Web App Development with Mongo,
Express, React, and Node’, Second Edition, Apress, 2019.
REFERENCES
3.Chris Northwood, ‘The Full Stack Developer: Your Essential Guide to the Everyday
Skills Expected of a Modern Full Stack Web Developer’, Apress; 1st edition, 2018
4. Kirupa Chinnathambi, ‘Learning React: A Hands-On Guide to Building Web Applications
Using React and Redux’, Addison-Wesley Professional, 2nd edition, 2018
3. https://www.tutorialspoint.com/the_full_stack_web_development/index.asp
4. https://www.coursera.org/specializations/full-stack-react
5. https://www.udemy.com/course/the-full-stack-web-development
COURSE OUTCOMES
• CO1: Understand the various stacks available for web application
development
• CO2: Use Node.js for application development
• CO3: Develop applications with MongoDB
• CO4: Use the features of Angular and Express
• CO5: Develop React applications
PO1: Engineering Knowledge: Apply knowledge of mathematics, natural science, computing,
engineering fundamentals and an engineering specialization as specified in WK1 to WK4
respectively to develop to the solution of complex engineering problems. (Cognitive
Level:Apply)
PO2: Problem Analysis: Identify, formulate, review research literature and analyze complex
engineering problems reaching substantiated conclusions with consideration for sustainable
development. (WK1 to WK4) (Cognitive Level:Analyze)
PO3: Design/Development of Solutions: Design creative solutions for complex engineering
problems and design/develop systems/components/processes to meet identified needs with
consideration for the public health and safety, whole-life cost, net zero carbon, culture, society
and environment as required. (WK5) (Cognitive Level: Evaluate/Create)
PO5: Engineering Tool Usage: Create, select and apply appropriate
techniques,resources and modern engineering & IT tools, including
prediction and modelling recognizing their limitations to solve complex
engineering problems.(WK2 and WK6) (Psychomotor: Mechanism, Complex
Overt Response, Adaptation and Origination)

PO6: The Engineer and The World: Analyze and evaluate societal and
environmental aspects while solving complex engineering problems for its
impact on sustainability with reference to economy, health, safety, legal
framework, culture and environment. (WK1, WK5, and WK7).
Mapping of Course Outcomes to Program Outcomes

Program Outcomes
CO
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

IT22511. 1 2 3 3 - 2 2 - - - - - -

IT22511. 2 2 3 3 - 2 2 - - - - - -

IT22511. 3 2 3 3 - 2 2 - - - - - -

IT22511. 4 2 3 3 - 2 2 - - - - - -

IT22511. 5 2 3 3 - 2 2 - - - - - -

IT22511 2 3 3 - 2 2 - - - - - -
UNIT 1 BASICS OF FULL
STACK
Understanding the Basic Web Development Framework - User -
Browser – Webserver – Backend Services – MVC Architecture -
Understanding the different stacks –The role of Express – Angular –
Node – Mongo DB – React
Popular stacks
MEAN stack includes the following:
• Front-end framework: JavaScript and AngularJS
• Database: MongoDB
• Web-framework: Node.js
• Back-end web framework: Express.js
The LAMP stack is made up of
• Operating System: Linux
• Web Server: Apache
• Front-end framework: JavaScript
• Database: MySQL
• Programming and Development: PHP
MERN stack, like MEAN stack, consists of JavaScript-
based technologies.
• These are the main components of MERN stack:
• Database: MongoDB
• Web Programming Framework: Express
• Building UI: Node.js and React
Full stack web development
road map
Basic Web Development
Framework
• Objective - To understand the basic web development frameworks.
• Course Outcome - Students can able to explain the basic
web development frameworks.

• A web development framework is a set of resources and tools to build

and manage web applications, web services and websites.
• It is developed by the software developers.
• Web development frameworks are also referred to as web application
frameworks or simply web frameworks.
• The main components of any given web framework are the user,
browser, webserver, and backend services.
Frontend Development
The part of a website where the user interacts directly is termed as front end. It is also
referred to as the ‘client side’ of the application.
Popular Frontend Technologies

• HTML: HTML stands for HyperText Markup Language. It is used to design the front
end portion of web pages using markup language. It acts as a skeleton for a website
since it is used to make the structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style
our website.
• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to
our website.
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for
developing responsive, mobile-first websites. Nowadays, the websites are perfect
for all browsers (IE, Firefox, and Chrome) and for all sizes of screens
(Desktop, Tablets, Phablets, and Phones).
Backend Development
Backend is the server side of a website. It is part of the website that users
cannot see and interact with. It is the portion of software that does not come in direct
contact with the users. It is used to store and arrange data.

Popular Backend Technologies

• PHP: PHP is a server-side scripting language designed specifically for web

development.
• Java: Java is one of the most popular and widely used programming
languages. It is highly scalable.
• Python: Python is a programming language that lets you work quickly and
integrate systems more efficiently.
• Node.js: Node.js is an open source and cross-platform runtime environment for
executing JavaScript code outside a browser.
What are the web framework types?
• Front-end frameworks. Also called user-side or client-side frameworks, front-end frameworks focus on the
user-facing elements of a web application.
Back-end frameworks.
• Back-end frameworks. These frameworks, also called server-side frameworks, target the server and back-
end components that support a web application. They're responsible for mapping URLs, processing HTTP
requests, interfacing with data sources and supporting other back-end operations.
User
• fundamental part of all
websites
• User expectations - developing
a good website.
• Users accept “world-
wide- wait,” but no longer.
• They expect websites to
behave closer to computers
and mobile applications.
• role - to sit on the visual
output and interaction input of
webpages.
Browser
• The browser plays three roles in
the web framework.
• First, it provides
communication to and from the
webserver.
• Second, it interprets the data
from the server and renders
it into the view that the
user actually sees.
• Finally, the browser handles user
interaction through the keyboard,
mouse, touchscreen, or other
input device and takes the
appropriate action.
Browser to Webserver Communication
Browser-to-webserver communication consists of a
series of requests using the HTTP and HTTPS
protocols.
The browser makes three main types of requests to
the server:
GET: The GET request is typically used to retrieve
data from the server, such as .html files, images, or
JSON data.
POST: POST requests are used when sending data to
the server, such as adding an item to a shopping cart
or submitting a web form.
AJAX: Asynchronous JavaScript and XML (AJAX) is
actually just a GET or POST request done directly by
JavaScript running in the browser.
 What is the DOM?
The Document Object Model (DOM) is a programming interface for web documents. It represents
the page so that programs can change the document structure, style, and content.

• What is the difference between HTML and DOM?

• In short, HTML represents the initial page content and the DOM (Document Object
Model) represents the current content in a tree of objects.
Rendering the Browser View
• The browser reads data from the initial URL and then renders the
HTML document to build a Document Object Model (DOM).
• The DOM is a tree structure object with the HTML document as the
root. The structure of the tree basically matches the structure of the
HTML document.
• For example, the document will have html as a child, and html will have
head and body as children, and body may have div, p, or other elements as
children, like this:
• document
• + html
• + head
• + body
• + div
• +p
The following are the most common types of data the browser uses.
• HTML files: These provide the fundamental structure of the DOM.
• CSS files: These define how each of the elements on the page is to be
styled; for example, font, color, borders, and spacing.
• Client-side scripts: These are typically JavaScript files. They can
provide added functionality, manipulate the DOM to change the look
of the webpage, and provide any necessary logic required to display
the page.
• Media files: Image, video, and sound files are rendered as part of the
webpage.
• Data: Any data, such as XML, JSON, or raw text, can be provided by
the webserver as a response to an AJAX request.
• HTTP headers: The HTTP protocol defines a set of headers that can be
used by the browser and client-side scripts to define the behavior of
the webpage
• User Interaction
The user interacts with the
browser via input devices such as
mice, keyboards, and
touchscreens.
The browser has an
elaborate event system that
captures these user input events
and then takes the appropriate
action.
Webserver
• The webserver’s main focus is handling
requests from browsers.
• Most out-of-the-box webservers, such as
Apache and IIS, are made to serve static
files such as .html, .css, and media files.
• A server-side program can be executed by
the webserver to perform the task the
browser is requesting.
• These can be written in PHP, Python, C, C++,
C#, Java, … the list goes on and on.
• Webservers such as Apache and IIS
provide mechanisms to include server-side
scripts.
Backend Services
• Run behind the webserver and provide
data used to build responses to the
browser.
• Common type of backend service is a
database that stores information.
• When a request comes in from
browser that requires information from
the
the database or other backend service,
the server-side script connects to the
database, retrieves the information,
formats it, and then sends it back to the
browser.
• Conversely, when data comes in from
a web request that needs to be stored
in the database, the server-side
script connects to the database and
updates the data.
MVC
Objective : To understand the working principle of Model View Controller
Architecture
Architecture
Course Outcome : Students are able to explain the use of model view
architecture
The MVC pattern is a software design pattern for web applications. The MVC
framework separates an application into three main components: models, views,
and controllers.
MVC (Model-View-Controller) is a software architectural pattern that separates
an
application into three interconnected components:
1. Model: Represents the data and business logic of the application. It manages
the data and performs operations on it.
2. View: Responsible for rendering the user interface (UI) and displaying data to
the user.
3. Controller: Acts as an intermediary between the Model and View. It receives
input from the user, communicates with the Model to perform operations, and
Analogy to help you understand
MVC:
-
• Model: A chef (data and business logic)
• View: A restaurant's menu (user interface)
• Controller: A waiter (intermediary between chef and menu)

• Benefits
• Reusability
• Flexibility
• Easy maintenance
• scalability
DIFFERENT
Objective : To understand various stacks in web development framework.
STACKS
Course Outcome : Students are able to explain various stacks in web
development framework.

• The most common version of the stack is the Node.js-to-Angular

stack
comprised of MongoDB, Express, Angular, and Node.js.
• In the Node.js-to-Angular stack,
• Node.js provides the fundamental platform for development.
• The backend services and server-side scripts are all written in Node.js.
• MongoDB provides the data store for the website
• The webserver is defined by Express
• The view in the browser is defined and controlled using the Angular
framework.
• Angular is an MVC framework where the model is made up of JSON or
JavaScript objects, the view is HTML/CSS, and the controller is made up of
 Expre
ss : To understand the role of express.
Objective
Course Outcome : Students are able to explain the role of express and its
features.
• The Express module acts as the webserver in the Node.js-to-Angular
stack.
• The Express module extends Node.js to provide several key components for
handling web requests.
• For example, the Express module provides the ability to easily set
up destination routes (URLs) for users to connect to.
• It also provides great functionality on working with the HTTP request and
response objects.
• It relies on other modules called middleware to provide the functionality
that most applications will need.
Features of Express

Route management: Express makes it easy to define routes (URL

endpoints) that tie directly to Node.js script functionality on the server.
Error handling: Express provides built-in error handling for documents
not found and other errors.
Easy integration: An Express server can easily be implemented behind
an existing reverse proxy system such as Nginx or Varnish. This allows it
to be easily integrated into your existing secured system.
Cookies: Express provides easy cookie management.
Session and cache management: Express also enables session
management and cache management.
• At the heart of Express is a router, which essentially takes a client
request, matches it against any routes that are present, and executes
the handler function that is associated with that route.
• The handler function is expected to generate the
response.
appropriate
• A route specification consists of an HTTP method (GET, POST, etc.), a
path specification that matches the request URI, and the route
handler.
• Express application - created using the express() function.
• Middleware is installed for handling static files.
• A middleware function deals with any request matching the path
specification, regardless of the HTTP method.
Routing: When a request is received, the first thing that Express does is
match the request to one of the routes. The request method is
matched against the route’s method.
Route parameters are named segments in the path specification that
match a part of the URL.
Route Lookup: Multiple routes can be set up to match different URLs
and patterns. The router does not try to find the best match; instead, it
tries to match all routes in the order in which they are installed. The
first match is used.
Angul
ar
Objective : To understand the role of angular.
Course Outcome : Students are able to explain the role of angular and
its benefits.

• Angular is a client-side framework developed by Google.

• It provides all the functionality needed to handle user input in
browser, manipulate data on the client side, and control how
the
elements are displayed in the browser view.
• It is written using TypeScript. The entire theory behind Angular is to
provide a framework that makes it easy to implement web
applications using the MVC framework.
Benefits of Angular
Data binding: Angular has a clean method to bind data to HTML elements
using its powerful scope mechanism.
Extensibility: The Angular architecture allows you to easily extend almost
every aspect of the language to provide your own custom implementations.
Clean: Angular forces you to write clean, logical code.
Reusable code: The combination of extensibility and clean code makes it
easy to write reusable code in Angular.
Support: Google is investing a lot into this project, which gives it an
advantage over other similar initiatives.
Compatibility: Angular is based on TypeScript, which makes it easier to begin
integrating Angular into your environment and to reuse pieces of your
existing code within the structure of the Angular framework.
Node.js
Objective : To understand the role of Node Js.
Course Outcome : Students are able to explain the role of Node js and its
benefits.

Node.js is a development framework and it’s not a programming language.

Node.js is an open-source, cross-platform runtime environment for
executing JavaScript code.
Node.js is just JavaScript, so you can easily take functionality from a client-
side script and place it in a server-side script.
Also, the webserver can run directly within the Node.js platform as a
Node.js module, so it makes it much easier than other services.
The following are just a few reasons why Node.js is a great framework
to start from:
JavaScript end-to-end: One of the biggest advantages to Node.js is that
it allows you to write both server- and client-side scripts in JavaScript.
There have always been difficulties in deciding where to put scripting
logic. Too much on the client side makes the client cumbersome and
unwieldy, but too much on the server side slows down web
applications and puts a heavy burden on the webserver.
Event-driven scalability: Node.js applies a different logic to handling
web requests. Rather than having multiple threads waiting to process
web requests, they are processed on the same thread using a basic
event model. This allows Node.js webservers to scale in ways that
traditional webservers never can.
Extensibility: Node.js has a great following and an active development
community. New modules to extend Node.js functionality are being
developed all the time. Also it is simple to install and include new
modules in Node.js, making it easy to extend a Node.js project to
include new functionality in minutes.
Time: Time is valuable. Node.js is super easy to set up and develop in.
In only a few minutes, you can install Node.js and have a working
webserver.
MongoDB
Objective : To understand the role of MongoDB.
Course Outcome : Students are able to explain the role of MongoDB
and its features.
• MongoDB is an agile and scalable NoSQL database.
The name Mongo comes from “humongous.”
• It is based on the NoSQL document store model.
• MongoDB provides great website backend storage for high traffic
websites that need to store data such as user comments, blogs,
or other items because it is fast, scalable and easy to implement.
• Node.js supports a variety of DB access drivers, so the data store
could just as easily be MySQL or some other database.
 However, the following are some of the reasons that MongoDB really fits in
the Node.js stack well:

• Document orientation: MongoDB is document-oriented, the data is

stored in the database in a format that supports both server-side and client-
side scripts.
High performance: MongoDB is one of the highest-performing databases
available. Especially today when more and more people interact with
websites, it is important to have a backend that can support heavy traffic.
•High availability: MongoDB’s replication model makes it easy to
maintain scalability while keeping high performance.
•High scalability: MongoDB’s structure makes it easy to scale horizontally
by sharing the data across multiple servers.
• No SQL injection: MongoDB is not susceptible to SQL injection, because
objects are stored as objects, not using SQL strings.
Rea
Objective : To understand the role of react.
ct Outcome : Students are able to explain the role of react and its
Course
features.

• React is an open-source JavaScript library maintained by Facebook that can

be used for creating views rendered in HTML.
• Unlike AngularJS, React is not a framework. It is a library.
• Not just Facebook itself, but there are many other companies that
use React in production like Airbnb, Atlassian, Bitbucket, Disqus,
Walmart, etc
• It is a component-based front-end library responsible only for the
view layer of an MVC (Model View Controller) architecture.
• React is used to create modular user interfaces and it promotes
the development of reusable UI components that display dynamic data.
• MERN is a full-stack development framework that combines four technologies:
1. M - MongoDB (NoSQL database)
2. E - Express.js (Node.js web framework)
3. R - React.js (front-end JavaScript library)
4.N - Node.js (JavaScript runtime
environment) Here's how MERN relates to
MVC:-
• MongoDB (Model): Handles data storage and retrieval, similar to the Model
in MVC.-
• Express.js (Controller): Manages server-side logic, receives requests,
and interacts with the database, similar to the Controller in MVC.-
• React.js (View): Handles client-side rendering and user interface, similar to
the View in MVC.-
• Node.js: Provides the environment for the entire stack to run,
enabling server-side JavaScript execution.
Steps needed to execute a React
program
• Step 1: Create a new React project- Open your terminal or command prompt-
Run the command npx create-react-app my-app (replace "my-app" with
your desired app name)
• Step 2: Write your React code- Open the src folder in your project directory-
Write your React code in the App.js file (or create a new file if needed)
• Step 3: Install dependencies (if needed)- If your project requires additional
dependencies, run npm install <dependency-name>
• Step 4: Start the development server- Run the command npm start (or yarn start
if you're using Yarn)- This will start the development server and open your app
in a web browser
• Step 5: View your app- Open your web browser and navigate to
http://localhost:3000- You should see your React app running and displaying the
output
• npx and npm are two command-line tools used in JavaScript
development: npx
• 1. Stands for "Node Package Execute“
• 2. Used to execute packages without installing them locally
• 3. Allows running packages temporarily, without polluting the project's
dependencies
• 4. Ideal for one-off commands, like generating a new project or running a build tool
npm
• 1. Stands for "Node Package Manager“
• 2. Used to manage project dependencies and install packages locally
• 3. Installs packages in the project's node_modules directory
• 4. Manages package versions, dependencies, and scripts
Key Differences:-
Purpose: npx for temporary execution, npm for dependency management
Installation: npx doesn't install packages locally, npm does
Scope: npx for one-off commands, npm for project-wide dependencies
Example usage:-
npx: npx create-react-app my-app (generate a new React app without installing create-react-app
div (short for "division") is a generic container element that groups other elements together for styling, layout, or
semantic purposes.
It is a block-level element, meaning it takes up the full width of its parent element and starts on a new
line.
• The div element is commonly used for:
• 1. Wrapping content for styling or layout purposes
• 2. Creating a container for other elements
• 3. Grouping elements for semantic meaning (e.g., header, footer, navigation)
• 4. Applying CSS styles or JavaScript functionality to a group of elements
A div element typically has no visual representation itself but serves as a container for other elements.
You can think of it as a box that holds other elements together.
Example:
<div>
• <h2>Heading</h2>
• <p>Paragraph text</p>
• <img src="image.jpg" alt="Image">
</div>
In this example, the div element contains a heading, paragraph, and image, grouping them together for styling or
layout purposes.
The role of Express, Angular,
Node, MongoDB, and React
• The role of Express, Angular, Node, MongoDB, and React is a popular tech stack for
building modern web applications. Here's a brief overview of each technology and its
role:
1. Node.js: A JavaScript runtime environment for building server-side applications.
2.Express.js: A Node.js framework for building web applications,
providing a lightweight and flexible way to handle HTTP requests and routes.
3.Angular: A JavaScript framework for building client-side web applications, providing
a structured and maintainable way to build complex user interfaces.
4.React: A JavaScript library for building reusable UI components, often used as
an alternative to Angular.
5. MongoDB: A NoSQL database for storing and managing data, providing flexible
schema design and high scalability.
Benefits of using web
development framework
• Speed up application development, reduce errors, write less
code, reuse code, simplify debugging and increase reliability.
• Used and stick faster to industry standards.
• Better security
Questio
nsWeb Application Framework
1.
2. GET request
3. POST request
4. AJAX
5. Example of MVC framework
6. Webserver
7. Node.js is written in???
8. MongoDB based on???
9. React
Class Test 1
1. Define React
2. Define MongoDB
3. Define Express
4. Define NodeJS
5. Explain MVC architecture