WEB PROGRAMMING WITH MEAN

UNIT-I

Architecture of WWW:
The World Wide Web is abbreviated as WWW and is commonly known as the
web. The WWW was initiated by CERN (European library for Nuclear Research)
in 1989.
WWW can be defined as the collection of different websites around the world,
containing different information shared via local servers(or computers).
The basic model of how the web works are shown in the figure below. Here the
browser is displaying a web page on the client machine. When the user clicks on
a line of text that is linked to a page on the abd.com server, the browser follows
the hyperlink by sending a message to the abd.com server asking it for the page.

Working of WWW: The World Wide Web is based on several different

technologies: Web browsers, Hypertext Markup Language (HTML) and
Hypertext Transfer Protocol (HTTP).
A Web browser is used to access web pages. Web browsers can be defined as
programs which display text, data, pictures, animation and video on the Internet.
Hyperlinked resources on the World Wide Web can be accessed using software
interfaces provided by Web browsers. Initially, Web browsers were used only for
surfing the Web but now they have become more universal. Web browsers can be
used for several tasks including conducting searches, mailing, transferring files,
and much more. Some of the commonly used browsers are Internet Explorer,
Opera Mini, and Google Chrome.
Features of WWW:
 Hyper Text Information System
 Cross-Platform
 Distributed
 Open Standards and Open Source

Components of the Web: There are 3 components of the web:

 Uniform Resource Locator (URL): serves as a system for resources on
the web.
 HyperText Transfer Protocol (HTTP): specifies communication of
browser and server.
 Hyper Text Markup Language (HTML): defines the structure,
organisation and content of a webpage.
Architecture of HTTP:
The Hypertext Transfer Protocol (HTTP) is an application-level protocol for
distributed, collaborative, hypermedia information systems. This is the
foundation for data communication for the World Wide Web (i.e. internet) since
1990.
Basically, HTTP is a TCP/IP based communication protocol, that is used to
deliver data (HTML files, image files, query results, etc.) on the World Wide Web.
The default port is TCP 80, but other ports can be used as well. It provides a
standardized way for computers to communicate with each other. HTTP
specification specifies how clients' request data will be constructed and sent to
the server, and how the servers respond to these requests.
There are three basic features that make HTTP a simple but powerful protocol.
They’re:
  HTTP is connectionless:
 HTTP is media independent:
 HTTP is stateless:

HTTPS:
HTTPS stands for Hyper Text Transfer Protocol Secure. It is the most common
protocol for sending data between a web browser and a website. It is the secure
variant of HTTP used for communication between the browser and the webserver.
In order to make the data transfer more secure, it is encrypted. Encryption is
required to ensure security while transmitting sensitive information like
passwords, contact information, etc.
HTTPS establishes the communication between the browser and the webserver.
It uses the Secure Socket Layer (SSL) and Transport Layer Security (TLS)
protocol for establishing communication. The new version of SSL is
TLS(Transport Layer Security) .
HTTPS uses the conventional HTTP protocol and adds a layer of SSL/TLS over
it. The Working of HTTP and HTTPS remains the same, the browsers and servers
still communicate with each other using the HTTP protocol. However, this is done
over a secure SSL connection. The SSL connection is responsible for the
encryption and decryption of the data that is being exchanged in order to ensure
data safety.
Introduction to Full Stack:
Full stack development is the process of designing, creating, testing, and
deploying a complete web application from start to finish. It involves working
with various technologies and tools, including front-end web development, back-
end web development, and database development. And full stack development is
a term used to describe a software engineer or developer who works with both the
front and back end of a website or application. A full-stack developer is
comfortable working with front-end and back-end technologies that power a
website or application.
Full-stack developers are often responsible for the entire web application
development process, from start to finish, which means they must have a strong
understanding of all the technologies and tools involved in web development.
They also need to work effectively with others on a team, as web development is
typically a collaborative process.
There are different types of Full Stacks
 LAMP Stack
 MEAN Stack
 MERN Stack
 DJANGO Stack
