MODULE 1

1. Define Clickstream Analysis and state its applications

Clickstream analysis is the process of analyzing user behavior on websites, mobile apps,
and other digital platforms. It involves collecting data on user interactions, such as clicks,
page views, and other actions, and using that data to gain insights into user behavior
patterns. A click-stream is the record of the parts of the screen a user clicks while browsing
or while using another application.

As the user clicks, actions are logged on the client side or in the web server or on the web
browser, router, or proxy server. This includes information like how much time a user spent
on a given page, what page features they engaged with, and where they went next.

This information can then be used to optimize the website layout, improve navigation, and
make it easier for users to find what they are looking for.
Can also be used to gain insights into user preferences and behavior patterns.
For eg, businesses can use it to:
- identify which products or services are most popular
- what features users are most interested in
- how users are discovering their products or services.

Useful for:
- Web Activity Analysis
- Software Testing
- Market Research
- Analyzing employee productivity

Data is obtained from a site in the form of Click-stream records. Each record contains:

- Server IP
- Client IP
- Time Stamp with date
- Number of bytes transferred
- Status: HTTP status code
- URL requested (request method, resource requested, protocol used)

2. Explain the evolution of the web.

1. Web 1.0 (1991-2004):

- Web 1.0 was the early stage of the World Wide Web, characterized by static web pages
where content was served directly from the server's file system.
- Interaction was limited to clicking hyperlinks to navigate between static pages.
- Technologies like HTML 3.2, frames, and tables were commonly used for layout and
design.
- Ofoto exemplifies Web 1.0, providing a platform for storing, sharing, viewing, and printing
digital pictures but with limited user interaction.
2. Web 2.0 (1999-2012):
- Web 2.0 ushered in a new era of the internet, focusing on user-generated content,
collaboration, and interactivity.
- Dynamic content and technologies like AJAX and JavaScript frameworks allowed for
more responsive and interactive web experiences.
- Users could actively participate through features like blogging, social networking, tagging,
and social bookmarking.
- Web 2.0 platforms empowered users to create, share, and organize information
collectively, leading to a more participatory and user-centric web.

3. Web 3.0 (2012 onwards):

- Web 3.0 represents the evolution of web interaction and utilization, aiming to transform
the web into a more intelligent and interconnected space.
- Key features include the Semantic Web, which enables machines to understand the
meaning of data, leading to more efficient search and analysis.
- Artificial Intelligence plays a significant role, enhancing the ability of computers to process
and interpret information like humans.
- 3D graphics become prevalent, enriching web experiences in areas such as museum
guides, e-commerce, and gaming.
- Connectivity reaches a new level, with information being more interconnected through
semantic metadata, leading to a seamless user experience across devices and applications.
- Distributed Ledger Technology (DLT) and smart contracts introduce new possibilities for
ownership and security, allowing users to have virtual ownership of content and assets.

In summary, the web has evolved from a static information repository (Web 1.0) to a
dynamic and interactive platform driven by user participation (Web 2.0), and now towards a
more intelligent, interconnected, and secure space (Web 3.0). Each phase brings new
technologies and paradigms that shape how we interact with and perceive the internet.

3. Characteristics of Semantic Web

1. Machine-Readable Data: The ability for machines to understand and process data is
fundamental to the Semantic Web's vision of automating tasks and facilitating intelligent
interactions between systems.

2. Linked Data: Interconnecting information through standardized relationships enables a

networked structure that promotes data integration, interoperability, and seamless navigation
across diverse datasets.

3. Ontologies: Formal descriptions of concepts and relationships provide a shared

vocabulary and common understanding, facilitating effective communication and knowledge
representation in specific domains.

4. Interoperability: The Semantic Web's emphasis on standards and protocols ensures that
data can be exchanged and integrated across different platforms, formats, and applications,
promoting collaboration and information sharing.
5. Reasoning and Inference: The ability to perform automated reasoning and inference
allows systems to derive new knowledge from existing data, enabling more advanced
functionalities such as intelligent search, decision support, and semantic analysis.

1. Compare and contrast web 1.0, web 2.0 and web 3.0. *

2. Discuss the steps to choose a web analytic tool.

Choosing an Analytics Tool:

1. Business Objectives:
- Identify core business objectives.
- Break them into measurable analytics goals.
- Choose a platform aligning with these goals.

2. Pricing:
- Understand costs including subscriptions and hidden fees.
- Assess if building/maintaining an in-house solution is feasible.

3. User Interface and Visualization:

- Prioritize a user-friendly interface.
- Ensure easy creation and understanding of dashboards for diverse users.

4. Advanced Analytics:
- Look for tools that go beyond basic calculations.
- Capable of recognizing patterns and predicting future trends.

5. Integration:
- Decide between standalone or integrated solutions.
- Assess connectivity with existing systems and third-party data.
6. Mobility:
- Evaluate mobile analytical capabilities based on user needs.
- Mobile BI enhances access, reaction times, and user adoption.

7. Agility and Scalability:

- Opt for cloud-based platforms for scalability.
- Pay-as-you-go plans support businesses in different growth stages.

8. Multiple Sources of Data:

- Choose tools handling structured, semi-structured, and unstructured data.
- Prefer solutions not reliant on extensive IT support.

9. Customization:
- Select tools adaptable to unique business requirements.
- Assess flexibility for future alterations or extensions.

10. Collaboration:
- Prioritize collaborative analytics for shared decision-making.
- Ensure tools facilitate sharing and interaction with data.

11. Security:
- Evaluate provider/vendor security measures.
- Implement controls at process, system, and data levels.
- Address implications of mobile BI on data access outside company firewalls.
 3. Define Semantic web. Explain the components of Semantic Web Stack.
***

The Semantic Web, sometimes referred to as Web 3.0 (distinct from Web3), aims to evolve
the current internet by making data machine-readable and interoperable. Instead of just
displaying documents and hyperlinks, the Semantic Web aims to embed meaning and
context into data, allowing machines to understand and utilize information like humans do.

1. Identifiers (URI):
Unique identifiers for resources on the web (like web pages, images, etc.).

2. Character Set (UNICODE):

Standardized character encoding scheme that supports most languages and symbols.

3. Syntax (XML):
Extensible Markup Language for structured data representation.

4. Data Interchange (RDF):

Resource Description Framework, a standard for data exchange using triples (subject,
predicate, object). It is used for representing highly interconnected data.
It represents information using a graph-based model, consisting of triples (subject, predicate,
object). This allows for the creation of structured data where entities (nodes) are connected
by relationships (edges). It uses URIs (Uniform Resource Identifiers) to uniquely identify
subjects, predicates, and objects, ensuring that data can be shared and understood across
different systems.
N-Triples is a plain text format for representing RDF (Resource Description Framework)
data.
Each statement (triple) in N-Triples consists of a subject, predicate, and object, separated by
spaces and ending with a period.

5. Taxonomies (RDFS):
RDF Schema, a vocabulary for defining relationships between RDF classes and properties.

6. Ontologies (OWL):
OWL (Web Ontology Language) is a semantic web language designed to create, share, and
manage ontologies, which define the relationships between concepts in a domain. It
enhances RDF by providing additional vocabulary for expressing complex relationships and
constraints.

Types of OWL:

OWL Lite: Simplified version for users needing basic classification and constraints.
OWL DL: Supports maximum expressiveness while retaining computational completeness,
decidability, and efficiency.
OWL Full: Offers maximum expressiveness and the syntactic freedom of RDF with no
computational guarantees.

7. Rules (RIF/SWRL):
Rule Interchange Format/Semantic Web Rule Language, for expressing rules within the
semantic web.

8. Querying (SPARQL):
SPARQL Protocol and RDF Query Language, for querying and retrieving RDF data.
The main query form in SPARQL is a SELECT query.
• A SELECT query has two main components: a list of selected variables and a WHERE
clause for specifying the graph patterns to match.
• The result of a SELECT query is a table where there will be one column for each selected
variable and one row for each pattern match.
SELECT <variables>
WHERE {
<graph pattern>
}
A graph pattern in a SPARQL WHERE clause consists of the subject,
predicate and object triple to find a match for in the data.

9. Unifying Logic:
A logical system that can reason about concepts and relationships in the semantic web.

10. Proof:
Techniques for establishing the authenticity or validity of statements in the semantic web.

11. Trust:
Mechanisms for ensuring the reliability and accuracy of information in the semantic web.

12. User Interface and Applications:

Tools and interfaces for interacting with and using the semantic web like design, layout,
colours, and typography.
 13. Cryptography:
• It is important to ensure and verify that semantic web statements are coming from trusted
source.
• This can be achieved by appropriate digital signature of RDF statements.

List and explain the factors of measuring the success of a website. *

 MODULE 2
1. State the features of Typescript. Also state the advantage of Typescript.

Features:

1. TypeScript supports object-oriented programming with features like classes,

interfaces, and inheritance.
2. It's suitable for both client-side and server-side development.
3. TypeScript seamlessly integrates with existing JavaScript code and libraries.
4. Type inference and static typing improve code quality and catch errors early.
5. TypeScript code is portable and can run on any browser or operating system.
6. It facilitates DOM manipulation for dynamic web page interactions.
7. Existing JavaScript code can be gradually migrated to TypeScript.
8. TypeScript benefits from a rich ecosystem of development tools and IDE support.
9. Static typing enhances error detection and code maintainability.
10. TypeScript evolves with new language features and stays up-to-date with
ECMAScript standards.

2. Typescript vs Javascript
 3. Differentiate var vs let

4. Arrow function in typescript

● Arrow functions in TypeScript provide a concise syntax for writing functions,
especially for short, one-liner functions.
● Arrow functions omit the function keyword and use the => syntax. They can have
either a single expression or a block of statements.
● The => symbol is often referred to as the "fat arrow", distinguishing arrow functions
from traditional function expressions.
● Arrow functions are sometimes called lambda functions due to their similarity to
anonymous functions in lambda calculus.
// Single expression arrow function
let add = (x: number, y: number): number => x + y;

// Arrow function with a block of statements

let greet = (name: string): void => {
console.log(`Hello, ${name}!`);
};

5. Explain Modules in TypeScript with example

Modules in TypeScript
● Modules in TypeScript provide a way to organize code into logical units,
encapsulating related variables, functions, classes, and interfaces.
● A module is a group of related entities such as variables, functions, classes, and
interfaces.
● It operates within its local scope, preventing pollution of the global namespace.
Exporting and Importing:
Modules are created using the export keyword to expose components outside the module.
Components from one module can be used in another module by using the import keyword.
Module Loaders:
Module loaders are tools that help in loading modules into the application.
CommonJS module loader is widely used in Node.js environments, while require.js is
popular for web applications.
Steps:
1. Module Creation: Components are defined within a module using the export keyword.
2. Accessing Modules: Components from one module are accessed in another using
the import keyword.
3. Compiling and Execution: Modules are compiled using TypeScript compiler (tsc) and
executed.

6. Explain the concept of method overloading with a suitable example. *

Function/Method Overloading:

● Method overloading is the process in which one method could be used multiple times
with the same name and different parameter types or return types.
 ● Method overloading in TypeScript allows you to define multiple signatures for a single
function.
● Function name in overloaded functions should be the same.
● Return type of overloaded functions along with data types of parameters could be
altered (changed).
● Method Overloading provides code reusability, which saves time and effort.
● This process also saves memory space, so that the program execution becomes a
bit faster.

class Calculator {
// Method overload signatures
add(a: number, b: number): number;
add(a: number, b: number, c: number): number;
add(a: string, b: string): string;

// Single implementation
add(a: number | string, b: number | string, c?: number): number | string {
if (typeof a === "number" && typeof b === "number" && typeof c === "number") {
// Adding three numbers
return a + b + c;
} else if (typeof a === "number" && typeof b === "number") {
// Adding two numbers
return a + b;
} else if (typeof a === "string" && typeof b === "string") {
// Concatenating two strings
return a + b;
} else {
throw new Error("Invalid arguments");
}
}
}

// Usage
let calc = new Calculator();

console.log(calc.add(1, 2)); // Output: 3

console.log(calc.add(1, 2, 3)); // Output: 6
console.log(calc.add("Hello, ", "World!")); // Output: Hello, World!

7. Inheritance in Typescript with examples.

In TypeScript, inheritance allows a class to inherit properties and methods from another
class, facilitating code reuse and promoting a hierarchical structure. TypeScript supports
several types of inheritance, including single inheritance, multilevel inheritance, hierarchical
inheritance, and hybrid inheritance. Let's explore each type with a basic example:

1. Single Inheritance:
Single inheritance involves one class inheriting from another class.
The derived class inherits properties and methods from a single base class.

2. Multilevel Inheritance:
Multilevel inheritance involves a chain of inheritance with multiple levels.
A derived class inherits properties and methods from its immediate base class, which, in
turn, may inherit from another base class.

