KNOWLEDGE INSTITUTE OF TECHNOLOGY (AUTONOMOUS)

B.E/B.Tech. DEGREE EXAMINATIONS

End Semester Examination April / May 2024
Date : 27.06.2024
Department IT Semester V Regulation 2021
Sub Code & Sub Name IT3501-FULL STACK WEB DEVELOPMENT

PART A

Q. No. Answer Key Marks

1. Define the term "full stack development".

Full stack development refers to the practice of working on both the front-end (client side)
and back-end (server side) aspects of a web application. A full stack developer is proficient
in multiple technologies and frameworks required to build and maintain a complete web 2
application from start to finish.
 Front-End Development
 Back-End Development
2. Identify the main functions of web browser.
 Rendering and Displaying Web Pages
 User Interface and Navigation 2
 Security and Privacy
 Managing Network Requests
3. Write about package.json file.
 Metadata
 Dependencies
 Scripts 2
 Repository Information
 Managing Dependencies
 Running Scripts
4. Create a simple server in Node js that returns Hello World.
const http = require('http');
// Create a server object
const server = http.createServer((req, res) => {
// Set the response HTTP header with HTTP status and Content type
res.writeHead(200, { 'Content-Type': 'text/plain' });
// Send the response body "Hello World" 2
res.end('Hello World\n');
});// The server listens on port 3000
const port = 3000;
server.listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});

Page 1 of 12
5. What is sharding in MongoDB?
Sharding in MongoDB is a method for distributing data across multiple machines to support
deployments with very large data sets and high throughput operations. It allows MongoDB
to horizontally scale, ensuring that the system can handle increased load and store large
amounts of data efficiently. 2
Key Components
 Shards
 Config Servers
 Query Routers (mongos)
6. Create a simple server in Node js that returns Hello World.
Creating a Collection
db.createCollection(name, options)
Example
db.createCollection("myCollection") 2
Dropping a Collection
db.collectionName.drop()
Example
db.myCollection.drop()
7. Define TypeScript.
TypeScript is a statically typed superset of JavaScript that adds optional type checking and 2
other features to the language.
8. How does an Angular application work?
 Structure of an Angular Application
 Bootstrapping the Application
 Components and Templates
 Data Binding 2
 Services and Dependency Injection
 Routing
 HTTP Client
 Lifecycle Hooks

9. Compare stateless and stateful components.

Stateless Components
Definition:
Stateless components, also known as presentational or functional components, are
components that do not manage or hold any state of their own. They simply receive data
(props) and render it. 2
Stateful Components
Definition:
Stateful components, also known as container or class components (though hooks have
changed this in React), manage their own state and have more complex logic. They hold and
manage data that can change over time.

Page 2 of 12
 10. Name the features of RESTful web services.
 Stateless 2
 Client-Server Architecture
 Uniform Interface
 Cacheable
 Layered System

PART B
11. (a) (i)
Explain web development framework with suitable block diagram. Also explain
the components of it.

Block Diagram of a Web Development Framework

Components of a Web Development Framework

 User Interface (UI)
 Front-end Framework
 Controller (13)
 Middleware
 Back-end Framework
 Database
 Routing
 Template Engine
 Authentication and Authorization

(Or)
11 (b) (i) Describe the Model-View-Controller (MVC) architecture, including its features. (13)
Components, and how it works with an example.

Features of MVC Architecture

 Reusability
 Parallel Development
 Maintainability
 Testability
 Separation of Concerns
Components of MVC Architecture
 Models
 Views

Page 3 of 12
  Controllers
 Routes
 Templates
 Middleware
 Validation
Block Diagram :

How MVC Works with an Example

Example Scenario: A Simple Blog Application
Model:
class Post(models.Model):
title = models.CharField(max_length=100)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
View:
<!-- blog_list.html -->
<html>
<head><title>Blog</title></head>
<body>
<h1>Blog Posts</h1>
<ul>
{% for post in posts %}
<li>{{ post.title }} - {{ post.created_at }}</li>
{% endfor %}
</ul>
</body>
</html>
Controller:
from django.shortcuts import render
from .models import Post

def blog_list(request):
posts = Post.objects.all()
return render(request, 'blog_list.html', {'posts': posts})

12. (a) (i) Examine the concept of callbacks in Node.js. Provide a brief explanation of (8)
passing additional parameters to callback functions with an example.

Callbacks are a fundamental concept in Node.js and are used to handle asynchronous
operations. A callback is a function passed into another function as an argument, which

Page 4 of 12
is then invoked inside the outer function to complete some kind of routine or action.
This allows Node.js to continue executing other code while waiting for the
asynchronous operation to complete, thus providing non-blocking behavior.

Passing Additional Parameters to Callback Functions

When defining a callback function, you can include additional parameters to pass data.
These parameters can be passed along when invoking the callback.

Example: Passing Additional Parameters to Callback Functions

const fs = require('fs');

// Define a function that reads a file and passes additional parameters to the callback

function readFileAndProcess(filePath, additionalParam, callback) {

fs.readFile(filePath, 'utf8', (err, data) => {

if (err) {

return callback(err);

// Invoke the callback with the file data and the additional parameter

callback(null, data, additionalParam);

});

// Define a callback function that takes additional parameters

function handleFileData(err, fileData, additionalParam) {

if (err) {

console.error('Error reading file:', err);

} else {

console.log('File data:', fileData);

console.log('Additional parameter:', additionalParam);

// Use the function

readFileAndProcess('example.txt', 'This is an additional parameter', handleFileData);

Page 5 of 12
 (ii) Provide an overview of the built-in modules that come with Node.js and their (5)
purposes.

Overview of Node.js Built-in Modules

http:

 Provides functionalities to create HTTP servers and clients.

 Used to handle and route HTTP requests and responses.

https:

 Similar to the http module but provides functionalities for HTTPS servers and
clients.

 Used for secure communication over SSL/TLS.

path:

 Provides utilities for working with file and directory paths.

 Helps resolve, normalize, join, and parse paths.

12 (b) (i) Determine how Node.js supports working with JSON data. Provide a brief 8
explanation of converting JSON to JavaScript objects and vice versa, along with a
code example for each.

Converting JSON to JavaScript Objects

To convert JSON data (which is a string) into JavaScript objects, you can use the
JSON.parse() method. This method parses a JSON-formatted string and converts it
into a JavaScript object.

Converting JavaScript Objects to JSON

To convert JavaScript objects into JSON format (as a string), you can use the
JSON.stringify() method. This method serializes a JavaScript object into a JSON-
formatted string. 5

(ii) Elaborate the process of compressing and decompressing data using the Zlib
module in Node.js.

Compressing Data with zlib

To compress data using the zlib module, you typically use the zlib.deflate() or
zlib.gzip() methods. These methods take input data as a Buffer or string and return a
compressed Buffer or stream.

Page 6 of 12
 Using zlib.deflate()

The zlib.deflate() method compresses the input data using the deflate algorithm.

Decompressing Data with zlib

To decompress data in Node.js using the zlib module, you use the zlib.inflate() or
zlib.gunzip() methods. These methods take compressed data as input and return the
decompressed data as a Buffer or stream.

Using zlib.inflate()

The zlib.inflate() method decompresses data that was compressed using the deflate
algorithm.

13. (a) (i) Carry out the below mentioned operations in collections by using the MongoDB (10)
shell.

a) Display

b) Create

c) Delete

Display (Read)

To display documents from a collection in MongoDB:

Connect to MongoDB:

Mongo

Switch to Database:

use your_database_name

Display Documents in a Collection:

db.your_collection_name.find()

Create (Insert)

Connect to MongoDB and Select Database:

Ensure you are connected to MongoDB and have selected the appropriate database (use
your_database_name).

Insert Documents:

Use the insertOne() or insertMany() methods to insert documents into the collection.

Page 7 of 12
 insertOne(): Inserts a single document into the collection.

db.your_collection_name.insertOne({ key: value })

insertMany(): Inserts multiple documents into the collection.

db.your_collection_name.insertMany([ { key1: value1 }, { key2: value2 }, ... ])

Delete (Remove)

Connect to MongoDB and Select Database:

Ensure you are connected to MongoDB and have selected the appropriate database (use
your_database_name).

Delete Documents:

Use the deleteOne() or deleteMany() methods to delete documents from the collection.

deleteOne(): Deletes a single document that matches the specified condition.

db.your_collection_name.deleteOne({ key: value })

deleteMany(): Deletes all documents that match the specified condition.

db.your_collection_name.deleteMany({ key: value })

(ii)
What is NoSQL? Enlist the various features of NoSQL. (3)

NoSQL (Not Only SQL) is a broad term used to describe databases that provide a
flexible approach to storing and managing data that is not necessarily structured in the
traditional rows and columns like relational databases (SQL databases). NoSQL
databases are designed to handle large volumes of unstructured, semi-structured, or
structured data, making them suitable for modern applications that require scalable and
high-performance data storage solutions

Features of NoSQL Databases

 Schemaless or Flexible Schema

 Scalability
 High Performance
 Replication and High Availability
 Non-relational Data Models

(b) (i) Analyze the db object and the methods associated with it. (10)

Analyzing the db Object

Accessing Collections:

Syntax: db.collectionName

Page 8 of 12
 Listing Collections:

Method: db.getCollectionNames()

Switching Database:

Method: use databaseName

Description: Switches the current database context to another database.

Common Methods Associated with db

Querying Documents

Method: db.collection.find(query, projection)

Inserting Documents:

Method: db.collection.insertOne(document) or
db.collection.insertMany(documents)
(ii) Articulate the various roles of the users in MongoDB.
(3)
 Built-in Roles
 Custom Roles

Roles in Action:

 Managing Access
 Ensuring Security
 Supporting Compliance

14. (a) (i) Analyze the various Key Components of Angular with a neat diagram. (8)

Key Components of Angular

 Modules (@NgModule):
 Components
 Templates
 Directives
 Services and Dependency Injection
 Data Binding
 Routing

Page 9 of 12
 (ii) What is interface? Explain the use of interface in TypeScript with suitable (5)
example.
In TypeScript, an interface is a way to define a contract for objects. It specifies the
structure that an object must adhere to, including the types of properties and methods it
should have. Interfaces are purely a compile-time construct and do not have any impact
on the generated JavaScript code; they are used solely for type-checking during
development.

Use of Interface in TypeScript

 Defining Object Structures
 Enforcing Type Constraints
 Facilitating Code Reusability

(b) (i) Apply the various binding available in Angular to dynamically add or (10)
remove CSS class from an element.
These techniques include property binding ([class]), interpolation ({{}}), and structural
directives like ngClass and ngStyle. Each approach has its use case depending on the
complexity of conditions and the type of data you need to bind.
 Using Property Binding ([class.class-name])
 Using Interpolation ({{expression}})
 Using ngClass Directive
 Using ngStyle Directive (3)
(ii) Explain the syntax for defining routes in Express.
Basic Route Syntax
Routes in Express are defined using the app.METHOD(PATH, HANDLER) syntax,
where:
app is an instance of Express.

METHOD is an HTTP request method (e.g., GET, POST, PUT, DELETE).

PATH is a path on the server.

HANDLER is a function that is executed when the route is matched.

15. (a) (i) Outline the React component lifecycle, and what are the three main phases that (13)
components go through?
In React, the component lifecycle refers to the series of stages that a component goes
through from its initialization to its removal from the DOM
 Mounting
 Updating
 Unmounting
Additional Lifecycle Methods (Deprecated)
 componentWillMount()
 componentWillReceiveProps()
 componentWillUpdate()

Page 10 of 12
15 (b) (i) Explain the concept of passing data between in React the this.props.children (10)
technique with an example.

Using this.props.children
Ex:
// Card.js
import React from 'react';

const Card = (props) => {

return (
<div className="card">
<div className="card-content">
{props.children}
</div>
</div>
);
};

export default Card;

Using the Card Component:
EX:
// App.js
import React from 'react';
import Card from './Card';
const App = () => {
return (
<div className="app">
<Card>
<h2>Card Title</h2>
<p>This is some content inside the card.</p>
</Card>
</div>
);
};
export default App;
(ii) State how MERN differs from other web development stacks. (3)

Components of MERN Stack

 MongoDB
 Express.js
 React
 Node.js
How MERN Differs from Other Stacks
 Full JavaScript Stack
 Component-Based Frontend
 Scalability and Flexibility

Create a simple application using MongoDB for Website Signup Form.

16. (a) (ii) Step-by-Step Implementation (15)
1) Set Up the Project
2) Install Dependencies

Page 11 of 12
 3) Create the Server
4) Create a Signup Form (Frontend)
5) Run the Application
6) Test the Application

Design a web application of your choice to demonstrate the webpack and

modularization concept.
Steps to Design the Todo List Application

(b) (i) 1. Setup the Project (15)

2. Create Project Structure
3. Configure webpack
4. Create React Components

Signature with name BOS Chairperson/HoD

Page 12 of 12