History of Web Development:
The history of web development is a fascinating journey that spans several
decades and has undergone significant transformations.
1. Early Days (1960s - 1990s):
 1960s: The concept of "hypertext" is introduced by Ted Nelson, paving the
way for non-linear information access.
 1970s: The development of TCP/IP protocols forms the basis for the
internet.
 1989: Tim Berners-Lee invents the World Wide Web while working at
CERN. He creates the first web browser and editor, as well as the first
website. 
 1990s: The web starts to gain popularity. HTML (HyperText Markup
Language) is introduced by Berners-Lee. Browsers like Mosaic (1993) and
Netscape Navigator (1994) make the web accessible to the general public. 
2. Dot-Com Boom (late 1990s - early 2000s):
 Late 1990s: The dot-com boom leads to a rapid increase in internet-based
companies. Web development becomes a significant industry.
  1997: CSS (Cascading Style Sheets) is introduced, allowing developers to
separate content from presentation.
 1999: Macromedia releases Flash, enabling interactive multimedia content
on websites.
3. Web 2.0 Era (mid-2000s):
 Early 2000s: Dynamic websites become more common with the use of
technologies like JavaScript, allowing for interactive user experiences.
 2004: The term "Web 2.0" is coined, emphasizing user-generated content,
collaboration, and dynamic web applications.
 2005: AJAX (Asynchronous JavaScript and XML) is popularized,
enabling asynchronous data loading without refreshing the entire web
page.
4. Mobile and Responsive Design (2010s):
 2010: Responsive web design gains prominence, allowing websites to
adapt to various devices and screen sizes.
 2013: Bootstrap, a popular front-end framework, is released by Twitter,
making responsive web development more accessible.
5. Modern Web Development (2010s - Present):
 2015: Progressive Web Apps (PWAs) emerge, combining the best of web
and mobile apps, providing offline capabilities and enhanced user
experiences.
 2016: React.js, a popular JavaScript library for building user interfaces,
gains widespread adoption.
 2017: WebAssembly, a binary instruction format for a stack-based virtual
machine, allows high-performance execution of code on web browsers.
 2018: GraphQL, a query language for APIs, becomes popular for more
efficient data fetching and manipulation. 
 2020s: Continued advancements in front-end and back-end technologies,
including the rise of serverless computing, microservices architecture, and
headless CMS (Content Management Systems).
Two-tier architecture:
In a two-tier architecture, the client is on the first tier. The database server and
web application server reside on the same server machine, which is the second
tier. This second tier serves the data and executes the business logic for the web
application. Organizations that favor this architecture typically prefer to
consolidate their application capabilities and database server capabilities on a
single tier. The second tier is responsible for providing the availability, scalability,
and performance characteristics for the organization's web environment.

N-tier architecture:
In an n-tier architecture, application objects are distributed across multiple logical
tiers, typically three or four.
In a three-tier architecture, the database server does not share a server machine
with the web application server. The client is on the first tier, as it is in a two-tier
architecture. On the third tier, the database server serves the data. For
performance reasons, the database server typically uses stored procedures to
handle some of the business logic. The application server resides on the second
tier. The application server handles the portion of the business logic that does not
require the functionality that the database server provides. In this approach,
hardware and software components of the second and third tiers share
responsibility for the availability, scalability, and performance characteristics of
the web environment.
Introduction to MEAN Stack:
MEAN Stack is one of the most popular Technology Stack. It is used to develop
a Full Stack Web Application. Although it is a Stack of different technologies, all
of these are based on JavaScript language.
MEAN Stands for:
 M – MongoDB
 E – Express
 A – Angular
 N – Node.js
This stack leads to faster development as well as the deployment of the Web
Application. Angular is Frontend Development Framework whereas Node.js,
Express, and MongoDB are used for Backend development as shown in the below
figure.

