Full Stack Web Development - IT3501 - Notes - Unit 1 - Basics of Full Stack
Full Stack Web Development - IT3501 - Notes - Unit 1 - Basics of Full Stack
Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics - GE3451
I - HS3152 MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester
4th Semester
- MA3151 MA3251 Computer Organization
1st Semester
2nd Semester
Computer Networks -
CS3591
Object Oriented
Full Stack Web Software Engineering - Human Values and
5th Semester
8th Semester
6th Semester
Elective 1 Elective-5
Management Elective
Elective-6
Elective 2
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
Theory of Computation Computer Graphics Distributed Systems
Mobile Computing Compiler Design Digital Signal Processing
Artificial Intelligence Software Testing Grid and Cloud Computing
Data Ware Housing and Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering
lOMoARcPSD|45374298
www.BrainKart.com
IT3501- Full Stack Web Development
Unit - I
Web:
The full form of WWW is the World Wide Web. WWW is also called a Web
and it is a catalogue of an order of all websites connected to the worldwide
Internet. It is an information system in which linked hypertext data and resources
are accessed over the Internet.
In simply it refers to Websites and Web Pages or anything that works over
the internet.
Web Development:
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
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).
Bootstrap 4
Bootstrap 5
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.
Full-stack Development
When the web solution is developed by a single developer who has experience
with both front-end and back-end, it is called full-stack development.
Web development frameworks enable developers to build applications that can run
on well-known technology stacks such as
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
the Linux, Apache, MySQL and PHP (LAMP) stack. Most frameworks provide a
wide range of features and functionality that help streamline application
development.
Developers can build applications faster and more efficiently because they
write less code, reuse code, and contend with fewer errors and bugs.
Many frameworks are open source and backed by strong developer
communities that help to optimize the code and reduce errors, leading to better
performance and reliability, as well as easier maintenance.
Many web development frameworks are widely used, adhere to industry
standards and are backed by strong developer communities. The continuous
vetting and improvements that this provides results in better security.
Developers also avoid many of the risks that come with building applications
from scratch.
Web development frameworks speed up application development, reduce
errors, simplify debugging and increase reliability. Many of them are also open
source and free. Taken together, the factors can significantly reduce overall
development costs.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Front-end frameworks. Also called user-side or client-side frameworks,
front-end frameworks focus on the user-facing elements of a web application.
They provide the components and templates necessary to render passive or
interactive webpages in a browser, using industry technologies such
as HTML, CSS, JavaScript and jQuery.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Web development frameworks are also distinguished from each other by their
approach to application architecture. Many web development frameworks are
based on a Model-View-Controller (MVC) architecture, which separates the web
application into three layers.
The Model layer is concerned with the back-end business logic and data.
The View layer focuses on the user interface and facilitating interactivity.
The Controller layer acts as an interface between the model and view layers,
processing the requests between them.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Web frameworks provide pre-written code libraries, modules, and guidelines to developers, which can
greatly accelerate the creation process. Assuring scalability, maintainability, and adherence to industry
norms for the code also helps.
Reinforces Security
Web frameworks provide developers with built-in security features and guidelines to help reinforce
security best practices. This helps ensure that web applications are secure and less vulnerable to attacks.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Users
USER:
Web Application
A web application is software that runs in your web browser. Businesses have to
exchange information and deliver services remotely. They use web applications to
connect with customers conveniently and securely. The most common website
features like shopping carts, product search and filtering, instant messaging, and social
media newsfeeds are web applications in their design. They allow you to access
complex functionality without installing or configuring software.
Web apps can be accessed from all web browsers and across various personal and
business devices. Teams in different locations can access shared documents, content
management systems, and other business services through subscription-based web
applications.
2. Efficient development
As detailed, the development process for web apps is relatively simple and cost-
effective for businesses. Small teams can achieve short development cycles, making
web applications an efficient and affordable method of building computer programs.
In addition, because the same version works across all modern browsers and devices,
you won't have to create several different iterations for multiple platforms.
3. User simplicity
Web apps don't require users to download them, making them easy to access while
eliminating the need for end-user maintenance and hard drive capacity. Web
applications automatically receive software and security updates, meaning they are
always up to date and less at risk of security breaches.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
4. Scalability
Businesses using web apps can add users as and when they need, without additional
infrastructure or costly hardware. In addition, the vast majority of web application
data is stored in the cloud, meaning your business won't have to invest in additional
storage capacity to run web apps.
Workplace collaboration web apps allow team members to access documents, shared
calendars, business instant messaging services, and other enterprise tools.
Ecommerce web applications
Ecommerce web apps such as Amazon.com enable users to browse, search, and pay
for products online.
Email web applications
Webmail apps are widely used by enterprises and personal users to access their
emails. They often include other communication tools such as instant messaging and
video meetings.
Online banking web applications
Business and personal users widely use online banking web apps to access their
accounts and other financial products such as loans and mortgages.
Technical documentation
You can use web applications to create and share technical documentation like user
manuals, how-to guides and device specifications
Web Server
The term web server can refer to hardware or software, or both of them working
together.
1. On the hardware side, a web server is a computer that stores web server
software and a website's component files (for example, HTML documents,
images, CSS stylesheets, and JavaScript files). A web server connects to the
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Internet and supports physical data interchange with other devices connected
to the web.
2. On the software side, a web server includes several parts that control how
web users access hosted files. At a minimum, this is an HTTP server. An
HTTP server is software that understands URLs (web addresses)
and HTTP (the protocol your browser uses to view webpages). An HTTP
server can be accessed through the domain names of the websites it stores,
and it delivers the content of these hosted websites to the end user's device.
At the most basic level, whenever a browser needs a file that is hosted on a web
server, the browser requests the file via HTTP. When the request reaches the
correct (hardware) web server, the (software) HTTP server accepts the request,
finds the requested document, and sends it back to the browser, also through HTTP.
(If the server doesn't find the requested document, it returns a 404 response
instead.)
A dynamic web server consists of a static web server plus extra software, most
commonly an application server and a database. We call it "dynamic" because the
application server updates the hosted files before sending content to your browser
via the HTTP server.
Web Browser
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
A software application used to access information on the World Wide Web is
called a Web Browser. When a user requests some information, the web browser
fetches the data from a web server and then displays the webpage on the user's
screen.
Discussed below are different web browser examples and their specific features:
1. WorldWideWeb
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
It had an advanced licensing scheme and allowed free usage for non-
commercial purposes
4. Internet Explorer
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
S.
No. Parameters Web Browser Web Server
Web Browser is an
Application program that A web server is a program or
displays a World wide web the computer that provide
1. Basics
document. It usually uses services to other programs
the internet service to access called client.
the document.
A web browser is a
The web server is responsible
programme that uses
3. Responsibility for connecting websites and
websites to search the
web browsers.
internet for information.
8. Storing data Web browser stores the Web servers provide an area to
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
S.
No. Parameters Web Browser Web Server
MVC Architecture:
Features of MVC :
It provides a clear separation of business logic, Ul logic, and input logic.
It offers full control over your HTML and URLs which makes it easy to
design web application architecture.
It is a powerful URL-mapping component using which we can build
applications that have comprehensible and searchable URLs.
It supports Test Driven Development (TDD).
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
Components of MVC :
The MVC framework includes the following 3 components:
Controller:
The controller is the component that enables the interconnection
between the views and the model so it acts as an intermediary.
The controller doesn’t have to worry about handling data logic, it
just tells the model what to do. It process all the business logic
and incoming requests, manipulate data using
the Model component and interact with the View to render the
final output.
View:
The View component is used for all the UI logic of the
application. It generates a user interface for the user. Views are
created by the data which is collected by the model component
but these data aren’t taken directly but through the controller. It
only interacts with the controller.
Model:
The Model component corresponds to all the data-related logic
that the user works with. This can represent either the data that is
being transferred between the View and Controller components or
any other business logic-related data. It can add or retrieve data
from the database. It responds to the controller’s request because
the controller can’t interact with the database by itself. The model
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
interacts with the database and gives the required data back to the
controller.
Advantages of MVC:
Codes are easy to maintain and they can be extended easily.
The MVC model component can be tested separately.
The components of MVC can be developed simultaneously.
It reduces complexity by dividing an application into three units. Model,
view, and controller.
It supports Test Driven Development (TDD).
It works well for Web apps that are supported by large teams of web
designers and developers.
This architecture helps to test components independently as all classes and
objects are independent of each other
Search Engine Optimization (SEO) Friendly.
Disadvantages of MVC:
It is difficult to read, change, test, and reuse this model
It is not suitable for building small applications.
The inefficiency of data access in view.
The framework navigation can be complex as it introduces new layers of
abstraction which requires users to adapt to the decomposition criteria of MVC.
Increased complexity and Inefficiency of data
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
The Express module acts as the webserver in the Node.js-to-Angular stack.
The fact that it is running in Node.js makes it easy to configure, implement, and
control. The Express module extends Node.js to provide several key components
for handling web requests.
This allows you to implement a running webserver in Node.js with only a
few lines of code. 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, including things like cookies and HTTP headers. The following is
a partial list of the valuable features of Express:
Angular
Angular is a client-side framework developed by Google. Angular provides
all the functionality needed to handle user input in the browser, manipulate data on
the client side, and control how 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.
Other JavaScript frameworks could be used with the Node.js platform, such
as Backbone, Ember, and Meteor.
However, Angular has the best design, feature set, and trajectory at this
writing.
Here are some of the 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. In fact, the language often forces you to do
so when creating custom services.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
■ 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
Node.js is a development framework based on Google’s V8 JavaScript
engine. Therefore, Node.js code is written in JavaScript and then compiled into
machine code by V8 to be executed.
Many of your backend services can be written in Node.js, as can the server-
side scripts and any supporting web application functionality. The nice thing about
Node.js is that it is all just JavaScript, so you can easily take functionality from a
client-side script and place it in a server-side script.
Also, the web server can run directly within the Node.js platform as a
Node.js module, so it makes it much easier than, say, Apache at wiring up new
services or server-side scripts.
The following are just a few reasons why Node.js is a great framework to
start from:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
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: Let’s face it, 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
MongoDB is an agile and scalable NoSQL database. The name Mongo
comes from “humongous.”
It is based on the NoSQL document store model, meaning that data is stored
in the database as a form of JSON objects rather than the traditional columns and
rows of a relational database.
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.
This book covers using the MongoDB driver library to access MongoDB
from Node.js. 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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
lOMoARcPSD|45374298
www.BrainKart.com
■ No SQL injection: MongoDB is not susceptible to SQL injection (putting
SQL statements in web forms or other input from the browser that compromises
the DB security) because objects are stored as objects, not using SQL strings.
React
React anchors the MERN stack. In some sense, it is the defining component
of the MERN stack.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes
Click on Subject/Paper under Semester to enter.
Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics - GE3451
I - HS3152 MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester
4th Semester
- MA3151 MA3251 Computer Organization
1st Semester
2nd Semester
Computer Networks -
CS3591
Object Oriented
Full Stack Web Software Engineering - Human Values and
5th Semester
8th Semester
6th Semester
Elective 1 Elective-5
Management Elective
Elective-6
Elective 2
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
Theory of Computation Computer Graphics Distributed Systems
Mobile Computing Compiler Design Digital Signal Processing
Artificial Intelligence Software Testing Grid and Cloud Computing
Data Ware Housing and Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering