DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 1 Date of Lecture:
Topic of Lecture: Introduction to [Link]
Introduction :
[Link] is a cross-platform runtime environment and library for running JavaScript
applications outside the browser.
It is used for creating server-side and networking web applications. It is open source and
free to use.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
Introduction to [Link]
[Link] is an open-source, cross-platform, server-side JavaScript runtime environment
that allows developers to run JavaScript outside the browser.
It can be downloaded from this link [Link]
[Link] also provides a rich library of various JavaScript modules to simplify the
development of web applications.
Key Features of [Link]
✅Asynchronous & Non-Blocking – Handles multiple requests efficiently.
✅Single-Threaded – Uses an event-driven architecture to handle concurrent requests.
✅Cross-Platform – Works on Windows, macOS, and Linux.
✅Fast Execution – Uses the V8 engine for high-speed performance.
✅Large Ecosystem – Comes with npm (Node Package Manager) to handle dependencies.
Use [Link]
[Link] is widely used for building real-time applications due to its efficiency. Some use cases
include:
Web Servers (RESTful APIs, [Link]-based applications)
Real-Time Applications (Chat apps, gaming servers)
Microservices Architecture
Streaming Services (Netflix, YouTube)
IoT Applications
1
Different parts of [Link]
Features of [Link]
1. Extremely fast: [Link] is built on Google Chrome's V8 JavaScript Engine, so its library
is very fast in code execution.
2. I/O is Asynchronous and Event Driven: All APIs of [Link] library are asynchronous
i.e. non-blocking. So a [Link] based server never waits for an API to return data.
3. Single threaded: [Link] follows a single threaded model with event looping.
4. Highly Scalable: [Link] is highly scalable because event mechanism helps the server to
respond in a non-blocking way.
5. No buffering: [Link] cuts down the overall processing time while uploading audio and
video files. [Link] applications never buffer any data. These applications simply output
the data in chunks.
6. Open source: [Link] has an open source community which has produced many
excellent modules to add additional capabilities to [Link] applications.
7. License: [Link] is released under the MIT license.
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to learn the basic concepts of [Link].
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
Reference Book:
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
2
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 2 Date of Lecture:
Topic of Lecture: NPM - Events, Timers, and Callbacks in [Link]
Introduction :
NPM (Node Package Manager) is a tool that comes with [Link] and is used to manage
JavaScript packages (libraries and dependencies).
A package in [Link] contains all the files you need for a module.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
NPM - Node Package Manager
npm stands for Node Package Manager. It's a library and registry for JavaScript software
packages.
To install a module using npm, you can use the following command:
bash
npm install <module
Example:
bash
npm install express -This will install the express module and add it to your node_modules
directory.
Basic NPM Commands:
Check npm version: npm -v
Initialize a project: npm init -y
Install a package: npm install package-name
Install a package globally: npm install -g package-name
Uninstall a package: npm uninstall package-name
1
Events, Timers, and Callbacks in [Link]
Events in [Link]
[Link] uses an event-driven architecture. The events module allows developers to
create and handle custom events.
Example: Creating an Event Emitter
js
CopyEdit
const EventEmitter = require('events');
const event = new EventEmitter();
[Link]('greet', () => {
[Link]("Hello, Event Triggered!");
});
[Link]('greet');
Timers in [Link]
[Link] provides timer functions to schedule tasks.
setTimeout() – Executes a function after a delay.
setInterval() – Repeats a function at regular intervals.
setImmediate() – Executes a function as soon as possible.
Callbacks in [Link]
A callback is a function passed as an argument to another function, which executes after the
parent function completes.
Example:
const fs = require('fs');
[Link]('[Link]', 'utf8', (err, data) => {
if (err) throw err;
[Link](data);
});
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to understand the NPM, Events, Timers, and Callbacks in [Link].
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
Reference Book:
2
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
3
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 3 Date of Lecture:
Topic of Lecture: File upload and Email
Introduction :
[Link] allows handling file uploads using middleware like multer, enabling users to
upload files to the server efficiently.
Email Integration: After uploading, files can be sent via email using libraries like
nodemailer, attaching the uploaded file to the email.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
File Upload and Email
1. Handling File Upload in [Link]
[Link] allows efficient file uploads using middleware like multer, which processes multipart
form data.
File Upload Implementation
Installing Required Packages
Installing express for server setup and multer for file uploads.
npm install express multer
Configuring Multer
Setting up Multer to handle file storage and retrieval.
Configuring the storage destination and filenames.
Example
const multer = require('multer');
const storage = [Link]({
1
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, new Date().toISOString() + '-' + [Link]);
});
const upload = multer({ storage: storage });
Sending Uploaded File via Email
After the file is uploaded, it can be sent via email using nodemailer.
Installation: Install nodemailer with npm install nodemailer.
SMTP Configuration: Use a service like Gmail or an SMTP server to send emails.
Example
const nodemailer = require('nodemailer');
const fs = require('fs');
const transporter = [Link]({
service: 'gmail',
auth: {
user: 'your-email@[Link]',
pass: 'your-password'
});
const mailOptions = {
from: 'your-email@[Link]',
to: 'recipient@[Link]',
subject: 'File Upload',
text: 'Here is the uploaded file',
2
attachments: [{
filename: '[Link]',
path: './uploads/[Link]'
}]
};
[Link](mailOptions, (error, info) => {
if (error) {
[Link](error);
} else {
[Link]('Email sent: ' + [Link]);
});
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to know the File upload and Email..
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
Reference Book:
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
3
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 4 Date of Lecture:
Topic of Lecture: Express framework – request –response –routing
Introduction :
[Link] is a fast, minimal, and flexible [Link] web application framework.
It simplifies server-side development with built-in routing, middleware, and templating
capabilities.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
Express framework
[Link] is a minimal and flexible [Link] web framework that provides powerful
features for web and API development. It simplifies handling HTTP requests,
responses, routing, templates, and view engines.
Express
A fast and lightweight framework for building web applications and APIs.
Works on top of [Link] to handle HTTP requests efficiently.
Provides middleware support to enhance functionality.
Use Express
Simple and easy-to-learn syntax.
Supports middleware for request processing.
Efficient routing mechanism.
Built-in support for template engines.
Setting Up Express
const express = require('express');
const app = express();
[Link](3000, () => [Link]('Server running on port 3000'));
Handling Requests & Responses in Express
Request (req) Object
1
Holds client request details like headers, query parameters, body, cookies, etc.
Example of extracting query parameters
[Link]('/user', (req, res) => {
const name = [Link];
[Link](`Hello, ${name}!`);
});
Response (res) Object
Used to send data back to the client.
Common response methods:
o [Link](): Send a string or object.
o [Link](): Send JSON data.
o [Link](): Set HTTP status codes.
o [Link](): Redirect to another page.
Example
[Link]('/json', (req, res) => {
[Link]({ message: "This is a JSON response" });
});
Routing in Express
Routing determines how the application responds to different requests.
Route Parameters
Capture dynamic values in the URL.
Example
[Link]('/user/:id', (req, res) => {
[Link](`User ID: ${[Link]}`);
});
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to understand the Express framework,request,response and routing
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
2
Reference Book:
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
3
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 5 Date of Lecture:
Topic of Lecture: Templates- View engines
Introduction :
Templates in [Link] allow developers to generate dynamic HTML content by
embedding variables and logic, enabling efficient server-side rendering for web
applications.
View engines process template files and convert them into HTML before sending them
to the client.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
Templates
Templates in [Link] allow for the dynamic generation of HTML pages by embedding data
and logic into static HTML structures.
This is especially useful for rendering user-specific or data-driven content on the server before
sending it to the client.
Templates separate the presentation logic from the application logic, making code easier to
manage and maintain.
View Engines
View engines are responsible for rendering templates into HTML by processing dynamic data
and generating the final web page to send to the client.
They interpret template files, inject dynamic content (such as variables, loops, and conditions),
and produce a rendered HTML file.
Benefits of Using View Engines
Separation of Concerns: Keeps HTML structure separate from application logic, enhancing
readability and maintainability.
Dynamic Content Rendering: Enables the creation of pages that respond to dynamic data
like user inputs, database results, etc.
1
Performance: Reduces the load on the client-side by pre-rendering content on the server,
ensuring faster page loads for users.
Integrating View Engines with Express
Express allows seamless integration with various view engines. The engine is set up using
[Link]() to define the view engine, followed by rendering dynamic content using
[Link]().
Example
const express = require('express');
const app = express();
[Link]('view engine', 'ejs');
[Link]('/', (req, res) => {
[Link]('index', { title: 'Home Page', message: 'Welcome to [Link]!' });
});
[Link](3000, () => [Link]('Server running on port 3000'));
Advantages of Using Templates and View Engines
Efficiency: Server-side rendering with templates can reduce the complexity of client-side
logic.
Flexibility: Allows for rapid development and changes in UI design without altering core
business logic.
SEO-Friendly: Pre-rendering HTML on the server ensures that search engines can crawl
and index content effectively.
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to learn the Templates and View engines
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
Reference Book:
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
2
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Lecture Handouts Semester/Year
VI/III
Course Code & Name: 22CS14603 & WEB TECHNOLOGIES
Class: III Branch: B.E. CSE
Faculty Name : [Link]
Unit : II Lecture No. 6 Date of Lecture:
Topic of Lecture: Templates- View engines
Introduction :
Templates in [Link] allow developers to generate dynamic HTML content by
embedding variables and logic, enabling efficient server-side rendering for web
applications.
View engines process template files and convert them into HTML before sending them
to the client.
Prerequisite knowledge for Complete learning of Topic:
Java Script Fundamentals
HTML/CSS Basics
Detailed Content of the Lecture:
Templates
Templates in [Link] allow for the dynamic generation of HTML pages by embedding data
and logic into static HTML structures.
This is especially useful for rendering user-specific or data-driven content on the server before
sending it to the client.
Templates separate the presentation logic from the application logic, making code easier to
manage and maintain.
View Engines
View engines are responsible for rendering templates into HTML by processing dynamic data
and generating the final web page to send to the client.
They interpret template files, inject dynamic content (such as variables, loops, and conditions),
and produce a rendered HTML file.
Benefits of Using View Engines
Separation of Concerns: Keeps HTML structure separate from application logic, enhancing
readability and maintainability.
Dynamic Content Rendering: Enables the creation of pages that respond to dynamic data
like user inputs, database results, etc.
1
Performance: Reduces the load on the client-side by pre-rendering content on the server,
ensuring faster page loads for users.
Integrating View Engines with Express
Express allows seamless integration with various view engines. The engine is set up using
[Link]() to define the view engine, followed by rendering dynamic content using
[Link]().
Example
const express = require('express');
const app = express();
[Link]('view engine', 'ejs');
[Link]('/', (req, res) => {
[Link]('index', { title: 'Home Page', message: 'Welcome to [Link]!' });
});
[Link](3000, () => [Link]('Server running on port 3000'));
Advantages of Using Templates and View Engines
Efficiency: Server-side rendering with templates can reduce the complexity of client-side
logic.
Flexibility: Allows for rapid development and changes in UI design without altering core
business logic.
SEO-Friendly: Pre-rendering HTML on the server ensures that search engines can crawl
and index content effectively.
Outcome / Application: (write in bullets or in sentence form)
● Students will be able to learn the Templates and View engines
Video Content / details of websites for further learning (if any):
[Link]
Textbook:
Frank Zammetti, Modern Full-Stack Development: TypeScript, React, [Link], 1st Edition,
Apress,2020
Vasan Subramanian, Pro MERN Stack - Full stack web app development, 2nd Edition, 2019
Reference Book:
[Link], “Web Technologies”, Oxford University Press, 2011.
Jessica Minnick, Responsive Web Design with HTML 5 & CSS, Cengage Learning,
2020.
Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009
Subject Teacher Verified by HOD
2