MongoDB:
Type: Database
Description: MongoDB is a NoSQL database that stores data in a flexible, JSON-
like format. It allows developers to store data in the form of key-value pairs,
arrays, and nested documents. MongoDB is particularly well-suited for handling
large volumes of unstructured or semi-structured data.
Express.js:
Type: Backend Framework
Description: Express.js is a minimal and flexible Node.js web application
framework that provides a robust set of features for building web and mobile
applications. It is designed to create APIs and handle the backend logic of web
applications. Express simplifies the process of building scalable and maintainable
server-side applications.
Angular:
Type: Frontend Framework
Description: Angular is a powerful and widely-used frontend JavaScript
framework developed and maintained by Google. It allows developers to build
dynamic, single-page web applications (SPAs). Angular provides a structured
way to create interactive user interfaces and offers features like data binding,
dependency injection, and modular development.
Node.js:
Type: Runtime Environment
Description: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript
engine. It allows developers to run JavaScript code on the server-side, enabling
the development of scalable and high-performance web applications. Node.js is
event-driven and non-blocking, making it efficient for handling multiple
connections simultaneously.
The MEAN stack's use of a single language, JavaScript, for both client and server-
side development simplifies the development process, making it easier to build
and maintain complex web applications.

Architecture of Mean Stack:

The MEAN.js is designed or developed to build a robust framework for helping
developers use better practices when working with the popular JavaScript
components, building a robust framework for supporting daily development
needs, and solving common issues with connecting to
MongoDB, Express.js, Node.js, AngularJS frameworks. For back-end and front-
end, the MEAN stack is very simple and easy to use. There are several
technologies which use different languages for both client-side and server-side
execution. In MEAN technology, we use only one language for both client and
server-side.
  AngularJS is a client-side language written in JavaScript. So, firstly the
client request is processed by it.
 After that, the request enters the server (Node.js), i.e., phase 2. Node.js is
a server-side language written in JavaScript.
 After that, ExpressJS makes the request to the database, and it is treated as
phase 3
 After getting a request, MongoDB retrieves the data & returns the response
back to the ExpressJS.
 A response is sent back to the Node.js from Express.js, and then it is
forwarded to the AngularJS by Node.js for displaying the result.
Benefits of full-stack development:
 The benefits when working in a team include
 You’re more likely to have a better view of the bigger picture by
understanding the different areas and how they fit together.
 You’ll form an appreciation of what other parts of the team are doing and
what they need to be successful.
 Team members can move around more freely. T
 The additional benefits when working by yourself include
 You can build applications end-to-end by yourself with no dependencies
on other people.
 You have more skills, services, and capabilities to offer customers
Data Modelling:
Data modelling, in the context of Mongoose and MongoDB, is defining what
data can be in a document, and what data must be in a document. When storing
user information you might want to be able to save the first name, last name,
email address, and phone number.
 But you only need the first name and email address, and the email address must
be unique. This information is defined in a schema, which is used as the basis for
the data model.
 UNIT-II
Basic MVC Architecture

Model View Controller or MVC as it is popularly called, is a software design

pattern for developing web applications. A Model View Controller pattern is
made up of the following three parts −
 Model − The lowest level of the pattern which is responsible for
maintaining data. 
 View − This is responsible for displaying all or a portion of the data to the
user.
 Controller − Software Code that controls the interactions between the
Model and View. 
MVC is popular as it isolates the application logic from the user interface layer
and supports separation of concerns. Here the Controller receives all requests for
the application and then works with the Model to prepare any data needed by the
View. The View then uses the data prepared by the Controller to generate a final
presentable response. The MVC abstraction can be graphically represented as
follows.

