Web Development Frameworks Explained
Uploaded by
kalaiarasan2796Web Development Frameworks Explained
Uploaded by
kalaiarasan27962023 Nov/Dec-Question paper with answers
1. What is a web development framework?
web development frameworkis a set of tools, libraries, and best practices
A
that provide a structured way to build and deploy web applications. It simplifies
common tasks like routing, database connection, session management, and
authentication. Examples:React, Angular, Express, Django.
2. What is Express in full stack?
[Link]is a lightweight and fast [Link] web application framework.
● It provides features for building web and mobile applications.
● HandlesHTTP requests, routing, middleware, and server-side logic.
● In full stack (like MERN), Express acts as thebackend frameworkthat
communicates with the database and serves data to the frontend.
3. List the primitive types in [Link].
[Link] is based on JavaScript, so the primitive types are:
. String
1
2. Number
3. Boolean
4. Undefined
5. Null
6. Symbol(ES6)
7. BigInt(ES11)
4. What are callbacks in [Link]?
callbackis a function passed as an argument to another function, which is
A
executed after the completion of an asynchronous operation.
Example:
[Link]('[Link]', (err, data) => {
if (err) throw err;
[Link]([Link]());
});
Here, the second function is a callback executed after the file is read.
5. Why MongoDB is called a schema-less database?
MongoDB is calledschema-lessbecause:
● D
ocuments (JSON-like objects) in a collection do not need to have the
same structure.
● Fields can vary from document to document.
● Unlike relational databases, it doesn’t enforce a fixed schema.
6. What is database collection and document in MongoDB?
● C
ollection→ Equivalent to a table in relational DB. It stores multiple
documents.
● D
ocument→ A single record inside a collection, stored inBSON/JSON
format.
Example:
ollection: Students
C
Document: { "name": "John", "age": 21, "course": "CS" }
7. Differentiate between React and Angular.
Feature React Angular
Type Library Framework
Language JavaScript (JSX) TypeScript
earning
L Easy to learn Comparatively steep
Curve
OM
D Virtual DOM Real DOM + Change Detection
Handling
Data Binding One-way binding Two-way binding
Flexibility ighly flexible (choose
H pinionated, comes with built-in
O
libs) features
. What is data binding in Angular and what is the use of data binding in
8
Angular?
ata bindingis the mechanism that binds the data between the component
D
(TypeScript class) and the template (HTML).
Types in Angular:
{{ variable }}
1. Interpolation–
[property]="value"
2. Property binding–
(event)="handler()"
3. Event binding–
[(ngModel)]="value"
4. Two-way binding–
se:It synchronizes the data between the UI and component, making dynamic
U
updates seamless.
9. List the three different packages in React for routing.
The most commonly used React routing packages are:
1. react-router-dom(for web apps)
2. react-router-native(for React Native apps)
3. react-router(core library used by both DOM and Native)
10. What is a MERN Stack?
MERN Stackis a popular full-stack development technology stack consisting of:
● M: MongoDB (Database)
● E: [Link] (Backend framework)
● R: [Link] (Frontend library)
● N: [Link] (Runtime environment)
PART B (5 × 13 = 65 marks)
1 (a) What is MVC Architecture? Explain the components of MVC and how
Q
data flow takes place.
VC (Model–View–Controller)is a software architectural pattern used for
M
designing web applications.
● Model→ Manages data, business logic, and database interaction.
● View→ Responsible for displaying the data (UI).
● C
ontroller→ Handles user input, communicates with the model, and
updates the view.
Data flow:
1. User interacts withView.
2. Controllerreceives input and callsModel.
3. Modelprocesses data and updates.
4. Updated data is sent toView.
Example:In a student app:
● Model= Student database schema.
● View= HTML page showing student details.
● C
ontroller= Function that fetches student data from DB and sends it to
the view.
1 (b) Describe the major functions of web browser, web server and outline
Q
the working of web server.
Web Browser Functions:
● Renders HTML, CSS, JS into UI.
● Sends HTTP requests to server.
● Displays responses (web pages).
Web Server Functions:
● Stores and serves web pages.
● Handles HTTP requests and responses.
● P
rovides static content (HTML, CSS, JS) and dynamic content (via
backend).
Working of Web Server:
1. Client sends request (e.g.,[Link]).
2. DNS resolves domain → server IP.
3. Web server receives HTTP request.
4. Server processes and sends back response (HTML/JSON).
5. Browser renders content.
2 (a) Explain components of [Link] application. Develop a simple Web
Q
app to get user profile and display it.
Components of [Link] Application:
1. Modules– Reusable blocks of code.
2. Event loop– Handles asynchronous tasks.
3. Server– Handles client requests.
4. Middleware– Functions between request and response.
Example Web App:
onst express = require('express');
c
const app = express();
[Link]('/profile', (req, res) => {
[Link]({ name: "John", age: 25, course: "CS" });
});
[Link](3000, () => [Link]("Server running on port 3000"));
Q2 (b) Explain event-driven, blocking and non-blocking I/O in [Link].
onClick
● Event-driven:[Link] runs on events. Example: onRequest
, .
● B
locking I/O:Code executes sequentially. Next statement waits until
[Link]()
previous I/O completes. Example: .
● N
on-blocking I/O:Code does not wait, other tasks continue. Example:
[Link]()
.
Q3 (a) Design a signup form using [Link] and MongoDB.
● User enters:name, email, password, mobile.
● Data stored in MongoDB.
Code Example:
onst express = require('express');
c
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
onst app = express();
c
[Link]([Link]());
[Link]('mongodb://localhost:27017/signupDB');
const UserSchema = new [Link]({
name: String, email: String, password: String, mobile: String
});
const User = [Link]('User', UserSchema);
[Link]('/signup', async (req, res) => {
const user = new User([Link]);
await [Link]();
[Link]("User Registered Successfully");
});
[Link](3000, () => [Link]("Server started on 3000"));
Q3 (b) MongoDB Operations
(i)Create DB:
use myDatabase;
(ii)Create Collection:
[Link]("students");
(iii)Insert Document:
[Link]({ name: "Alice", age: 22 });
(iv)Find & Select:
[Link]({ name: "Alice" });
(v)Update Document:
[Link]({ name: "Alice" }, { $set: { age: 23 } });
Q4 (a) What is [Link] routing? Explain with example.
Express Routing:Defines how an app responds to client requests.
Example:
onst express = require('express');
c
const app = express();
[Link]('/', (req, res) => [Link]("Home Page"));
a
[Link]('/login', (req, res) => [Link]("Login Page"));
[Link](3000, () => [Link]("Server running"));
Q4 (b) What is TypeScript? Features + Validation Example
TypeScript= Superset of JavaScript that adds static typing.
Features:
● Type safety
● OOP support (classes, interfaces)
● Compile-time error checking
● Better tooling support
Validation Example:
function validateUser(email: string, password: string): boolean {
return [Link]("@") && [Link] >= 6;
}
[Link](validateUser("test@[Link]", "123456")); // true
Q5 (a) Phases of ReactJS Component Lifecycle
1. Mounting→ Component created (
constructor render
, ,
componentDidMount
).
2. Updating→ Re-render when state/props change
(
s
houldComponentUpdate componentDidUpdate
, ).
3. Unmounting→ Component removed (
componentWillUnmount
).
Change state on click Example:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
Q5 (b) Develop REST API for CRUD operations (Customer Entity).
onst express = require('express');
c
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
[Link]('mongodb://localhost:27017/customers');
const CustomerSchema = new [Link]({
name: String, email: String, phone: String
});
const Customer = [Link]('Customer', CustomerSchema);
// CREATE
[Link]('/customers', async (req, res) => {
const cust = new Customer([Link]);
await [Link]();
[Link]("Customer Created");
});
// READ
[Link]('/customers', async (req, res) => {
const customers = await [Link]();
[Link](customers);
});
// UPDATE
[Link]('/customers/:id', async (req, res) => {
await [Link]([Link], [Link]);
[Link]("Customer Updated");
});
// DELETE
[Link]('/customers/:id', async (req, res) => {
await [Link]([Link]);
[Link]("Customer Deleted");
});
[Link](3000, () => [Link]("API running on 3000"));
Part-C(15marks)
Option 1: Student Admission System
🔹 Requirements
● tudents can apply formax 3 program choices.
S
● Capture details: Name, Email, Mobile, HSC Marks, Program Preferences.
● Store data in DB.
● On successful submission → sendEmail + SMS confirmation.
🔹 Database Schema (MongoDB Example)
ollection: students
C
{
"name": "Kumar",
"email": "kumar@[Link]",
"mobile": "9876543210",
"marks": 560,
"programPreferences": ["CSE", "ECE", "MECH"]
}
🔹 Backend Code ([Link] + Express + MongoDB)
onst express = require('express');
c
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
onst app = express();
c
[Link]([Link]());
// Connect DB
[Link]('mongodb://localhost:27017/admissions');
// Schema
const StudentSchema = new [Link]({
name: String,
email: String,
mobile: String,
marks: Number,
programPreferences: [String]
});
const Student = [Link]('Student', StudentSchema);
// API - Submit Application
[Link]('/apply', async (req, res) => {
const student = new Student([Link]);
await [Link]();
// Send confirmation (simulated)
[Link](`Email sent to ${[Link]}`);
[Link](`SMS sent to ${[Link]}`);
r [Link]("Application submitted successfully!");
});
[Link](3000, () => [Link]("Admission portal running on 3000"));
Option 2: Blood Donor Registration System
🔹 Requirements
● D
onor fills details: Name, Mobile, Email, Address, Blood Group, Age,
Gender.
● Store in DB.
● On successful submission → sendEmail + SMS confirmation.
🔹 Database Schema (MongoDB Example)
ollection: donors
C
{
"name": "Anitha",
"email": "anitha@[Link]",
"mobile": "9876543211",
"address": "Chennai",
"bloodGroup": "O+",
"age": 28,
"gender": "Female"
}
🔹 Backend Code ([Link] + Express + MongoDB)
onst express = require('express');
c
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
onst app = express();
c
[Link]([Link]());
// Connect DB
[Link]('mongodb://localhost:27017/bloodBank');
// Schema
const DonorSchema = new [Link]({
name: String,
email: String,
mobile: String,
address: String,
bloodGroup: String,
ge: Number,
a
gender: String
});
const Donor = [Link]('Donor', DonorSchema);
// API - Register Donor
[Link]('/register', async (req, res) => {
const donor = new Donor([Link]);
await [Link]();
// Send confirmation (simulated)
[Link](`Email sent to ${[Link]}`);
[Link](`SMS sent to ${[Link]}`);
r [Link]("Donor registered successfully!");
});
[Link](3000, () => [Link]("Blood Bank portal running on 3000"));
2024 April/May-Question paper with answers
PART A – Short Answers
1. What is full stack web development?
ull stack web development means building both thefrontend (client-side)and
F
backend (server-side)of a web application.
● Frontend→ UI built with HTML, CSS, JS, React/Angular.
● B
ackend→ Server logic, APIs, databases using [Link], Express,
MongoDB, etc.
2. Outline the roles of backend services.
● Process client requests.
● Handle authentication & authorization.
● Connect with databases.
● Implement business logic.
● Serve APIs to frontend.
● Manage data security.
3. What are callbacks and events in [Link]?
● C
allback: A function passed as an argument, executed after async
operation.
● E
vent: [Link] is event-driven → emits events and executes
corresponding listeners.
Example:
f[Link]("[Link]", (err, data) => [Link](data)); // callback
[Link]("login", () => [Link]("User logged in")); // event
4. List and mention the purpose of any four timer methods in [Link].
1. setTimeout(fn, ms)– Runs once after given time.
2. setInterval(fn, ms)– Runs repeatedly at interval.
3. setImmediate(fn)– Executes after I/O events.
4. [Link](fn)– Executes callback on next event loop cycle.
5. Summarize the advantages of MongoDB over relational DBs.
● Schema-less (flexible).
● Stores JSON-like documents.
● High scalability and performance.
● Easy to integrate with [Link] (NoSQL).
● Supports replication & sharding.
6. What are roles and permissions in MongoDB?
● Role→ A set of privileges on resources (databases, collections).
● P
ermissions→ Actions allowed (read, write, dbAdmin, userAdmin).
"readWrite"role → allows both read & write on a DB.
Example:
7. What is [Link]?
[Link] is a fast, unopinionated web application framework for [Link].
● Handles HTTP requests, routing, middleware, and APIs.
● Simplifies server creation in [Link].
8. What is one-way binding and two-way binding in Angular?
● O
ne-way binding: Data flows from component → view. Example:
{{name}}
.
● T
wo-way binding: Data syncs both ways (view ↔ component). Example:
[(ngModel)]="name"
.
9. What are the benefits of ReactJS?
● Virtual DOM → faster rendering.
● Component-based architecture.
● Reusable UI components.
● Strong community support.
● Works with mobile (React Native).
10. What is MERN stack and drawbacks?
● MERN= MongoDB, Express, React, [Link].
● Full JS stack for end-to-end development.
Drawbacks:
● No default security features.
● Requires more configuration for large apps.
● Lacks strong support for complex transactions (compared to SQL).
PART B (5 × 13 = 65 marks)
Q1 (a) Explain the components of a web development stack.
web development stackis a collection of technologies used to build and run a
A
complete web application. It usually consists offrontend,backend, database,
and tools for deployment.
🔹 Components:
1. Frontend (Client-Side)
○ Handles theuser interface (UI)and interaction.
○ Built withHTML (structure),CSS (styling), andJavaScript(logic).
○ Modern frameworks/libraries:React, Angular, [Link].
○ Purpose: Make the application interactive and user-friendly.
2. Backend (Server-Side)
○ H
andlesbusiness logic, authentication, authorization,and
request processing.
○ Communicates with the database and sends responses to frontend.
○ Technologies:[Link], [Link], Django, SpringBoot.
3. Database
○ Stores and manages data.
○ Two types:
■ R
elational (SQL):MySQL, PostgreSQL (structured data,
schema-based).
■ N
on-relational (NoSQL):MongoDB (flexible schema,
JSON-like documents).
○ Purpose: Persistent storage of user data and application state.
4. APIs (Application Programming Interfaces)
○ Act as the bridge betweenfrontend and backend.
○ REST APIsorGraphQLcommonly used.
○ E
xample: A React frontend fetches user details via a
[Link]/Express REST API.
5. Runtime Environment & Server
○ Executes the backend code.
○ [Link]provides runtime for JavaScript on server side.
○ W
eb servers:Apache, Nginxserve content and handleclient
requests.
6. Development & Deployment Tools
○ Version control:Git, GitHub.
○ Deployment platforms:AWS, Heroku, Netlify, Vercel.
○ Containerization:Docker for environment consistency.
🔹 Example: MERN Stack
● M: MongoDB → Database
● E: [Link] → Backend framework
● R: [Link] → Frontend library
● N: [Link] → Runtime environment
Q1 (b) Explain MVC Architecture with benefits and disadvantages.
VCstands forModel–View–Controller, asoftware design patternused to
M
develop scalable and structured web applications. It separates the application
intothree interconnected components, which improves maintainability and
modularity.
🔹 Components of MVC
1. Model
○ Managesdataandbusiness logic.
○ Interacts with the database.
Studentmodel defines schema
○ Example: A { name, age,
course }
.
2. View
○ Responsible for theUser Interface (UI).
○ Displays data received from the model.
○ Example: HTML/React page showing student details.
3. Controller
○ Acts as abridge between Model and View.
○ H
andlesuser input, processes requests, calls the Model, and
updates the View.
○ E
xample: When user clicks "Submit", Controller calls the Model to
store data, then updates View.
🔹 Flow of MVC
1. User interacts with theView(UI).
2. Controllercaptures the request.
3. Controllercalls theModelto fetch/update data.
4. Modelupdates and sends data back.
5. Viewupdates the UI with new data.
🔹 Benefits of MVC
● Separation of concerns→ Code for UI, logic, and data is independent.
● Maintainability→ Easier debugging & updates.
● Reusability→ Models and Views can be reused across apps.
● P
arallel Development→ Developers can work on Model, View, and
Controller independently.
● Scalability→ Suitable for large-scale applications.
🔹 Disadvantages of MVC
● Complexity→ Overhead for small applications.
● Learning curve→ Beginners may find it difficult.
● More files and layers→ Increases project structure size.
● Performance overhead→ Due to multiple interactions between layers.
2 (a) Explain event-driven, non-blocking I/O model in [Link] with
Q
example.
● E
vent-driven: [Link] executes tasks based on events (e.g., HTTP
request, file read). Uses event loop.
● N
on-blocking I/O: Tasks don’t wait for completion; callback is executed
later.
Example:
onst fs = require('fs');
c
[Link]("Start");
[Link]("[Link]", (err, data) => {
if (err) throw err;
[Link]("File content: " + data);
});
[Link]("End");
👉 Output shows “End” before file content → Non-blocking.
Q2 (b) Creating, publishing, and installing [Link] package (npm).
1. Create package:
npm init -y
[Link]
Creates .
2. Write module:
// [Link]
[Link] = (a, b) => a + b;
3. Publish:
pm login
n
npm publish
4. Install:
npm install my-module
5. Use:
onst myModule = require('my-module');
c
[Link]([Link](2, 3));
Q3 (a) Connect [Link] to MongoDB.
[Link] applications usually connect to MongoDB using theMongoose library
N
(ODM – Object Data Modeling).
🔹 Steps to Connect
1. Install Mongoose
npm install mongoose
2. Import and Connect
const mongoose = require('mongoose');
// Connect to MongoDB
[Link]("mongodb://localhost:27017/studentDB", {
useNewUrlParser: true,
useUnifiedTopology: true
})
✅
.then(() => [Link](" Connected to MongoDB"))
❌
.catch(err => [Link](" Connection failed:", err));
🔹 Define a Schema & Model
// Schema
const studentSchema = new [Link]({
name: String,
age: Number,
course: String
});
// Model
const Student = [Link]("Student", studentSchema);
🔹 Insert a Document
const newStudent = new Student({
name: "Alice",
age: 21,
course: "IT"
});
[Link]()
n
.then(() => [Link]("Student saved"))
.catch(err => [Link](err));
🔹 Find Documents
[Link]()
S
.then(students => [Link](students));
🔹 Answer Summary (for exams)
● InstallMongoose(
npm install mongoose
).
[Link]()with MongoDB URI.
● Use
● DefineSchema(structure of document).
● Create aModel(interface with collection).
● Perform CRUD operations using the model.
Q3 (b) CRUD operations in Mongo shell.
● C reate DB:
use myDB
● Insert Document:
[Link]({ name: "John", age: 25 })
● R ead:
[Link]()
● Update:
[Link]({ name: "John" }, { $set: { age: 26 } })
● D
elete:
[Link]({ name: "John" })
Q4 (a) Data Binding in Angular.
Types:
{{ title }}
1. Interpolation:
<img [src]="imageUrl">
2. Property binding:
<button (click)="show()">Click</button>
3. Event binding:
<input [(ngModel)]="name">
4. Two-way binding:
Q4 (b) Routing in [Link] & Angular dynamic routing.
[Link]:
onst express = require('express');
c
const app = express();
[Link]('/home', (req, res) => [Link]("Home Page"));
a
[Link](3000);
Angular Routing ([Link]):
const routes: Routes = [
{ path: 'home/:id', component: HomeComponent }
];
/home/101→
Dynamic param: id = 101
.
Q5 (a) State and Props in React.
● State: Local data of component, can be changed.
● Props: Read-only data passed from parent.
Example Dynamic Form:
function Form() {
const [name, setName] = [Link]("");
return (
<div>
<input value={name} onChange={e => setName([Link])} />
<p>Hello {name}</p>
</div>
);
}
Q5 (b) REST API with [Link] & Express.
onst express = require('express');
c
const app = express();
[Link]([Link]());
// GET
[Link]('/users', (req, res) => [Link]([{ name: "Alice" }]));
// POST
[Link]('/users', (req, res) => [Link]("User Created"));
[Link](3000, () => [Link]("API running on 3000"));
PART C – (1 × 15 = 15 marks)
Q1 (a) Trending technologies + Event Registration System
🔹 1. Trending Technologies in Full Stack Web Development
1. Frontend Technologies
○ [Link]→ Component-based UI, Virtual DOM, fast rendering.
○ A
ngular→ Complete framework with two-way binding& TypeScript
support.
○ [Link]→ Lightweight, easy to learn, reactive UI library.
2. Backend Technologies
○ N
[Link] + [Link]→ Event-driven, non-blocking I/O, REST API
support.
○ Django (Python)→ Fast, secure framework with ORM.
○ Spring Boot (Java)→ Enterprise-level backend development.
3. Databases
○ MongoDB→ NoSQL, schema-less, JSON-like docs.
○ PostgreSQL / MySQL→ Relational DBs for structured data.
4. APIs
○ REST API(stateless, simple, JSON data exchange).
○ GraphQL(flexible querying, efficient).
5. Deployment / DevOps
○ Docker & Kubernetes→ Containerization & scaling.
○ AWS, Azure, Google Cloud→ Cloud hosting.
○ Heroku, Netlify, Vercel→ Easy deployment platforms.
🔹 2. Event Registration System
Problem Statement
● Students register forcultural eventsonline.
● Capture: Name, Email, Mobile, Event Selected.
● Store data inMongoDB.
● Sendconfirmation via Email/SMS.
Database Schema (MongoDB)
ollection: participants
C
{
"name": "Kumar",
"email": "kumar@[Link]",
"mobile": "9876543210",
"event": "Dance"
}
Backend API ([Link] + Express + MongoDB)
onst express = require('express');
c
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
// Connect DB
[Link]('mongodb://localhost:27017/eventsDB');
// Schema & Model
const participantSchema = new [Link]({
name: String,
mail: String,
e
mobile: String,
event: String
});
const Participant = [Link]('Participant', participantSchema);
// Register API
[Link]('/register', async (req, res) => {
const user = new Participant([Link]);
await [Link]();
// Simulated confirmation
[Link](`Email sent to ${[Link]}`);
[Link](`SMS sent to ${[Link]}`);
✅ Registration Successful!");
r [Link]("
});
[Link](3000, () => [Link]("Event Registration System running on port
a
3000"));
Frontend (HTML Form Example)
<form method="POST" action="/register">
<input type="text" name="name" placeholder="Name" required><br>
<input type="email" name="email" placeholder="Email" required><br>
<input type="text" name="mobile" placeholder="Mobile" required><br>
<select name="event">
<option value="Dance">Dance</option>
<option value="Music">Music</option>
<option value="Drama">Drama</option>
</select><br>
<button type="submit">Register</button>
</form>
● E
vent Registration System: Students enter details → stored in DB
(MongoDB) → backend sends confirmation via Email/SMS.
Q1 (b) Full stack dev for Jungle Safari Booking
🔹 1. Technology Stack (Recommended)
● Frontend (Client-Side)
○ R
[Link] / Angular→ Interactive UI for booking forms,availability
display.
○ HTML, CSS, JS→ Basic structure and styling.
● Backend (Server-Side)
○ N
[Link] + [Link]→ Handles booking logic, payments,
authentication.
● Database
○ MongoDB(NoSQL, flexible schema for reservations).
○ Stores users, booking details, payment history.
● APIs
○ REST API→ For booking, cancellations, availability checks.
○ Payment Gateway API→ Razorpay / Stripe for onlinepayments.
● Deployment
○ Hosted onAWS / Heroku / Netlify.
○ Dockerfor containerized deployment.
🔹 2. Features of the Jungle Safari Booking System
1. User Module
○ User Registration & Login.
○ Profile management.
2. Booking Module
○ Select Safari date, time, and vehicle type.
○ Check availability.
○ Make online payment.
○ Receive confirmation (Email + SMS).
3. Admin Module
○ Manage available slots.
○ Approve/reject bookings.
○ View reports of bookings and revenue.
🔹 3. Database Schema (MongoDB Example)
Users Collection
{
"name": "Arun",
"email": "arun@[Link]",
"password": "hashed_pw",
"mobile": "9876543210"
}
Bookings Collection
{
"userId": "64acb12...",
"date": "2025-08-20",
"time": "06:00 AM",
"vehicle": "Jeep",
"status": "Confirmed",
"paymentId": "pay_123xyz"
}
🔹 4. Backend API ([Link] + Express)
const express = require('express');
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
[Link]('mongodb://localhost:27017/safariDB');
// Schema
const Booking = [Link]('Booking', new [Link]({
userId: String,
date: String,
time: String,
vehicle: String,
status: String,
paymentId: String
}));
// API to create booking
[Link]('/book', async (req, res) => {
const booking = new Booking([Link]);
await [Link]();
[Link](" ✅ Safari booked successfully!");
});
[Link](3000, () => [Link]("Safari Booking System running..."));
🔹 5. Frontend Example (React – Booking Form)
import React, { useState } from 'react';
function BookingForm() {
const [date, setDate] = useState('');
const [time, setTime] = useState('');
const [vehicle, setVehicle] = useState('');
const handleSubmit = async () => {
await fetch("/book", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ date, time, vehicle, status: "Pending" })
});
alert("Booking Request Sent!");
};
return (
<div>
<h2>Jungle Safari Booking</h2>
input type="date" value={date} onChange={e =>
<
setDate([Link])} /><br/>
input type="time" value={time} onChange={e =>
<
setTime([Link])} /><br/>
<select value={vehicle} onChange={e => setVehicle([Link])}>
<option value="Jeep">Jeep</option>
<option value="Bus">Bus</option>
</select><br/>
<button onClick={handleSubmit}>Book Safari</button>
</div> );}
2025 April/May-Question paper with answers
PART A – (10 × 2 = 20 marks)
1. Compare between Browser and Server in Web
● Browser (Client):
○ Runs on user’s device.
○ Sends HTTP requests, renders HTML/CSS/JS.
○ Example: Chrome, Firefox.
● Server:
○ Runs on remote machine.
○ Handles requests, processes data, sends responses.
○ Example: Apache, [Link] server.
2. What is the role of backend services?
● Handlebusiness logic.
● Manageauthentication & authorization.
● Connect todatabases.
● ProvideAPIsto frontend.
● Ensuredata security and performance.
3. What is NPM? How to install it?
● N
PM (Node Package Manager):A tool to install, share, and manage
[Link] packages/libraries.
● Installed automatically with[Link].
● Verify installation:
npm -v
4. Write [Link] method with an example.
const http = require('http');
const server = [Link]((req, res) => {
[Link](200, { 'Content-Type': 'text/plain' });
[Link]("Hello, World!");
});
[Link](3000, () => [Link]("Server running on 3000"));
5. What are the advantages and disadvantages of NoSQL?
● Advantages:
○ Schema-less, flexible.
○ High scalability.
○ Handles unstructured data.
○ Faster for big data apps.
● Disadvantages:
○ Lacks standardization.
○ Limited support for complex queries/transactions.
○ Less mature compared to SQL.
6. How to set environment for MongoDB?
1. Download MongoDB from official site.
2. Install and addMongoDB bin pathtoEnvironment Variables.
3. Start server:
mongod
4. Open shell:
mongo
7. How do you configure routes?
● In[Link]:
[Link]('/home', (req, res) => [Link]("Home Page"));
● InAngular(
a
[Link]
):
const routes: Routes = [{ path: 'home', component: HomeComponent }];
8. What are built-in directives in AngularJS? Name any two.
● B
uilt-in directives→ Special attributes that add behavior to DOM
elements.
● Examples:
○
ng-model→ Binds input field to model.
○
ng-repeat→ Iterates over collection.
9. How are state and props different in React?
● State:
○ Local to a component.
setState/
○ Mutable (can be changed with useState
).
● Props:
○ Passed from parent to child.
○ Immutable (read-only).
10. What is webpack in React and why use it?
● Webpack:A bundler for JS, CSS, images.
● Combines all files intoone optimized bundle.
● Why use:
○ Faster loading.
○ Minifies code.
○ Supports modular development.
PART B – (5 × 13 = 65 marks)
11 (a) Explain the components of web development framework with
Q
diagram.
web development frameworkprovides libraries, tools, and structure for
A
building applications.
Components:
1. Frontend (Client-side)
○ UI built withHTML, CSS, JS.
○ Frameworks: React, Angular, [Link].
2. Backend (Server-side)
○ Handleslogic, authentication, APIs.
○ Frameworks: [Link], Django, Spring Boot.
3. Database
○ Stores persistent data.
○ SQL (MySQL, PostgreSQL) / NoSQL (MongoDB).
4. APIs
○ Bridge between frontend and backend.
○ REST or GraphQL.
5. Runtime & Server
○ Executes backend code ([Link], Apache, Nginx).
6. Deployment tools
○ Git, Docker, AWS, Heroku.
Diagram (Flow):
rontend (React/Angular) <----> Backend (Node/Express) <----> Database
F
(MongoDB/MySQL)
✅
Ans Summary: Framework = frontend + backend + database + APIs + server
environment.
11 (b) Explain in detail about methods in handling data input/output
Q
operation using [Link]. Or What are asynchronous operations? Explain
with suitable example.
● N
[Link] isasynchronous & non-blocking→ uses callbacks,promises,
async/await.
Methods of I/O handling:
Synchronous (Blocking)→ Code waits until task completes.
const fs = require('fs');
const data = [Link]('[Link]', 'utf8');
[Link](data);
1.
Asynchronous (Non-Blocking)→ Executes other taskswhile waiting.
[Link]('[Link]', 'utf8', (err, data) => {
if (err) throw err;
[Link](data);
});
[Link]("File read started...");
.
2
3. Event-driven I/O→ Uses event emitters.
4. Streams→ Process data chunk by chunk (useful forlarge files).
Advantages of async I/O:Efficient, handles many concurrentrequests.
✅
Ans Summary: [Link] uses async I/O (callbacks,promises, async/await) for
high performance.
Q12 (a) Illustrate in detail about MVC architecture with neat diagram.
MVC (Model–View–Controller):Design pattern for webapplications.
● Model:Handles data and business logic.
● View:Handles UI and presentation.
● C
ontroller:Acts as bridge, processes input, updatesmodel, and refreshes
view.
Flow:
1. User →View.
2. Controllercaptures request.
3. CallsModel.
4. Model updates → sends back to View.
Diagram:
User → View ↔ Controller ↔ Model ↔ Database
✅
Ans Summary: MVC separates concerns → improves maintainability,
scalability.
12 (b) What are callbacks in [Link] and how are they useful in handling
Q
async operations?
● A
callbackis a function passed as an argument toanother function,
executed after task completion.
● Used forasync operations(file read, DB query, APIcall).
Example:
[Link]('[Link]', 'utf8', (err, data) => {
if (err) throw err;
[Link]("File Content: ", data);
});
[Link]("Reading file...");
Usefulness:
● Prevents blocking of execution.
● Helps [Link] handle multiple requests concurrently.
✅
Ans Summary: Callbacks handle async I/O efficiently in [Link].
13 (a) Explain CRUD operations over the collections and documents
Q
stored in MongoDB with example.
CRUD = Create, Read, Update, Delete.
1. Create (Insert)
[Link]({ name: "Alice", age: 20 });
2. Read (Find)
[Link]();
[Link]({ name: "Alice" });
3. Update
[Link]({ name: "Alice" }, { $set: { age: 21 } });
4. Delete
[Link]({ name: "Alice" });
✅ insertOne
Ans Summary: MongoDB CRUD uses find
, updateOne
, ,
deleteOne
.
13 (b) What is MongoDB and features? How to create and remove user?
Q
Summarize roles. (4+5+4)
MongoDB:A NoSQL database that stores data in JSON-like documents.
Features:
● Schema-less.
● High scalability (sharding, replication).
● Stores JSON/BSON.
● High performance.
User Management:
● Create user:
[Link]({
user: "admin1",
pwd: "password123",
roles: [{ role: "readWrite", db: "studentDB" }]
});
● Remove user:
[Link]("admin1");
Roles:
●
read readWrite
, dbAdmin
, userAdmin
, clusterAdmin
, .
14 (a) What is data binding in Angular? What are its types? Explain with
Q
example. (5+8)
ata Binding:Technique to bind data between component(TS class) and
D
template (HTML).
Types:
1. Interpolation(One-way → TS → HTML)
<h1>{{ title }}</h1>
2. Property Binding(TS → HTML attribute)
<img [src]="imageUrl">
3. Event Binding(HTML event → TS function)
<button (click)="show()">Click</button>
4. Two-way Binding(Sync both directions)
<input [(ngModel)]="username">
<p>Hello {{ username }}</p>
Use:Makes applications interactive and dynamic.
Q14 (b) Compare and construct request and response objects in [Link]
🔹 Request Object (req)
● RepresentsHTTP requestreceived by the server.
● C
ontainsdata sent by client(URL, query params, body, headers,
cookies).
● Common properties:
○
[Link]→ Query string parameters
○
[Link]→ Route parameters
○
[Link]→ Data from POST request body
○
[Link]→ Request headers
🔹 Response Object (res)
● Represents theHTTP responsethat the server sendsback to client.
● Used to sendstatus codes, data, or files.
● Common methods:
○
[Link]()→ Send response data
○
[Link]()→ Send JSON response
○
[Link](code)→ Set HTTP status code
○
[Link]()→ Redirect to another URL
Example:
const express = require('express');
const app = express();
[Link]('/user/:id', (req, res) => {
const userId = [Link]; // Request object
[Link]({ message: `User ID is ${userId}` }); // Response object
});
[Link](3000, () => [Link]("Server running"));
✅ req= input from client,
Summary: res= output sent to client.
15 (a) Expressing in Angular with Examples (Directives, Pipes,
Q
Interpolation)
Angular provides ways toexpress data and logic in HTML templates:
1. Interpolation (One-way Binding)
● Embeds dynamic values into templates.
<h1>{{ title }}</h1>
2. Property Binding
● Binds component property → HTML attribute.
<img [src]="imageUrl">
3. Event Binding
● Handles events from template → component.
<button (click)="sayHello()">Click</button>
4. Two-Way Binding
● Syncs data between component and view.
<input [(ngModel)]="username">
<p>Hello {{ username }}</p>
5. Built-in Directives
●
*ngFor→ Iterates collection.
<li *ngFor="let item of items">{{ item }}</li>
●
*ngIf→ Conditional rendering.
<p *ngIf="isLoggedIn">Welcome User!</p>
6. Pipes
● Transform data in templates.
<p>{{ today | date:'fullDate' }}</p>
✅
Summary: Angular “expresses” data in views usingbinding, directives, and
pipesfor interactive apps.
Q15 (b) What is React Router and its purpose?
● React Routeris a library for routing in React apps.
● Allows navigation between pageswithout refreshingthe browser.
● Purpose:
○ Handle client-side routing.
○ Create SPA (Single Page Applications).
○ Manage dynamic URLs (
/user/:id
).
Example:
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/home" element={<h2>Home Page</h2>} />
<Route path="/about" element={<h2>About Page</h2>} />
</Routes>
</BrowserRouter>
);
}
Q16 (b) State Management in React
What is State?
● State = data maintained inside a component.
useState()(Functional Component) or
● Changed using
[Link]()(Class Component).
Example: Counter with State
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Sharing State Between Components
● Parent Componentholds state.
● Passes state & functions toChild Component via props.
Example:
function Child({ count }) {
return <h2>Child Count: {count}</h2>;
}
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<Child count={count} />
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
✅
Summary: React Router → SPA navigation. State →local data. Shared via
propsor advanced libraries (Redux, Context API).
Q15 (b) React Class Component Lifecycle in Online Shopping App
Lifecycle Methods (Class Component):
1. Mounting (Component creation)
○
constructor()
○
render()
○
componentDidMount()(API calls)
2. Updating (on props/state change)
○
shouldComponentUpdate()
○
render()
○
componentDidUpdate()
3. Unmounting (component removal)
○
componentWillUnmount()
Example: Shopping Cart
class Cart extends [Link] {
constructor(props) {
super(props);
[Link] = { items: [] };
}
componentDidMount() {
// Fetch products from API
fetch("/api/products")
.then(res => [Link]())
.then(data => [Link]({ items: data }));
}
componentDidUpdate(prevProps, prevState) {
if ([Link] !== [Link]) {
[Link]("Cart updated!");
}
}
componentWillUnmount() {
[Link]("Cart component removed!");
}
render() {
return (
<ul>
{[Link](item => <li key={[Link]}>{[Link]}</li>)}
</ul>
);
} }
PART C (1 × 15 = 15 marks)
6(a)Develop a simple online system to book a slot for vehicle water
1
washing. Assume that the carriage has facilities to wash only four
wheeler vehicles and it can house a maximum of three vehicles only.
Send a combination SMS and service completion SMS to the
registered mobile number after successful booking and completion of
water washing. Use suitable full stack technologies to implement the
above system considering client side and server-side components.
Also summarize the reasons for selecting particular technologies for
development.
Online Vehicle Water Washing Slot Booking System
🔹 Requirements
● Service only for4-wheelers.
● Capacity =3 vehicles per slot.
● User books slot → receivesconfirmation SMS.
● After washing →completion SMS.
● Full stack solution (Client + Server + Database).
Technology Selection
● Frontend (Client-Side): [Link]
○ Provides interactive UI with forms.
● Backend (Server-Side): [Link] + [Link]
○ Handles booking logic, slot validation, and SMS notifications.
● Database: MongoDB
○ Stores booking details in flexible document format.
● SMS Service: Twilio API (or simulation using [Link])
○ Sends confirmation & completion messages.
Database Schema (MongoDB)
Booking {
"vehicleNo": "TN10AB1234",
"ownerName": "Arun",
"mobile": "9876543210",
"slotTime": "10:00 AM",
"status": "Confirmed"
}
Backend API ([Link] + Express)
const express = require('express');
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
// DB Connection
[Link]("mongodb://localhost:27017/washDB");
// Schema
const Booking = [Link]("Booking", new [Link]({
vehicleNo: String,
ownerName: String,
mobile: String,
slotTime: String,
status: String
}));
// Book Slot
[Link]('/book', async (req, res) => {
onst count = await [Link]({ slotTime:
c
[Link] });
if (count >= 3) {
return [Link](" ❌ Slot Full! Please choose another.");
}
const booking = new Booking({ ...[Link], status: "Confirmed" });
await [Link]();
// Simulated SMS
[Link](`SMS to ${[Link]}: Booking Confirmed for
c
${[Link]}`);
[Link](" ✅ Booking Confirmed!");
});
// Complete Service
[Link]('/complete/:id', async (req, res) => {
onst booking = await [Link]([Link], {
c
status: "Completed" });
[Link](`SMS to ${[Link]}: Service Completed for Vehicle
c
${[Link]}`);
[Link](" ✅ Service Completed!");
});
[Link](3000, () => [Link]("Vehicle Wash System running..."));
Frontend (React – Booking Form)
import React, { useState } from 'react';
function BookingForm() {
const [vehicleNo, setVehicleNo] = useState("");
const [ownerName, setOwnerName] = useState("");
const [mobile, setMobile] = useState("");
const [slotTime, setSlotTime] = useState("");
const handleSubmit = async () => {
await fetch("/book", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ vehicleNo, ownerName, mobile, slotTime })
});
alert("Booking Successful! Confirmation SMS sent.");
};
return (
<div>
<h2>Book Vehicle Wash Slot</h2>
input placeholder="Vehicle No" onChange={e =>
<
setVehicleNo([Link])} /><br />
input placeholder="Owner Name" onChange={e =>
<
setOwnerName([Link])} /><br />
input placeholder="Mobile" onChange={e =>
<
setMobile([Link])} /><br />
<input type="time" onChange={e => setSlotTime([Link])} /><br
/>
<button onClick={handleSubmit}>Book Slot</button>
</div>
);
}
export default BookingForm;
6(b)Develop a web based online registration system to register state
1
level athletic events organized by the Government of Tamil Nadu
Perform the following operations in dashboard.
( i) Create a new event registration. (ii) Delete the registration (iii) Update the
registration.
Online Registration System for State-Level Athletic Events
🔹 Requirements
● Register participants for Govt. athletic events.
● Dashboard operations:
1. Create new registration
2. Delete registration
3. Update registration
Database Schema (MongoDB)
Registration {
"name": "Vijay",
"age": 19,
"event": "100m Race",
"mobile": "9876543211"
}
Backend ([Link] + Express + MongoDB)
const express = require('express');
const mongoose = require('mongoose');
const app = express();
[Link]([Link]());
[Link]("mongodb://localhost:27017/athleticsDB");
onst Registration = [Link]("Registration", new
c
[Link]({
name: String,
age: Number,
event: String,
mobile: String
}));
// CREATE
[Link]('/register', async (req, res) => {
const reg = new Registration([Link]);
await [Link]();
[Link]("✅ Registration Created!");
});
// UPDATE
[Link]('/update/:id', async (req, res) => {
await [Link]([Link], [Link]);
[Link](" ✅ Registration Updated!");
});
// DELETE
[Link]('/delete/:id', async (req, res) => {
await [Link]([Link]);
[Link](" ✅ Registration Deleted!");
});
[Link](3000, () => [Link]("Athletics Registration System
a
running..."));
You might also like
- FSWD Short Answers: Web Development ConceptsNo ratings yetFSWD Short Answers: Web Development Concepts25 pages
- Web Development Framework Interview QuestionsNo ratings yetWeb Development Framework Interview Questions4 pages
- Node.js and Express.js Development GuideNo ratings yetNode.js and Express.js Development Guide2 pages
- MEAN Stack JavaScript Concepts ExplainedNo ratings yetMEAN Stack JavaScript Concepts Explained7 pages
- MEAN Stack Interview Questions & AnswersNo ratings yetMEAN Stack Interview Questions & Answers8 pages
- JavaScript and Node.js Programming TasksNo ratings yetJavaScript and Node.js Programming Tasks21 pages
- Node.js Essentials: NPM, Async File Read, and MoreNo ratings yetNode.js Essentials: NPM, Async File Read, and More62 pages
- Full Stack Web Development Question BankNo ratings yetFull Stack Web Development Question Bank9 pages
- Full Stack Development with Node.js and MongoDBNo ratings yetFull Stack Development with Node.js and MongoDB5 pages
- Full Stack Web Development Question BankNo ratings yetFull Stack Web Development Question Bank2 pages
- Node.js and Express.js Interview QuestionsNo ratings yetNode.js and Express.js Interview Questions4 pages
- Virtual Machine Setup and Management GuideNo ratings yetVirtual Machine Setup and Management Guide56 pages
- Enhancing Mastercard's Modelling EngineNo ratings yetEnhancing Mastercard's Modelling Engine28 pages
- Transformer Testing Procedures OverviewNo ratings yetTransformer Testing Procedures Overview42 pages
- Essential G-Codes for CNC Lathe ProgrammingNo ratings yetEssential G-Codes for CNC Lathe Programming2 pages
- CGI-BP: Modified Scale for Bipolar Disorder100% (1)CGI-BP: Modified Scale for Bipolar Disorder13 pages
- Excel Programming for Concrete EstimationNo ratings yetExcel Programming for Concrete Estimation6 pages
- On Scale Independence For Querying Big Data: Wenfei Fan Floris Geerts Leonid LibkinNo ratings yetOn Scale Independence For Querying Big Data: Wenfei Fan Floris Geerts Leonid Libkin12 pages
- Carbo::lyser II/III Water Quality ProbesNo ratings yetCarbo::lyser II/III Water Quality Probes2 pages
- A Fortran Chemical Kinetics Package For The Analysis of GasphaseNo ratings yetA Fortran Chemical Kinetics Package For The Analysis of Gasphase162 pages
- Krebs Cycle and ATP Production ExplainedNo ratings yetKrebs Cycle and ATP Production Explained2 pages
- Microcontroller Automatic Transfer SwitchNo ratings yetMicrocontroller Automatic Transfer Switch8 pages
- Review Article: The AC and DC Conductivity of NanocompositesNo ratings yetReview Article: The AC and DC Conductivity of Nanocomposites10 pages