3. Hierarchical Inheritance:
Hierarchical inheritance involves multiple derived classes inheriting from a single base class.
Each derived class inherits properties and methods from the same base class.
 8. Explain the concept of multilevel inheritance with a suitable example. *

TypeScript supports various types of inheritance, including single inheritance (class

extending a single base class), multi-level inheritance (a class extending another class that,
in turn, extends another class), and hierarchical inheritance (multiple classes inheriting from
a common base class).

Multi-level Inheritance:
● Multilevel inheritance involves a hierarchy of classes, where a derived class extends
another class, and this derived class, in turn, serves as the base class for another
class.
● Each level in the hierarchy represents a different class, and each class inherits the
properties and methods of its immediate parent class.
● TypeScript supports multilevel inheritance through the use of the extends keyword,
allowing a class to extend another class, creating a chain of inheritance.

class ClassA {
constructor(public name: string) {}
actionA() {
console.log(`${this.name} does action A`);
}
}
class ClassB extends ClassA {
actionB() {
console.log(`${this.name} does action B`);
}
}
class ClassC extends ClassB {
actionC() {
console.log(`${this.name} does action C`);
}
}
// Creating instances and testing
const a = new ClassA('ObjectA');
a.actionA();
const b = new ClassB('ObjectB');
b.actionA();
b.actionB();
const c = new ClassC('ObjectC');
c.actionA();
c.actionB();
c.actionC();

9. Write a typescript program to find the factorial of a number when the

input is user defined.

import * as readline from 'readline';

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
function calculateFactorial(num: number): number {
if (num === 0 || num === 1) {
 return 1;
} else {
return num * calculateFactorial(num - 1);
}
}
rl.question("Enter a number to calculate its factorial: ", (input: string) => {
const number = parseInt(input);
if (isNaN(number) || number < 0) {
console.log("Please enter a valid positive integer.");
} else {
const factorial = calculateFactorial(number);
console.log(`Factorial of ${number} is: ${factorial}`);
}
rl.close();
});

MODULE 3
Routing in angularjs using ngRoute, ng-Repeat, ng-style, ng-view with
example. ****

Routing in AngularJS refers to the process of defining navigation paths within a single-page
application (SPA). It allows you to define different views/templates and associate them with
specific URLs. When a user navigates to a particular URL, AngularJS dynamically loads the
associated view/template and updates the browser's URL without causing a full page reload.
Routing in AngularJS is typically achieved using the ngRoute module, which provides the
$routeProvider service to configure routes.
1. ngRoute: This is a module provided by AngularJS to enable routing in your application. It
allows you to define different routes for different URLs and load different templates and
controllers based on those routes.
2. ngRepeat: This directive is used for repeating HTML elements for each item in a
collection. It's useful for displaying lists of items dynamically.
3. ngStyle: This directive allows you to set CSS styles dynamically based on the evaluation
of an expression.
4. ngView: This directive is a container for the view portion of your AngularJS application. It
gets replaced with the appropriate template based on the current route.

Here's an example of how you can use these components together:

In this example:

- We define our AngularJS app `myApp` and include the `ngRoute` module as a
dependency.
- We configure routes using `$routeProvider` in the app's configuration phase.
- We define two controllers: `HomeController` and `AboutController`, each associated with a
specific route.
- In the HTML templates (`home.html` and `about.html`), we use `ngRepeat` to iterate over a
list of items in the home page, and `ngStyle` to dynamically apply styles in the about page.
- Finally, we use the `ngView` directive to specify where the templates should be injected
based on the current route.
Explain AngularJS ng-app, ng-init, ng-model, ng-click, ng-repeat,
ng-show/hide, ng-if directive with examples

ng-app:
● ng-app is a directive that defines the root element of an AngularJS application. It
initializes the AngularJS framework within a portion of the HTML document.
● It tells AngularJS which part of the HTML document it should manage.
● It's typically placed on the <html>, <body>, or a specific <div> element.

ng-init:
● ng-init initializes data for a specific element in the AngularJS application.
● It's used to initialize variables directly in the HTML without needing to define them in
a controller.
● However, using ng-init for complex logic is discouraged; it's primarily for simple
variable initialization.

ng-model:
● ng-model binds the value of HTML controls (input, select, textarea) to application
data.
 ● It creates a two-way data binding between the view and the model, so when the
value in the UI changes, the underlying model data changes, and vice versa.
● It's commonly used for form elements to keep the view and model in sync.

ng-click:
● The ngClick directive binds a function to a click event on an element.

ng-repeat:
● The ngRepeat directive iterates over a collection (array or object) and instantiates a
template for each item in the collection.
ng-show/ng-hide:
● The ngShow and ngHide directives show or hide an element based on an
expression.

ng-if:
● The ngIf directive removes or recreates a portion of the DOM tree based on the
provided expression. It's similar to ngShow and ngHide, but it completely removes or
recreates the DOM element, including its children.

AngularJS Dependency injection

AngularJS Dependency Injection

● AngularJS comes with a built-in dependency injection mechanism, allowing you to
divide your application into multiple components that can be injected into each other
as dependencies.
● Dependency Injection is a software design pattern that specifies how components
obtain their dependencies, providing them instead of coding them within the
component.
● Modularizing your application makes it easier to reuse, configure, and test the
components.
The core types of objects and components in AngularJS are:
- Value
- Factory
- Service
- Provider
- Constant
These objects and components can be injected into each other using AngularJS
Dependency Injection.

1. Value
● In AngularJS, a value is a simple object, which can be a number, string, or JavaScript
object.
● It is used to pass values in factories, services, or controllers during the run and config
phases.
● To inject a value into an AngularJS controller function, add a parameter with the
same name used when the value is defined.

2. Factory
● A factory is a function used to return a value.
● When a service or controller needs a value injected from the factory, it creates the
value on demand, typically using a factory function to calculate and return the value.

3. Service
● In AngularJS, a service is a JavaScript object containing a set of functions to perform
certain tasks.
● Services are created by using the `service()` function on a module and then injected
into controllers.
 4. Provider
● A provider is used internally in AngularJS to create services, factories, etc., during
the config phase (the phase during which AngularJS bootstraps itself).
● It is the most flexible form of factory you can create. A provider is a special factory
method with a `get()` function used to return the value/service/factory.

5. Constants
You cannot inject values into the `module.config()` function. Instead, constants are used to
pass values at the config phase.
Design a registration form and perform validation of Fields.

<!DOCTYPE html>
<html ng-app="registrationApp">
<head>
<title>Registration Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div ng-controller="registrationController">
<h2>Registration Form</h2>
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<div>
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<span ng-show="registrationForm.name.$dirty && registrationForm.name.
$error.required">Name is required</span>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<span ng-show="registrationForm.email.$dirty && registrationForm.email.
$error.required">Email is required</span>
<span ng-show="registrationForm.email.$dirty && registrationForm.email.
$error.email">Invalid email format</span>
</div>
<div>
<label>Password:</label>
<input type="password" name="password" ng-model="user.password" required>
<span ng-show="registrationForm.password.$dirty && registrationForm.password.
$error.required">Password is required</span>
</div>
<button type="submit" ng-disabled="registrationForm.$invalid">Register</button>
</form>
</div>
<script>
angular.module('registrationApp', [])
.controller('registrationController', function($scope) {
$scope.user = {};
 $scope.submitForm = function() {
// Here you can send the registration data to your backend or perform any other
actions
console.log('Submitting registration form:', $scope.user);
};
});
</script>
</body>
</html>

AngularJS Custom Directives with an example.

AngularJS custom directives are created using the `.directive()` function, and they can be
invoked in HTML using element names, attributes, classes, or comments. Here's a quick
recap of how it works:

1. Create a New Directive: Define a new directive using the `.directive()` function provided by
AngularJS. This function takes two parameters: the name of the directive and a factory
function that returns the directive definition object.

app.directive('w3TestDirective', function() {
return {
restrict: 'E', // restrict to element usage
template: '<div>This is a test directive!</div>'
};
});

2. Invoke the Directive: In your HTML, use the directive by its camelCase name, but
separated by dashes.
<w3-test-directive></w3-test-directive>

You can also invoke the directive using attributes, classes, or comments:

- Attribute: Use the directive as an attribute in an HTML element.

<div w3-test-directive></div>
- Class: Apply the directive as a class to an HTML element.
<div class="w3-test-directive"></div>

- Comment: Use the directive as a comment in HTML.

<!-- directive: w3-test-directive -->

Each of these methods will invoke the same directive, executing its functionality or rendering
its template as defined in the directive's definition object. This flexibility allows for a variety of
usage patterns and integration into different parts of your HTML structure.
AngularJS $http service in detail with its get() and post() methods.

1. AngularJS's `$http` service is a powerful tool for making HTTP requests in AngularJS
applications.
2. It facilitates communication with remote servers using XMLHttpRequest or JSONP
and provides a straightforward way to interact with RESTful APIs or other web
services.
3. The `$http` service makes HTTP requests asynchronously, meaning they don't block
the execution of other code.
4. It returns promises, allowing for easy handling of asynchronous operations using
`.then()` and `.catch()` methods.
5. Requests can be configured with options such as headers, data, and timeout.
6. Interceptors can be used to globally intercept and modify HTTP requests or
responses.
7. Robust error handling mechanisms are available for managing server errors or failed
requests.

- Both `get()` and `post()` methods return promises that can be used to handle success or
failure of the HTTP request.
- The `config` parameter in both methods allows for customization of the request, such as
setting headers, specifying request parameters, enabling caching, etc.

`get()` Method
The `get()` method of the `$http` service is used to send HTTP GET requests to the
specified URL.

Syntax: $http.get(url[, config]);

Parameters:
- `url`: The URL to which the request is sent.
- `config` (optional): Configuration options such as headers, params, cache, etc.

$http.get('/api/data')
.then(function(response) {
// Handle successful response
console.log(response.data);
})
.catch(function(error) {
// Handle error
console.error('Error:', error);
});

`post()` Method
The `post()` method of the `$http` service is used to send HTTP POST requests to the
specified URL.

Syntax:,$http.post(url, data[, config]);

Parameters:
- `url`: The URL to which the request is sent.
- `data`: Data to be sent in the request body.
- `config` (optional): Configuration options such as headers, params, etc.

var postData = {
name: 'John Doe',
email: '[email protected]'
};

$http.post('/api/user', postData)
.then(function(response) {
// Handle successful response
console.log(response.data);
})
.catch(function(error) {
// Handle error
console.error('Error:', error);
});

In summary, the `$http` service in AngularJS provides a convenient and powerful way to
interact with remote servers using HTTP requests, and its `get()` and `post()` methods are
commonly used for making GET and POST requests, respectively.

Expressions in AngularJS with an example. **

● AngularJS expressions are snippets of code enclosed in double curly braces

({{ }}) in HTML templates.
● They are used to bind data from the model to the view, allowing dynamic content
to be displayed in the HTML.
● They facilitate two-way data binding between the model and the view. When the
data in the model changes, the expressions in the view are automatically re-
evaluated, and the updated values are reflected in the UI.
● They are evaluated within the context of the AngularJS scope, which is the
execution context for AngularJS applications.
● They support JavaScript-like syntax and operators, including arithmetic,
comparison, logical, and ternary operators.
● Expressions support interpolation, which is the process of inserting the value of a
variable or expression into a string. Interpolation is achieved by placing the
expression within double curly braces ({{ }}) in the HTML template.
● They do not support control flow statements (such as if, for, or while) or variable
assignment. They are primarily used for data binding and interpolation.
AngularJS Filters with suitable examples.

• AngularJS Filters allow us to format the data to display on UI without changing the original
format.
• Filters can be used with an expression or directives using pipe | sign.
{{expression | filterName: parameter }}

a) Number
• A number filter formats numeric data as text with comma-specified fraction size.
{{ number_expression | number:fractionSize}}
• If a specified expression does not return a valid number then the number filter displays an
empty string.

b) Date
• Formats date to string based on the specified format.
• {{ date_expression | date : 'format'}}

c) Currency
• The currency filter formats a number value as a currency.
• When no currency symbol is provided, the default symbol for current locale is used.
• {{ expression | currency : 'currency_symbol' : 'fraction'}}

d) Orderby
• The orderBy filter orders an array by an expression. It can be used with arrays of objects or
primitive types.
• Syntax: {{ array_expression | orderBy : expression : reverse}
AngularJS Data Binding. *

Data binding in AngularJS is a powerful feature that establishes a connection between the
model (the application data) and the view (the HTML representation of the user interface). It
allows changes made to the model to be automatically reflected in the view, and vice versa,
without the need for manual DOM manipulation.
There are two main types of data binding in AngularJS:

One-Way Data Binding: In one-way data binding, data flows in one direction only, typically
from the model to the view. Changes in the model are reflected in the view, but changes in
the view do not affect the model. AngularJS provides directives like {{ }} (interpolation) and
ng-bind for one-way data binding.
Example: In this example, data flows from the items array in the model to the view. Any
changes made to the items array in the controller will be reflected in the view, but changes
made in the view won't affect the model automatically.
Two-Way Data Binding: In two-way data binding, changes to the model are automatically
reflected in the view, and changes made in the view are propagated back to the model.
AngularJS provides the ng-model directive for two-way data binding, primarily used with form
elements like <input>, <textarea>, and <select>.
Example: In this example, changes made in the input fields in the view are propagated back
to the items array in the model, and changes made to the items array in the model are
reflected in the input fields in the view. This is the essence of two-way data binding.
Write a short note on:

a) AngularJS Controller **

- AngularJS controllers control the data flow between the model and the view in AngularJS
applications.
- They are JavaScript functions responsible for handling user input, manipulating data,
and updating the view accordingly.
- They are defined using the `controller` function provided by AngularJS and are attached
to modules.
- They initialize the scope by attaching properties and functions to it, enabling
interaction between the controller and the view.
- Controllers provide behavior to HTML elements in a view, enabling dynamic and
interactive user experiences.
- Controllers should be kept lightweight and focused on specific functionality to maintain
clarity and organization.
- Dependency injection is utilized to provide services such as `$scope` to controllers,
enhancing modularity and testability.
 b) AngularJS Scope

● The scope in AngularJS is an object that refers to the application model.

● It acts as a bridge between the controller and the view, allowing them to
communicate with each other.
● The scope holds the data and functions that are accessible from the HTML
template.
● Any changes made to the scope properties in the controller are automatically
reflected in the view, and vice versa.
● Scopes are hierarchical, with each nested scope prototypically inheriting properties
from its parent scope.
● They provide the context for data binding, event handling, and other AngularJS
features.
● Directives like ng-model, ng-bind, and ng-click manipulate data through the scope.
● Scopes are destroyed when their associated controller is destroyed or when
explicitly removed.

In this example, {{ message }} is a binding to the message property on the scope. When the
button is clicked, the changeMessage() function on the scope is called, updating the
message property, which automatically updates in the view due to data binding.
Implement a single page application using ng-route where you have a
homepage, contact us page and product details page.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Single Page Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></
script>
<script>
var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/contact', {
templateUrl: 'contact.html'
})
.when('/product/:id', {
templateUrl: 'product.html',
controller: 'ProductController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('ProductController', function($scope, $routeParams) {

$scope.productId = $routeParams.id;
// You can fetch product details using the product ID here
});
</script>
</head>
<body>

<div ng-view></div>

<script type="text/ng-template" id="home.html">

<h1>Homepage</h1>
<a href="#/contact">Contact Us</a>
<br>
<a href="#/product/1">Product 1 Details</a>
</script>
 <script type="text/ng-template" id="contact.html">
<h1>Contact Us</h1>
<p>Email: [email protected]</p>
<p>Phone: 123-456-7890</p>
<a href="#/">Go back to Homepage</a>
</script>

<script type="text/ng-template" id="product.html">

<h1>Product Details for ID: {{productId}}</h1>
<p>Name: Product Name</p>
<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Price: $99.99</p>
<a href="#/">Go back to Homepage</a>
</script>

</body>
</html>

AngularJS Services

AngularJS services are JavaScript functions for specific tasks, which can be reused
throughout the application. AngularJS includes services for different purposes.

$location Service
The $location service is used to interact with the browser's URL and navigate within the
application without reloading the page. It provides methods for reading and changing the
URL in a way that is synchronized with the application state.

$window Service
The $window service is a wrapper around the browser's window object. It allows you to
interact with the global browser window object in an AngularJS-friendly way, facilitating
testing and dependency injection.

$timeout Service
The $timeout service is a wrapper around the setTimeout function. It allows you to execute a
function after a specified delay in a way that integrates with AngularJS's digest cycle,
ensuring that any changes to the scope are properly propagated.

$interval Service
The $interval service is a wrapper around the setInterval function. It allows you to execute a
function repeatedly at specified intervals, integrating with the AngularJS digest cycle.

+ $http given above

AngularJS Built-In Helper Functions

AngularJS provides several built-in helper functions to facilitate common tasks, making
development more efficient.
angular.copy:
 - Creates a deep copy of an object or array.
- angular.copy(source, [destination]);
angular.equals:
- Compares two objects or arrays for deep equality.
- angular.equals(o1, o2);
angular.extend:
- Copies properties from source objects to a destination object.
- angular.extend(dst, src1, [src2], ...);
angular.isArray:
- Checks if a reference is an array.
- angular.isArray(value);
angular.isObject:
- Checks if a reference is an object (but not null).
- angular.isObject(value);

MODULE 4
1) Discuss default database in MongoDB : local, admin, and config

In MongoDB, there are three default databases: local, admin, and config. These databases
serve different purposes within a MongoDB deployment.

local:
● The local database is used by MongoDB for internal operations and does not
typically store user data.
● MongoDB uses the local database to store temporary data, such as replica set
configuration, chunk migration information in sharded clusters, and other internal
metadata.
● Users typically do not interact directly with the local database, and it's not
recommended to store application data in this database.

admin:
● The admin database is the administrative database in MongoDB.
● It contains user authentication and authorization information, as well as cluster-wide
configuration settings.
● Only users with administrative privileges (e.g., users with the clusterAdmin or
userAdmin roles) have access to the admin database.
● Users can perform administrative tasks such as user management, authentication,
authorization, and server configuration in the admin database.

config:
● The config database is used in MongoDB sharded clusters to store configuration
information about the cluster.
● It contains metadata about the sharded cluster, such as information about shards,
chunks, and distributed locks.
 ● MongoDB uses the config database to manage the distribution of data across shards,
balancing data distribution, and tracking the state of the cluster.
● Users typically do not interact directly with the config database, and it's managed
internally by MongoDB for sharded cluster operations.

These default databases play critical roles in the operation and management of MongoDB
deployments. While users may interact with the admin database for administrative tasks, the
local and config databases are primarily used by MongoDB internally and are not typically
accessed directly by users.

2) Explain the concept of Collections and Documents in MongoDB with

examples

In MongoDB, data is organized and stored in collections and documents.

Collections:
● A collection in MongoDB is a group of documents. It's analogous to a table in
relational databases.
● Collections do not enforce a schema. Documents within a collection can have
different structures, allowing for flexibility.
● Collections are created implicitly when data is first inserted into them.
● Collections can contain zero or more documents.
Example:
Let's say you have a collection named users. It can contain documents representing user
data, like usernames, emails, and ages.

Documents:
● A document in MongoDB is a record stored in a collection. It's analogous to a row in
relational databases.
● Documents are JSON-like objects consisting of key-value pairs.
● The keys are strings (field names), and the values can be various data types,
including strings, numbers, arrays, objects, etc.
● Documents are stored in BSON (Binary JSON) format, which is a binary-encoded
serialisation of JSON-like documents.
Example:
Here's an example document from the users collection:
In this document:
_id is a special field that uniquely identifies the document within the collection.
username, email, and age are fields storing user-related information.

3) Sharding

- Sharding involves dividing the dataset into smaller chunks called shards and distributing
these shards across multiple machines or servers. Each shard contains a subset of the data,
and together they form the entire dataset. This distribution allows for better utilization of
hardware resources and improved performance.
- Scaling Methods:
- Vertical Scaling: Increasing the capacity of a single server.
- Horizontal Scaling (Scale-out): Adding machines to share the data set and load.

Advantages of Sharding:

1. Increased read/write throughput: You can take advantage of parallelism by distributing the
data set across multiple shards.
2. Data Distribution: Distributes data across shards, enabling each shard to handle a subset
of the total data set.
3. Increased storage capacity: By increasing the number of shards, we can also increase
overall total storage
capacity.
3. Increased Availability: Deployment of config servers and shards as replica sets enhances
availability.

Components of a MongoDB Sharded Cluster:

- Shard: Contains a subset of sharded data, deployable as a replica set.

- mongos: Acts as a query router, facilitating communication between client applications and
the sharded cluster.
- Config Servers: Store metadata and configuration settings for the cluster.

Disadvantage:
Once a collection has been sharded, MongoDB does not provide a direct method to unshard
it. However, collections can be resharded later if needed.
 4) MongoDB Data types with syntax

Double:
Used to store floating point values.
Syntax: NumberDecimal("<value>") or simply <value> (e.g., 2.5).
String:
Stores UTF-8 encoded strings.
Syntax: "string" or 'string'.
Object:
Stores embedded documents.
Syntax: { key: value } (e.g., { name: "John", age: 30 }).
Array:
Stores arrays of values or documents.
Syntax: [ value1, value2, ... ] (e.g., [1, 2, 3], ["a", "b", "c"]).
Binary:
Used to store binary data.
Syntax: BinData(subtype, data) (e.g., BinData(0, "11001100")).
Undefined:
Stores undefined values.
Syntax: undefined.
ObjectId:
Stores unique identifiers for documents. There is an_id field in MongoDB for each document.
The data which is stored in Id is in hexadecimal format.
Syntax: ObjectId() or ObjectId("<hexadecimal_string>").
Boolean:
Stores boolean values (true or false).
Syntax: true or false.
Date:
Stores dates or timestamps.
Syntax: new Date() or ISODate("<date_string>").
Regular Expression:
Stores regular expressions.
Syntax: /pattern/flags (e.g., /pattern/i for case-insensitive).
Integer:
Stores integer values.
Syntax: NumberInt("<value>") or simply <value> (e.g., 42).
Timestamp:
Stores timestamps.
Syntax: Timestamp(timestamp, increment) (e.g., Timestamp(1598986309, 1)).

5) MongoDB CRUD Operations with example.

MongoDB supports CRUD operations, which stands for Create, Read, Update, and Delete.
These operations allow you to interact with data stored in MongoDB collections.

Create (Insert):
- Create operation is used to add new documents to a collection.
 - In MongoDB, you use the insertOne() or insertMany() method to insert documents
into a collection.

Read (Query):
- Read operation is used to retrieve documents from a collection.
- In MongoDB, you use the find() method to query documents based on criteria.
- You can also use methods like findOne() to retrieve a single document.

Update:
- Update operation is used to modify existing documents in a collection.
- In MongoDB, you use the updateOne() or updateMany() method to update
documents.
- You can use operators like $set, $inc, $push, etc., to specify the update operation.

Delete:
- Delete operation is used to remove documents from a collection.
- In MongoDB, you use the deleteOne() or deleteMany() method to delete documents.
- You specify a filter to match the documents to be deleted.
 6) List and explain mongo shell commands with suitable examples (any
ten). * or Explain Accessing and Manipulating Database commands in
MongoDB. *

Here are ten MongoDB shell commands along with explanations and suitable examples:

1. use: Switches to a specified database.

use myDatabase
2. db: Returns the current database.
db.
3. show collections: Displays a list of collections in the current database.
show collections
4. db.collection.find(): Retrieves documents from a collection.
db.users.find()
5. db.collection.insertOne(): Inserts a single document into a collection.
db.users.insertOne({ name: "John", age: 30 })
6. db.collection.updateOne(): Updates a single document in a collection.
db.users.updateOne({ name: "John" }, { $set: { age: 31 } })
7. db.collection.deleteOne(): Deletes a single document from a collection.
db.users.deleteOne({ name: "John" })
8. db.collection.updateMany(): to update multiple documents in a collection.
db.orders.updateMany(
{ status: "pending" }, { $set: { status: "completed" } });

9. db.collection.createIndex(): Creates an index on a collection.

db.users.createIndex({ email: 1 })
10. db.collection.drop(): Deletes a collection.
db.users.drop()

These commands provide basic functionality for interacting with MongoDB databases and
collections via the MongoDB shell.

7) Explain features of MongoDB. **

FEATURES OF MongoDB:
1. MongoDB is a document-oriented NoSQL database system.
2. It stores data in collections and documents in JSON-like format.
3. Offers high availability, high performance, and easy scalability.
4. Supports flexible indexing for efficient querying.
5. Enables horizontal scaling through auto-sharding.
6. Facilitates fast in-place updates for efficient data modification.
7. Provides rich query capabilities for flexible data retrieval.
8. Ensures data replication for high availability.
9. Offers professional support services for guidance.
10. Secures data with authentication and authorization mechanisms.

8) Explain how MongodB documents are created and accessed from

Node.js using suitable examples.

ACCESSING, INSERTING, UPDATING DATABASE

 9) Discuss REST APIs in detail. *

Definition: A REST API is an API that conforms to the design principles of the REST, or
Representational State Transfer architectural style. Hence, REST APIs are sometimes
referred to as RESTful APIs.