The Model
The model is responsible for managing the data of the application. It responds to
the request from the view and it also responds to instructions from the controller
to update itself.
The View
It means presentation of data in a particular format, triggered by a controller's
decision to present the data. They are script-based templating systems like JSP,
ASP, PHP and very easy to integrate with AJAX technology.
The Controller
The controller is responsible for responding to the user input and perform
interactions on the data model objects. The controller receives the input, it
validates the input and then performs the business operation that modifies the
state of the data model.

Creating an Express Project:

# Checking the versions
 Node –version
 Npm –version
 Express –version
# Installing Express
 Npm install -g express-generator
 Express
# Installing dependencies
 Npm install
# If any vulnerabilities found after the above command
 Npm audit fix –force
# To debug the project
SET DEBUG=folder_name: ; npm start
 Create a folder named app_server in the project folder.
 Create two folders named controllers and models in the app_server.
 Now copy the routes and views folders to app_server from app.js.
 In app.js change the code in the line 7,8,and 13.

 var indexRouter = require('./app_server/routes/index');

 var usersRouter = require('./app_server/routes/users');
 app.set('views', path.join( dirname, 'app_server','views'));

 In js www keep track of the port number

 var port = normalizePort(process.env.PORT || '3000');
 app.set('port', port);

# To start the project

 Npm start
# To view the project
Open the browser and type localhost:3000(port number)

EXPRESS PAGE

Building some basic Controllers:

Add the following pages
Locations
 List page
 Details page
 Add review page
Others
 About page
# Add the following code in index.js
var express = require('express');
var router = express.Router();
var ctrlLocations = require('../controllers/locations');
var ctrlOthers = require('../controllers/others');

# Add the following code in locations page

router.get('/', ctrlLocations.homelist);
router.get('/locations',ctrlLocations.locationInfo);
router.get('/locations/review/new',ctrlLocations.addReview);

# Add the following code in Others page

router.get('/about',ctrlOthers.about);
module.exports = router;

# Add the following code in Controllers/Others.js

/* GET about page */
const about = (req, res) => {
res.render('genetic-text', { title: 'About' });
};
module.exports = {about};

# Add the following code in Controllers/locations.js

/* GET home page*/
const homelist = (req, res) => {
res.render('home', {title: 'CAKE HOUSE'});
};

/* GET Location Info page */

const locationInfo = (req, res) => {
res.render('location-info', { title: 'Location info' });
};
/* GET Add review page */
const addReview = (req, res) => {
res.render('location-review-form', { title: 'Add review' });
};

module.exports = {
homelist,
locationInfo,
addReview
};

Update the layout.pug ,fill with nav ,footer and other elements.

Creating some Views:

# In navigation,
 Link the loc8r logo to the homepage
 An about link on the left, pointing to the /about URL page
# Wrap the content block in a div
# Add a standard footer
# The navigation bar, content area and footer put all together in layout.pug file of
the views
# Setting up the views and controllers
 Make a copy of index.pug and save it in the same folder as locations-list-
pug
 Set the controller for the home page.
 Update the homelist controller.

const homelist = (req, res) => {

res.render('locations-list', {title: 'Home'});
};

# Update the locations-list.pug such that each place should show the name,
address, rating and other facilities.
# Structure the list area and some hardcoded data.
Adding the rest of the views:
Details page
# Update the controllers for the location-info in the location.js
const locationInfo = (req, res) => {
res.render('location-info', { title: 'Location info' });
};

# Update in location-info.pug with

 Page header
 Nested responsive columns
 Add components used to define info
Review page
# Change the add Review controller
const addReview = (req, res) => {
res.render('location-review-form', { title: 'Add review' });
};

# Create a file in views i.e location-review form.pug and add the following in it
 Form action
 Inputs for name and ratings
 Dropdown for ratings
 Text area for review and submit button
About page
# Change the about controller in others.js
/* GET about page */
const about = (req, res) => {
res.render('generic-text', { title: 'About' });
};

# Create a generic-text.pug in views and add a simple layout for displaying details
about this app.
Making views smarter:
# Move the data from the views to the controllers
# Update the controller homelist with the data from the locations-list.pug
# Define pug mixins
 Create a folder _includes in views for all html functions to define in a file
also include the function files in location-list.pug
 Mixin function in the file for Output rating.

mixin outputRating(rating)
- for (let i = 1; i <= rating; i++)
i.fas.fa-star
- for (let i = rating; i < 5; i++)
i.far.fa-star
 UNIT-III
Connecting the Express Application to MongoDB by using Mongoose:
Connecting an Express application to MongoDB using Mongoose is a common
task in web development. Mongoose is an ODM (Object Data Modelling) library
for MongoDB and Node.js, which provides a more straightforward and schema-
based way to interact with MongoDB databases.
Prerequisites:
1. Node.js and npm: Make sure you have Node.js and npm (Node Package
Manager) installed on your system. You can download and install them
from nodejs.org.
2. MongoDB: Ensure that you have MongoDB installed and running. You
can download MongoDB from mongodb.com.
Steps:
1. Install Mongoose:
In your terminal or command prompt, navigate to your project folder and install
Mongoose using npm:

2. Set Up Mongoose Connection:

In your Express application, create a separate file (e.g., db.js) to handle the
Mongoose connection:
Replace 'mongodb://localhost:27017/your-database-name' with the
connection URL of your MongoDB database.
3. Integrate Mongoose in Your Express Application:
In your main Express application file (e.g., app.js), require the db.js file and use
the Mongoose connection to interact with the database:

Now your Express application is connected to MongoDB using Mongoose. You

can define your Mongoose schemas and models for interacting with MongoDB
collections.
Benefits of modelling the data:
Modelling data provides structure, consistency, security, and abstraction, making
it easier to work with databases and ensuring that the data remains reliable and
manageable throughout the application's lifecycle. Modelling data in a structured
and organized way provides several benefits in the context of database
management and application development:
 Data Integrity and Validation
 Improved Readability and Maintenance
 Ease of Modification
 Data Abstraction
 Security
 Performance Optimization
 Documentation
Defining simple mongoose schemas:
Defining simple Mongoose schemas involves specifying the structure of your
data. Here's how you can create a basic Mongoose schema for a hypothetical
"User" entity with a name and an age field:
First, install Mongoose if you haven't already:

Create a Mongoose Schema:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define the schema for the "User" entity

const userSchema = new Schema({
name: {
type: String,
required: true, // Field is required
},
age: {
type: Number,
required: true,
min: 18, // Minimum age
},
});

// Create a Mongoose model based on the schema

const User = mongoose.model('User', userSchema);

module.exports = User;

In this example, a Mongoose schema is created for a User entity with two fields:
name (a required string) and age (a required number with a minimum value of
18). The schema defines the structure of the document that will be stored in the
MongoDB collection.
Using the Schema in Your Application:
You can now use the User model in your application to interact with the
MongoDB database. For example, to create a new user and save it to the database:
const mongoose = require('mongoose');
const User = require('./userModel');
// Assuming your schema is in a file called userModel.js

// Connect to MongoDB (ensure you've set up the connection as shown in the

previous responses)

// Create a new user instance

const newUser = new User({
name: 'John Doe',
age: 25,
});

// Save the user to the database

newUser.save((err, user) => {
if (err) {
console.error(err);
} else {
console.log('User saved successfully:', user);
}
});

In this example, a new User instance is created based on the defined schema and
then saved to the MongoDB database using the save method.

Using the MongoDB shell to create a MongoDB database and add data:
You can use the MongoDB shell to create a database and add data to it. Here are
the steps to create a new database, create a collection within that database, and
insert data into the collection using the MongoDB shell:
Step 1: Start MongoDB Shell
Open your terminal or command prompt and run the mongo command to start
the MongoDB shell. If your MongoDB server is running locally, it will connect
to the default port (27017).