● REST APIs communicate via HTTP requests to perform standard database functions
like CRUD within a resource.
● It uses a GET request to retrieve a record, a POST request to create one, a PUT
request to update a record, and a DELETE request to delete one.
● All HTTP methods can be used in API calls.
● A well-designed REST API is similar to a website running in a web browser with built-
in HTTP functionality.
● They represent the state of data at a given moment, delivering it to clients in versatile
formats such as JSON, HTML, XML, Python, PHP, or plain text.

Request URLs:

● RESTful APIs typically use resource-based URLs to represent entities and their
relationships. These URLs should be hierarchical and represent the state of the
resource.
● URLs should generally use nouns that represent the resources rather than verbs.
For example, /users is preferable to /getUsers.
● URLs should generally use plural nouns to represent collections of resources. For
example, /users instead of /user.
● URLs should follow a consistent naming convention throughout the API.

Response:

Responses should include representations of resources, typically in JSON or XML format.

These representations should contain all relevant data about the resource.

Status Codes:
 ● 2xx Success: Indicates that the request was successfully received, understood, and
accepted. Commonly used status codes include:
○ 200 OK: The request was successful.
○ 201 Created: The request was successful, and a new resource was created.
○ 204 No Content: The server successfully processed the request, but there is
no content to return.
● 4xx Client Error: Indicates that there was a problem with the request. Commonly
used status codes include:
○ 400 Bad Request: The server cannot process the request due to a client
error.
○ 401 Unauthorized: The request requires authentication.
○ 404 Not Found: The requested resource could not be found.
● 5xx Server Error: Indicates that there was an error on the server-side. Commonly
used status codes include:
○ 500 Internal Server Error: A generic error message, given when an
unexpected condition was encountered and no more specific message is
suitable.
○ 503 Service Unavailable: The server is currently unable to handle the request
due to temporary overloading or maintenance of the server.

Using Mongoose for Structured Schema and Validation.

Using Express and Mongoose to interact with MongoDB
Testing API endpoints

MODULE 5
Flask Environment Setup
Flask Request Object

Flask HTTP Methods

In a Client-Server architecture, there is a set of rules, called a protocol, using which, we can
allow the clients to communicate with the server, and vice-versa. Here, the HTTP is used,
through which, communication is possible.

GET: Used to request data from the server. This is typically used for retrieving information
from a specific URL.

POST: Used to submit data to be processed by the server. This data is typically included in
the request body and is used for actions like form submissions.

PUT: Used to modify data on the server. It replaces the entire content at a particular location
with the data provided in the request body. If the resource specified doesn't exist, it can
create it.

PATCH: Similar to PUT, but it modifies only a part of the data rather than replacing the entire
content. It's useful for updating specific fields or properties of a resource.
DELETE: Used to delete data on the server at a specified location. It removes the resource
identified by the URL.

Explain Flask Templates with examples. *

Flask is a web framework for Python that allows you to build web applications. Flask
templates are HTML files with placeholders that can be dynamically populated with data
from your Python code. This allows you to create dynamic web pages where the content can
change based on user input, database queries, or any other logic in your application.

Let's say you have a Flask application with the following directory structure:

/my_flask_app
/templates
index.html
app.py

1. Create a Template (index.html):

Inside the `templates` directory, create an HTML file named `index.html`:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Template Example</title>
</head>
<body>
<h1>Hello, {{ name }}!</h1>
</body>
</html>

In this template, `{{ name }}` is a placeholder that will be replaced with actual data when
the template is rendered.

2. Create a Flask Application (app.py):

Inside the `app.py` file, create a Flask application:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html', name='John')

if __name__ == '__main__':
app.run(debug=True)
 In this Flask application:
- We import the `Flask` class and `render_template` function from the Flask module.
- We create a Flask application instance.
- We define a route (`'/'`) for the homepage.
- When a user visits the homepage, the `index()` function is called.
- Inside the `index()` function, we render the `index.html` template and pass the variable
`name` with the value `'John'`.

In summary, Flask templates allow you to create dynamic web pages by combining HTML
with placeholders that are populated with data from your Python code. This separation of
logic and presentation makes it easier to build and maintain complex web applications.

1. How to set, access and delete cookies in Python Flask? **

● Cookies track user activity to save user information in the browser as key-value pairs,
which can then be accessed whenever necessary by the developers to make a website
easier to use.
● This enhances the personal user experience on a particular website by remembering your
logins, your preferences etc.
● In Flask, you can set, access, and delete cookies using the request and make_response
objects provided by Flask.

Setting a Cookie:
To set a cookie, you can use the make_response function to create a response object and
then use the set_cookie() method to set the cookie in the response headers.

Accessing a Cookie:
To access a cookie, you can use the request object's cookie attribute, which is a dictionary-
like object containing all the cookies sent by the client.

Deleting a Cookie:
To delete a cookie, you can set its value to an empty string and set its expiration time to a
past date using the expires parameter in the set_cookie method.
 2. Write a Flask code to implement GET and POST requests.

3. What are the features of Python Flask? ***

Features of Flask:
1. Lightweight, simple, no built-in layers of abstraction and minimal dependencies.
2. Modular design for clean and manageable codebase.
3. Flask can be used with any database like:- SQL and NoSQL and with any Frontend
Technology such as React or Angular.
4. Powerful routing system with decorators for RESTful APIs.
5. Jinja2 template engine for dynamic HTML content.
6. Convenient access to HTTP request data.
7. Various types of HTTP responses with customization.
8. Built-in development server for easy local testing.
9. Rich ecosystem of extensions for additional functionality.
10. Built-in support for unit and integration testing.
11. Large and active community with comprehensive documentation.
 4. Write Flask script to display “This is TSEC TE network”

5. Explain dynamic url building in Flask. ***

● Dynamic URL building in Flask refers to the ability to generate URLs dynamically
within your application based on parameters or arguments passed to routes.
● This is useful when you have routes that require variable data, such as user IDs,
product names, or other dynamic content.
● Flask provides a way to define dynamic routes using variable parts enclosed in angle
brackets (<>).
● These variable parts can then be accessed within the view function to perform
specific actions based on the dynamic values passed in the URL.
● It provides flexibility and scalability by allowing the application to adapt to changes in
data or user interactions, making it a powerful feature for building dynamic and
interactive web applications.

In this code:
 ● The route /user/<int:user_id> defines a dynamic route where <int:user_id> specifies
that the variable part should be an integer.
● The function show_user_profile() takes the user_id as an argument and returns a
string indicating the user ID.
● With this code, when you visit a URL like /user/123, where 123 is the user ID, it will
display User ID: 123. The user_id variable in the route handler function will hold the
value 123.

6. Relate with an example and Explain File Uploading in Flask

File uploading in Flask allows users to upload files from their local system to the server.
This feature is commonly used in web applications for tasks such as uploading images,
documents, or other types of files.

Step 1: Create a new folder named "file uploading" and within it, create the subfolders
"templates" and "main.py" to respectively store HTML files and serve as the location for
Python code.
Step 2: Develop an HTML file for the front end where users can select a file and upload it
using a submit button, ensuring the form's encryption is set to "multipart/form-data" to
facilitate file uploading.

Step 3: Create another HTML file named "Acknowledgement.html" inside the "templates"
folder to acknowledge successful file uploads, providing users with confirmation.

Step 4: In "main.py", write code to retrieve the uploaded file from the request object using
"request.files[]" and save it to the desired location on the server's root directory.
 MODULE 6
Developing RIA using AJAX Techniques: CSS, HTML, DOM, XML HTTP Request,
JavaScript, PHP, AJAX as REST Client

1. Define RIA and explain characteristics of RIA. **

● RIA – Rich Internet Applications are Web applications that have the features and
functionality of traditional desktop applications.
● RIA’s typically provide a “no-refresh” look to the user interface.
● It provides HdX – High Definition User eXperience

Characteristics of RIA:

1. Rich User Experience: Utilises interactive controls for enhanced efficiency and user
engagement.
2. Responsive: Implements partial-page updating to reduce latency and improve
responsiveness.
3. Low Maintenance and Plasticity: Allows for easy adaptation and transformation of the
application.
4. Better Feedback: Provides fast and accurate feedback, real-time confirmation, and
detailed error messages.
5. Consistency of Look and Feel: Ensures uniform user experience across different
browsers and operating systems.
6. Offline Use: Supports usage even when connectivity is unavailable by retaining local
state.
7. Caching: Enhances performance and UI responsiveness by caching server information.
8. Security: Enforces limitations effectively to ensure security, especially in constrained
environments.
9. Advanced Communication: Enables sophisticated communication with supporting
servers for improved user experience.
10. Rapid Development: Facilitates quick development of rich user experiences through
intuitive interfaces.
11. Improved Features: Embeds various functionalities for engaging web pages similar to
desktop applications.
12. Complex Application Screens: Integrates mixed media and modern development tools
for compelling user interfaces.

2. Write short notes on: DRUPAL, DJANGO, JOOMLA.

Drupal:
● Drupal is a free and open-source content management system (CMS) written in PHP.
● It is known for its flexibility, scalability, and extensibility, making it suitable for building
a wide range of websites and web applications, from personal blogs to enterprise-
level portals.
● Drupal offers a modular architecture with a large library of contributed modules and
themes that allow developers to extend and customise its functionality and
appearance.
● It includes powerful features for content management, user authentication,
permissions, and workflow management, making it popular among developers and
site administrators.
● Drupal's community is vibrant and active, providing extensive documentation, support
forums, and regular updates to ensure security and performance.

Django:
● Django is a high-level Python web framework designed for rapid development of web
applications.
● It follows the "Don't Repeat Yourself" (DRY) principle and emphasizes reusability,
modularity, and rapid development.
● Django includes a built-in ORM (Object-Relational Mapping) for interacting with
databases, a powerful URL routing system, template engine, form handling, and
authentication mechanisms, among other features.
● It follows the Model-View-Template (MVT) architectural pattern, where the model
represents the data structure, the view handles user interaction and presentation
logic, and the template defines the HTML markup.
● Django's "batteries-included" approach provides developers with everything they
need to build web applications efficiently, while still allowing for flexibility and
customization when needed.

Joomla:
● Joomla is a free and open-source content management system (CMS) written in
PHP.
● It is known for its ease of use, extensibility, and user-friendly interface, making it
popular for building websites, online stores, and web applications.
● Joomla offers a wide range of built-in features, including content management, user
authentication, access control, multilingual support, and SEO optimization.
● It follows a modular architecture with a system of extensions (components, modules,
plugins, and templates) that allow developers to add new features and customise the
appearance and functionality of their Joomla sites.
● Joomla's community is active and supportive, providing documentation, forums, and
resources to help developers and site administrators get the most out of the platform.

3. Differentiate between CMS and Framework.

 4. Explain how AJAX works with a diagram. Describe 4 standards used by
AJAX (or Discuss technologies AJAX works with to create interactive
web pages) ****

How AJAX works:

1. A JavaScript call is made in the browser, typically triggered by a user action or event.
2. The browser sends an HTTP request to the web server using XMLHttpRequest.
3. The server-side business logic implementation (e.g., PHP, servlet) interacts with the
data store to retrieve or process the required data.
4. The data is exchanged between the business logic implementation and the data
store.
5. The server responds with XML data, which is sent back to the browser.
6. The browser receives the XML data and updates the HTML and CSS content on the
presentation layer (the visible web page) without reloading the entire page, thanks to
the asynchronous nature of the XMLHttpRequest.

• AJAX allows the web pages to be modified asynchronously by exchanging small bunch of
information with the server.
• This means that it is easily possible to make changes in part of a web page, without
reloading the entire page.
• The conventional web page (which is not using AJAX) reloads the whole web page if there
is a need to make changes in the content.

Standards/Technologies Used by AJAX:

1. XMLHttpRequest (XHR):
● XMLHttpRequest is the core technology used for making asynchronous requests
from a web browser to a server.
● It provides an API in JavaScript for sending HTTP requests and receiving responses
asynchronously.

2. XML (eXtensible Markup Language):

● XML is a markup language used for structuring and storing data in a human-readable
format.
● Although JSON (JavaScript Object Notation) has largely replaced XML as the
preferred data format for AJAX, XML is still used in some applications, especially
when interoperability with legacy systems is required.

3. HTTP (Hypertext Transfer Protocol):

● HTTP is the protocol used for transmitting data between a web browser and a web
server.
● AJAX relies on HTTP for making requests (e.g., GET, POST) and receiving
responses from the server.

4. JSON (JavaScript Object Notation):

● JSON is a lightweight data interchange format that is easy for humans to read and
write and easy for machines to parse and generate.
● It has become the preferred data format for AJAX due to its simplicity, flexibility, and
native support in JavaScript.