2024 question paper

Web Technology

26 questions

Q1(a). What does DTD stand for in XML? (i) Document Type Declaration (ii) Data Type Declaration (iii) Document Template Descriptor (iv) Direct Type Definition20242m
Module I: Introduction to Web Technologies and Architectures
What does DTD stand for in XML? (i) Document Type Declaration (ii) Data Type Declaration (iii) Document Template Descriptor (iv) Direct Type Definition

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (i) Document Type Declaration (as listed in the options).

DTD is a set of rules that defines the structure and legal elements/attributes of an XML document, so a parser can validate it. Its formal expansion is Document Type Definition, and among the given options (i) is the closest match. It is referenced in an XML file with <!DOCTYPE ...>.
Q1(b). Which of the following correctly describes a Far Server architecture? (i) Processing is evenly distributed between client and server (ii) The client handles most of the processing (iii) The server handles most of the processing (iv) None of the above20242m
Module I: Introduction to Web Technologies and Architectures
Which of the following correctly describes a Far Server architecture? (i) Processing is evenly distributed between client and server (ii) The client handles most of the processing (iii) The server handles most of the processing (iv) None of the above

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (iii) The server handles most of the processing.

The question means a Fat Server (thin client) architecture: the client only presents the UI while business logic and data processing run on the server. In a Fat Client, the client does most of the processing instead.
Q1(c). Which protocol is used for transferring web pages? (i) FTP (ii) SMTP (iii) HTTP (iv) POP320242m
Module II: Browser and Apache Web Server Architecture
Which protocol is used for transferring web pages? (i) FTP (ii) SMTP (iii) HTTP (iv) POP3

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (iii) HTTP

HTTP (HyperText Transfer Protocol) transfers web pages between browser and server. FTP transfers files, SMTP sends email, and POP3 retrieves email.
Q1(d). What is the function of Apache Web Server's mod_proxy module? (i) Load balancing (ii) Database connection pooling (iii) Email handling (iv) Content rendering20242m
Module II: Browser and Apache Web Server Architecture
What is the function of Apache Web Server's mod_proxy module? (i) Load balancing (ii) Database connection pooling (iii) Email handling (iv) Content rendering

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (i) Load balancing

mod_proxy lets Apache act as a proxy/reverse proxy and, with mod_proxy_balancer, distribute requests across multiple backend servers. It does not handle database pooling, email, or content rendering.
Q1(e). Which method is used in JavaScript to send a request to the server asynchronously? (i) fetch() (ii) XMLHttpRequest() (iii) $.get() (iv) send()20242m
Module III: Basics of Web Programming
Which method is used in JavaScript to send a request to the server asynchronously? (i) fetch() (ii) XMLHttpRequest() (iii) $.get() (iv) send()

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (i) fetch()

fetch() is the modern, Promise-based API for asynchronous HTTP requests:

const res = await fetch('/api/data'); const data = await res.json();

XMLHttpRequest is the older async mechanism, and $.get() is a jQuery library wrapper. The built-in native method to prefer is fetch().
Q1(f). In JavaScript, what is the result of the following expression: typeof null? (i) null (ii) object (iii) undefined (iv) boolean20242m
Module III: Basics of Web Programming
In JavaScript, what is the result of the following expression: typeof null? (i) null (ii) object (iii) undefined (iv) boolean

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (ii) object

typeof null returns "object". This is a long-standing bug from the first version of JavaScript, where null was represented with the object type tag, and it was kept for backward compatibility. To test for null, use value === null.
Q1(g). Which variable is used to collect form data sent with both the GET and POST methods in PHP? (i) _BOTH (ii) _REQUEST (iii) _REQUEST (iv) _BOTH20242m
Module III: Basics of Web Programming
Which variable is used to collect form data sent with both the GET and POST methods in PHP? (i) $_BOTH (ii)$ _REQUEST (iii) $_REQUEST (iv)$ _BOTH

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (ii) $_REQUEST (options (ii) and (iii) are identical in the paper).

$_REQUEST` is a PHP superglobal that collects data from `$ _GET, $_POST`, and `$ _COOKIE. $_BOTH does not exist in PHP.
Q1(h). Which method is invoked immediately after the start() method and whenever an applet needs to be repainted itself in the browser? (i) init() (ii) stop() (iii) run() (iv) paint()20242m
Module III: Basics of Web Programming
Which method is invoked immediately after the start() method and whenever an applet needs to be repainted itself in the browser? (i) init() (ii) stop() (iii) run() (iv) paint()

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (iv) paint()

Applet life cycle: init() → start() → paint() → stop() → destroy(). paint(Graphics g) is called right after start() and again whenever the applet must be redrawn (window resized, uncovered, or repaint() called).
Q1(i). What is one of the roles of SSL in e-commerce? (i) Compressing data (ii) Storing transaction data (iii) Encrypting sensitive information (iv) Managing product inventory20242m
Module IV: E-commerce Applications
What is one of the roles of SSL in e-commerce? (i) Compressing data (ii) Storing transaction data (iii) Encrypting sensitive information (iv) Managing product inventory

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (iii) Encrypting sensitive information

SSL/TLS encrypts data in transit between browser and server (card numbers, passwords, personal details), authenticates the server through certificates, and preserves data integrity. It does not compress data, store transactions, or manage inventory.
Q1(j). Which of the following is NOT a Web 3.0 technology? (i) RDF (ii) OWL (iii) SPARQL (iv) XSL20242m
Module V: Web 3.0
Which of the following is NOT a Web 3.0 technology? (i) RDF (ii) OWL (iii) SPARQL (iv) XSL

View this question on its own page →
Search Google Ask AI
Worked Solution
Answer: (iv) XSL

RDF (data model), OWL (ontology language), and SPARQL (query language) are core Semantic Web / Web 3.0 technologies. XSL (Extensible Stylesheet Language) is used to transform and style XML documents and belongs to earlier XML technology.
Budget App•POCKETLY
Pocketly on Android
Log daily food, travel, and hostel expenses instantly. Set monthly spending limits and see where your money goes without complex spreadsheets.
Install Pocketly
Q2(a). Discuss the concepts of client-server computing and middleware. How do they enhance the functionality of web applications?20247m
Module I: Introduction to Web Technologies and Architectures
Discuss the concepts of client-server computing and middleware. How do they enhance the functionality of web applications?

View this question on its own page →
Search Google Ask AI
Worked Solution
Client-server computing

In client-server computing, work is split between two roles:

Client: the requester, usually a browser or mobile app that handles the user interface and sends requests.

Server: the provider, which processes requests, runs business logic, accesses the database, and returns responses.

They communicate over a network using protocols such as HTTP.

Client (browser) --HTTP request--> Web/App Server --> Database <--HTTP response--

Types: thin client / fat server (most logic on the server) and fat client / thin server (most logic on the client). Modern web apps mix both, e.g. a React front end with a Node.js API.

Middleware

Middleware is software that sits between the client and the back-end systems (servers, databases, other services) and lets them communicate and work together.

Examples: application servers, web servers/reverse proxies, message queues (RabbitMQ, Kafka), API gateways, ORM and database drivers, authentication layers, Express.js middleware.

Functions: communication and protocol translation, authentication and authorization, logging, caching, load balancing, transaction management, data format conversion (JSON/XML).

How they enhance web applications

Separation of concerns: UI, logic, and data are handled independently and can be changed separately.

Centralised control: business rules, security, and data live on the server, so updates are made once for all users.

Scalability: more servers can be added behind a load balancer; middleware distributes the load.

Interoperability: middleware connects different platforms, languages, and databases.

Security: sensitive data and logic stay on the server; middleware enforces authentication and validation.

Reduced client requirements: thin clients work on any device with a browser.

Reusability and faster development: common services (auth, logging) are written once and reused.

Reliability: caching, queues, and failover keep the application responsive.

Example (Express middleware in JavaScript):

app.use(express.json()); // parse JSON bodies app.use((req, res, next) => { // logging middleware console.log(req.method, req.url); next(); }); app.get('/api/users', authMiddleware, (req, res) => res.json(users));

Q2(b). What is the difference between block-level and inline elements in HTML? Provide examples of each and discuss how they affect layout and rendering in a webpage.20247m

Module I: Introduction to Web Technologies and Architectures

What is the difference between block-level and inline elements in HTML? Provide examples of each and discuss how they affect layout and rendering in a webpage.

View this question on its own page →

Search Google Ask AI

Worked Solution

Block-level vs inline elements

Basis	Block-level	Inline
Line behaviour	Starts on a new line; the next element also goes below	Flows within the line beside other content
Width	Takes the full available width by default	Takes only the width of its content
Width/height/vertical margin	Can be set	`width`, `height`, and vertical margin/padding do not affect layout
Can contain	Block and inline elements	Text and other inline elements only
Default `display`	`block`	`inline`
Examples	`<div>`, `<p>`, `<h1>`–`<h6>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, `<section>`	`<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, `<label>`, `<code>`

Example

<div style="background:#cde">Block A</div>
<div style="background:#fdc">Block B</div>

<p>This paragraph has <span style="color:red">inline red text</span>
and a <a href="#">link</a> in the same line.</p>

Block A and Block B appear on separate lines, each spanning the full width. The <span> and <a> stay inside the paragraph's line.

Effect on layout and rendering

Block elements build the page structure: stacking sections, headings, paragraphs, and lists vertically.
Inline elements style or link parts of text without breaking the flow.
The box model (margin, border, padding, width, height) applies fully to blocks; for inline elements only horizontal spacing works.
Line-height and baseline alignment govern how inline items are laid out; whitespace between inline elements shows as a small gap.
CSS display can change behaviour:
- display:block makes an inline element behave like a block.
- display:inline does the reverse.
- display:inline-block flows in a line but accepts width and height (useful for buttons and nav items).
- display:flex/grid create modern layouts.

a.button { display: inline-block; width: 120px; padding: 8px; }

Choosing correctly avoids layout bugs such as unexpected line breaks or ignored width/height.

Q3(a). What is N-tier software architecture? Explain its benefits and how it improves scalability and maintainability in web applications.20247m
Module I: Introduction to Web Technologies and Architectures
What is N-tier software architecture? Explain its benefits and how it improves scalability and maintainability in web applications.

View this question on its own page →
Search Google Ask AI
Worked Solution
N-tier architecture

N-tier (multi-tier) architecture divides an application into separate logical layers (tiers), each with one responsibility, that communicate only with adjacent layers. Tiers can run on the same machine or on different servers.

Presentation tier (browser, React/HTML UI) | Application / Business-logic tier (Node.js, Java, PHP server) | Data-access tier (ORM, DAO, API) | Data tier (MySQL, MongoDB)

Common forms: 2-tier (client + database), 3-tier (presentation, logic, data), and larger N-tier with extra layers such as caching, API gateway, and messaging.

Tiers explained

Presentation: displays data and captures user input.

Business logic: rules, validation, processing, authentication.

Data access / data: stores and retrieves persistent data.

Benefits

Separation of concerns: each layer has a clear role.

Independent development: teams work on UI, logic, and data separately.

Reusability: the same business logic serves web, mobile, and other clients.

Security: the database is not exposed directly to clients; only the logic tier reaches it.

Flexibility: technology in one tier (e.g. the database) can be swapped with little effect on others.

Easier testing: each tier can be tested in isolation.

How it improves scalability

Each tier can be scaled independently: add more app servers behind a load balancer when traffic rises, or add database replicas for reads.

Resource-heavy tiers can be placed on stronger machines.

Caching and message queues between tiers absorb load spikes.

Stateless application tiers make horizontal scaling straightforward.

How it improves maintainability

A change in one tier (e.g. redesigning the UI) does not force changes in others.

Bugs are easier to locate because responsibilities are isolated.

Loose coupling through defined interfaces (REST APIs) allows components to be upgraded or replaced.

Consistent structure makes the code easier to understand and extend.

Trade-offs: more components mean added complexity, network latency between tiers, and more deployment effort.
Q3(b). Outline the architecture of a web browser. How do the various components interact to render a webpage?20247m
Module II: Browser and Apache Web Server Architecture
Outline the architecture of a web browser. How do the various components interact to render a webpage?

View this question on its own page →
Search Google Ask AI
Worked Solution
Web browser architecture

A browser is made of several cooperating components:

+---------------- User Interface ----------------+ | address bar, tabs, back/forward, bookmarks | +------------------------+------------------------+ | +--------v--------+ | Browser Engine | (controls rendering engine) +--------+--------+ +------------------------+------------------------+ +--------v--------+ +-----------v----------+ +---------v--------+ | Rendering Engine| | Networking | | JavaScript Engine| | (Blink/Gecko) | | (HTTP/HTTPS, DNS) | | (V8, SpiderMonkey)| +--------+--------+ +----------------------+ +---------+--------+ | | +--------v--------------------------------------------------v-------+ | UI backend | Data storage (cookies, localStorage, cache, IndexedDB)| +--------------------------------------------------------------------+

Components

User interface: everything visible except the page itself: address bar, tabs, navigation buttons, bookmarks.

Browser engine: the link between the UI and the rendering engine; passes actions such as "load this URL".

Rendering engine: parses HTML and CSS and displays the result (Blink in Chrome, Gecko in Firefox, WebKit in Safari).

Networking: performs DNS lookups and HTTP/HTTPS requests, handles caching, cookies, and TLS.

JavaScript engine: parses and executes JavaScript (V8, SpiderMonkey).

UI backend: draws basic widgets (windows, form controls) using the operating system's graphics.

Data storage: stores cookies, localStorage, sessionStorage, IndexedDB, and cache on disk.

How components interact to render a page

The user types a URL; the UI passes it to the browser engine.

The networking layer resolves the domain through DNS, opens a TCP/TLS connection, and sends an HTTP request.

The server's HTML response arrives; the rendering engine begins work.

Parsing: HTML is parsed into the DOM tree; CSS is parsed into the CSSOM.

Linked resources (CSS, JS, images) are fetched by networking; the JavaScript engine runs scripts, which can modify the DOM and CSSOM.

Render tree: DOM and CSSOM are combined, keeping only visible nodes with their computed styles.

Layout (reflow): the position and size of each node is calculated.

Painting: pixels are drawn (text, colours, images), then layers are composited by the GPU and shown through the UI backend.

Later user actions or script changes trigger reflow/repaint as needed.

Modern browsers use a multi-process design (separate processes per tab, renderer, and GPU) for stability and security.

Q4(a). Describe commonly used protocols like HTTP, FTP, SMTP, and POP. How does each protocol serve different purposes in web communications?20247m

Module II: Browser and Apache Web Server Architecture

Describe commonly used protocols like HTTP, FTP, SMTP, and POP. How does each protocol serve different purposes in web communications?

View this question on its own page →

Search Google Ask AI

Worked Solution

Web protocols

Protocols are agreed rules for communication. Each one below works at the application layer and typically runs over TCP.

1. HTTP (HyperText Transfer Protocol)

Purpose: transfers web pages and resources between browser and web server.
Port: 80 (HTTPS = HTTP over TLS, port 443).
Model: request/response and stateless.
Methods: GET (retrieve), POST (submit), PUT (update), DELETE (remove), HEAD.
Status codes: 200 OK, 301 redirect, 404 Not Found, 500 Server Error.

GET /index.html HTTP/1.1
Host: www.example.com

2. FTP (File Transfer Protocol)

Purpose: uploading and downloading files between a client and a server (e.g. publishing a site to a host).
Ports: 21 (control), 20 (data).
Uses two connections (control and data), needs username/password authentication, and is unencrypted (use SFTP or FTPS for security).

3. SMTP (Simple Mail Transfer Protocol)

Purpose: sending email from a client to a mail server and between mail servers (push protocol).
Port: 25 (587 for submission with TLS).
Handles routing and delivery of the outgoing message.

4. POP (Post Office Protocol, POP3)

Purpose: retrieving email from the server to the client (pull protocol).
Port: 110 (995 with SSL).
Downloads messages to the local device, and normally deletes them from the server. Simple, but less suited to multiple devices than IMAP.

Comparison

Protocol	Purpose	Port	Direction
HTTP	Web pages/resources	80 / 443	Client ↔ web server
FTP	File transfer	20, 21	Client ↔ file server
SMTP	Send email	25 / 587	Client → server, server → server
POP3	Receive email	110 / 995	Mail server → client

Working together: the user browses with HTTP, uploads site files with FTP, sends mail through SMTP, and reads mail through POP3 (or IMAP).

Q4(b). Explain the tags to create different types of lists using relevant HTML code. Additionally, apply CSS properties to change the text color, font size, and list style type.20247m

Module I: Introduction to Web Technologies and Architectures

Explain the tags to create different types of lists using relevant HTML code. Additionally, apply CSS properties to change the text color, font size, and list style type.

View this question on its own page →

Search Google Ask AI

Worked Solution

Types of HTML lists

1. Unordered list `<ul>` (bulleted)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2. Ordered list `<ol>` (numbered)

Attributes: type (1, A, a, I, i), start, reversed.

<ol type="1">
  <li>Design</li>
  <li>Develop</li>
  <li>Deploy</li>
</ol>

3. Description (definition) list `<dl>`

<dt> is the term and <dd> is its description.

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web pages</dd>
  <dt>CSS</dt>
  <dd>Language for styling pages</dd>
</dl>

Lists can also be nested by placing a <ul> or <ol> inside an <li>.

Applying CSS: colour, font size, list style

<!DOCTYPE html>
<html>
<head>
<style>
  /* unordered list */
  ul.tech {
    color: darkblue;            /* text colour */
    font-size: 18px;            /* font size */
    list-style-type: square;    /* bullet style */
  }

  /* ordered list */
  ol.steps {
    color: crimson;
    font-size: 20px;
    list-style-type: upper-roman;   /* I, II, III */
  }

  /* description list */
  dl dt { color: green; font-size: 19px; font-weight: bold; }
  dl dd { color: #555;  font-size: 16px; }

  /* no bullets, e.g. for menus */
  ul.plain { list-style-type: none; padding: 0; }
</style>
</head>
<body>
  <ul class="tech">
    <li>HTML</li><li>CSS</li><li>JavaScript</li>
  </ul>

  <ol class="steps">
    <li>Design</li><li>Develop</li><li>Deploy</li>
  </ol>

  <dl>
    <dt>HTML</dt><dd>Markup language</dd>
  </dl>
</body>
</html>

Useful `list-style-type` values

For	Values
`ul`	`disc`, `circle`, `square`, `none`
`ol`	`decimal`, `lower-alpha`, `upper-alpha`, `lower-roman`, `upper-roman`

Other helpers: list-style-image: url(icon.png) for custom bullets and list-style-position: inside | outside.

Q5(a). Discuss the following with respect to JavaScript: Data types, function expression, and this keyword.20249m

Module III: Basics of Web Programming

Discuss the following with respect to JavaScript: Data types, function expression, and this keyword.

View this question on its own page →

Search Google Ask AI

Worked Solution

1. Data types in JavaScript

JavaScript is dynamically typed: a variable's type is decided at runtime and can change.

Primitive types (immutable, stored by value)

Type	Example
`number`	`42`, `3.14`, `NaN`, `Infinity`
`string`	`"hello"`, `'hi'`, `template ${x}`
`boolean`	`true`, `false`
`undefined`	a declared variable with no value
`null`	intentional "no value"
`symbol`	`Symbol('id')`, a unique identifier
`bigint`	`123n`, for very large integers

Non-primitive (reference) type: object, which includes plain objects {}, arrays [], functions, Date, Map, Set (stored by reference).

let a = 10;            typeof a;   // "number"
let b = "text";        typeof b;   // "string"
let c = null;          typeof c;   // "object" (historic quirk)
let d;                 typeof d;   // "undefined"
let e = [1, 2];        typeof e;   // "object" (use Array.isArray)

2. Function expression

A function expression creates a function inside an expression and assigns it to a variable; the function may be anonymous.

const square = function (n) {      // function expression
  return n * n;
};
console.log(square(5));              // 25

const add = (a, b) => a + b;         // arrow function expression

Differences from a function declaration (function square(n) {...}):

Declaration	Expression
Fully hoisted; can be called before it is defined	Not usable before the assignment line runs (variable hoisted, value is not)
Always has a name	Can be anonymous or named

Uses: callbacks (arr.map(function (x) {...})), IIFEs (function(){ ... })();, closures, and passing functions as values.

3. The `this` keyword

this refers to the object that is executing the current code; its value depends on how the function is called.

Context	Value of `this`
Global scope / plain function (non-strict)	`window` (browser) or `globalThis`; `undefined` in strict mode
Method call `obj.method()`	`obj`
Constructor `new Person()`	the newly created object
Event handler	the element that received the event
`call`, `apply`, `bind`	the object explicitly supplied
Arrow function	inherits `this` from the enclosing scope (no own `this`)

const user = {
  name: "Raiyan",
  greet() { console.log("Hi, " + this.name); }   // this = user
};
user.greet();                 // Hi, Raiyan

const fn = user.greet;
fn();                          // this lost: undefined / window.name

fn.call({ name: "Ali" });      // Hi, Ali (explicit binding)

const timer = {
  n: 0,
  start() { setInterval(() => this.n++, 1000); }   // arrow keeps this = timer
};

Q5(b). Compare Servlets and JSP regarding their functionality, advantages, and limitations. In what scenarios would you choose one over the other?20245m

Module III: Basics of Web Programming

Compare Servlets and JSP regarding their functionality, advantages, and limitations. In what scenarios would you choose one over the other?

View this question on its own page →

Search Google Ask AI

Worked Solution

Servlets vs JSP

Servlet: a Java class that runs on a server (servlet container such as Tomcat), receives HTTP requests, and generates responses. It is Java code with HTML embedded in out.println().

JSP (JavaServer Pages): a text page that is HTML with Java embedded (scriptlets, expressions, JSTL, EL). The container translates a JSP into a servlet and compiles it on first request, so JSP is built on servlets.

// Servlet
public class HelloServlet extends HttpServlet {
  protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
    res.setContentType("text/html");
    res.getWriter().println("<h1>Hello " + req.getParameter("name") + "</h1>");
  }
}

<%-- JSP --%>
<h1>Hello <%= request.getParameter("name") %></h1>

Comparison

Basis	Servlet	JSP
Nature	Java class with HTML in strings	HTML page with Java tags
Best for	Logic, controllers, processing	Presentation, views
Ease of writing	Harder for UI; markup is hard to edit	Easier for designers; natural HTML
Compilation	Compiled manually	Auto-translated and compiled on first request
Maintenance	Changing HTML needs recompiling Java	Edit the page directly
Built-in objects	Must be obtained explicitly	Implicit objects (`request`, `session`, `out`)
Performance	Slightly faster on first request	First request slower (translation), then equal

Advantages and limitations

Servlets

Advantages: full control over request handling, efficient (one thread per request), platform independent, good for controllers, filters, and APIs.
Limitations: presentation code is cumbersome and mixes HTML into Java; designers cannot edit pages easily.

JSP

Advantages: simple and quick UI development, easy for web designers, tag libraries (JSTL) reduce Java code, automatic recompilation.
Limitations: heavy scriptlet logic makes pages messy and hard to debug and test; not suitable for complex business logic.

When to choose which

Use Servlets for controllers, request processing, form handling, authentication, file upload, REST endpoints, and business logic.
Use JSP for pages that mostly display dynamic data (views, reports, templates).
Best practice (MVC): servlet as controller, JSP as view, JavaBeans/services as the model. The servlet processes the request, then forwards to a JSP: request.getRequestDispatcher("result.jsp").forward(req, res);

Q6(a). Describe how to handle form data in PHP. Explain the creation of an HTML form, focusing on the method and action attributes. Discuss retrieving data using the GET and POST methods, and provide a code example demonstrating the form submission process.20247m

Module III: Basics of Web Programming

Describe how to handle form data in PHP. Explain the creation of an HTML form, focusing on the method and action attributes. Discuss retrieving data using the GET and POST methods, and provide a code example demonstrating the form submission process.

View this question on its own page →

Search Google Ask AI

Worked Solution

Handling form data in PHP

A form collects user input in the browser and sends it to a PHP script on the server, which reads the values through the superglobals $_GET` and `$ _POST.

1. Creating the HTML form

<form action="process.php" method="post">
  Name:  <input type="text"  name="username" required><br>
  Email: <input type="email" name="email"    required><br>
  <input type="submit" value="Submit">
</form>

2. The `action` and `method` attributes

action: the URL of the script that receives and processes the data (process.php). If empty, it submits to the same page.
method: how data is sent, either get or post.
Each input's name attribute becomes the key in the PHP array.

3. GET vs POST

Basis	GET	POST
Data location	Appended to the URL as a query string (`?username=Ali&email=a@b.com`)	Sent in the HTTP request body
Visibility	Visible, bookmarkable	Hidden from the URL
Size limit	Limited by URL length	Practically large
Security	Not for passwords or sensitive data	Better, but still needs HTTPS
Use	Search, filters, idempotent reads	Login, registration, uploads, data changes
PHP array	$_GET['name']` \| `$ _POST['name']

$_REQUEST holds both GET and POST (and cookie) data.

4. Complete example

form.html

<form action="process.php" method="post">
  Name:  <input type="text"  name="username"><br>
  Email: <input type="email" name="email"><br>
  <input type="submit" value="Register">
</form>

process.php

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // 1. Check that fields exist
     $name = isset($ _POST["username"]) ? trim($_POST["username"]) : "";
     $email = isset($ _POST["email"])    ? trim($_POST["email"])    : "";

    // 2. Validate
    if ( $name === "" || !filter_var($ email, FILTER_VALIDATE_EMAIL)) {
        echo "Please enter a valid name and email.";
    } else {
        // 3. Sanitize output to prevent XSS
        echo "Welcome, " . htmlspecialchars($name) . "<br>";
        echo "Your email: " . htmlspecialchars($email);
    }
}
?>

GET example: search.php?q=php is read with $q =$ _GET['q'] ?? '';

Form submission process

The user fills and submits the form.
The browser sends a request to the action URL using the chosen method.
PHP receives the data in $_POST`/`$ _GET.
The script validates and sanitizes it (trim, filter_var, htmlspecialchars), then processes it (store in a database, send email).
It returns a response page (or redirects with header('Location: ...')).

Good practices: always validate on the server (client-side checks can be bypassed), use prepared statements for database queries, and use HTTPS for sensitive data.

Q6(b). What is AJAX (Asynchronous JavaScript and XML), and how does it enhance user experience in web applications? Provide a brief code example of an AJAX request and explain how to update a web page with the response.20247m
Module III: Basics of Web Programming
What is AJAX (Asynchronous JavaScript and XML), and how does it enhance user experience in web applications? Provide a brief code example of an AJAX request and explain how to update a web page with the response.

View this question on its own page →
Search Google Ask AI
Worked Solution
What is AJAX?

AJAX (Asynchronous JavaScript and XML) is a technique for exchanging data with the server in the background and updating part of a web page without reloading the whole page. Despite the name, it commonly uses JSON today instead of XML.

Components: HTML/CSS (presentation), DOM (dynamic updates), XMLHttpRequest or fetch() (asynchronous requests), JavaScript (logic), and JSON/XML (data format).

How it improves user experience

No full page reloads: only the changed part is refreshed, so the app feels fast and smooth.

Responsiveness: the user keeps working while data loads.

Less bandwidth: only the needed data travels, not the entire page.

Live features: auto-suggest search, form validation, chat, notifications, infinite scroll, live scores.

Desktop-like feel: enables single-page applications (Gmail, Google Maps).

Code example (fetch API)

<button id="load">Load user</button> <div id="result"></div> <script> document.getElementById('load').addEventListener('click', async () => { const box = document.getElementById('result'); box.textContent = 'Loading...'; try { const res = await fetch('https://jsonplaceholder.typicode.com/users/1'); // async request if (!res.ok) throw new Error('HTTP ' + res.status); const user = await res.json(); // parse JSON box.innerHTML = `<b> ${user.name}</b><br>$ {user.email}`; // update the page } catch (err) { box.textContent = 'Error: ' + err.message; } }); </script>

Classic version with XMLHttpRequest

const xhr = new XMLHttpRequest(); xhr.open('GET', 'data.php?id=1', true); // true = asynchronous xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('result').innerHTML = xhr.responseText; } }; xhr.send();

How the page is updated with the response

An event (click, keypress, timer) triggers a JavaScript function.

JavaScript sends an asynchronous request to the server (fetch/XMLHttpRequest).

The server processes it and returns data (JSON, XML, or HTML fragment).

A callback (or await) receives the response once it arrives; the page stays usable meanwhile.

JavaScript parses the data (res.json()) and modifies the DOM (textContent, innerHTML, appendChild) to show it.

Note: innerHTML with untrusted data risks XSS, so prefer textContent or sanitize the data.
Budget App•POCKETLY
Pocketly on Android
Log daily food, travel, and hostel expenses instantly. Set monthly spending limits and see where your money goes without complex spreadsheets.
Install Pocketly

Q7(a). What are the different e-business models? Compare B2B, B2C, C2C, and C2B models with examples.20247m

Module IV: E-commerce Applications

What are the different e-business models? Compare B2B, B2C, C2C, and C2B models with examples.

View this question on its own page →

Search Google Ask AI

Worked Solution

E-business models

An e-business model describes who does business with whom over the Internet, and how value and revenue are generated. The four main models are classified by the participants.

1. B2B (Business-to-Business)

One business sells products or services to another business.

Features: large order volumes, negotiated prices, long-term contracts, supply-chain focus, invoicing and procurement systems.
Examples: Alibaba, IndiaMART, Amazon Business, a software vendor selling to companies.

2. B2C (Business-to-Consumer)

A business sells directly to individual customers.

Features: high volume of small transactions, fixed prices, retail catalogue, quick payment, marketing to the public.
Examples: Amazon, Flipkart, Netflix, Zomato.

3. C2C (Consumer-to-Consumer)

Individuals sell to other individuals through a third-party platform.

Features: the platform provides listings, trust and payment; revenue comes from commissions and listing fees; user-generated content and ratings.
Examples: eBay, OLX, Quikr, Facebook Marketplace.

4. C2B (Consumer-to-Business)

Individuals offer products, services, or content to businesses, reversing the traditional flow.

Features: the consumer sets the value, or businesses bid for the consumer's work.
Examples: freelancers on Upwork or Fiverr, stock photographers selling to companies (Shutterstock), influencers selling promotions, reverse-auction sites.

Comparison

Basis	B2B	B2C	C2C	C2B
Seller	Business	Business	Consumer	Consumer
Buyer	Business	Consumer	Consumer	Business
Order size	Large	Small	Small	Varies
Pricing	Negotiated / bulk	Fixed	Set by sellers / auction	Set by consumer or bid
Sales cycle	Long	Short	Short	Project-based
Example	Alibaba	Amazon	OLX	Upwork

Other models

B2G (Business-to-Government): selling to government agencies (e.g. GeM portal).
G2C (Government-to-Citizen): online tax filing, passport services.
D2C (Direct-to-Consumer): brands selling directly without intermediaries.
Revenue models: advertising, subscription, commission, direct sales, freemium.

Q7(b). Discuss the importance of search engine optimization (SEO) in e-commerce. What practices can improve a website's visibility in search results?20247m
Module IV: E-commerce Applications
Discuss the importance of search engine optimization (SEO) in e-commerce. What practices can improve a website's visibility in search results?

View this question on its own page →
Search Google Ask AI
Worked Solution
Importance of SEO in e-commerce

Search Engine Optimization (SEO) is the practice of improving a website so that it ranks higher in the unpaid (organic) results of search engines such as Google.

Why it matters in e-commerce

More visibility and traffic: most shoppers begin with a search; high ranking puts products in front of them.

Cost-effective: organic traffic has no per-click cost, unlike paid ads, and keeps working long term.

Targeted customers: people searching for a product already have buying intent, so conversion rates are higher.

Trust and credibility: users trust top organic results more than ads.

Better user experience: SEO work (speed, mobile-friendliness, clear structure) also improves usability.

Competitive advantage and growth: ranking above competitors builds brand awareness and scalable sales.

Practices that improve visibility

On-page SEO

Keyword research: target terms customers use ("buy running shoes online"), including long-tail keywords.

Optimised titles and meta descriptions: unique, keyword-rich, compelling.

Proper headings (H1–H3) and clean, readable URLs (/mens-running-shoes).

Unique product descriptions: avoid copying supplier text; add useful details and reviews.

Image optimisation: compressed files, descriptive file names, alt text.

Structured data (schema markup): price, availability, ratings for rich results.

Internal linking and clear site navigation/breadcrumbs.

Technical SEO

Fast page speed (compression, caching, CDN, lazy loading).

Mobile-friendly, responsive design.

HTTPS security.

XML sitemap and robots.txt; fix broken links and duplicate content (canonical tags).

Off-page SEO

Quality backlinks from reputable sites, guest posts, and partnerships.

Social media presence and sharing.

Customer reviews and ratings.

Content marketing

Blogs, buying guides, videos, and FAQs that attract and answer searches.

Monitoring

Track rankings, traffic, and conversions with Google Search Console and Analytics, and refine continually.

Avoid black-hat tricks such as keyword stuffing, hidden text, and paid link schemes; search engines penalise them.

Q8(a). Describe the process of designing an e-commerce site. What key factors should be considered to ensure usability and effectiveness?20247m

Module IV: E-commerce Applications

Describe the process of designing an e-commerce site. What key factors should be considered to ensure usability and effectiveness?

View this question on its own page →

Search Google Ask AI

Worked Solution

Process of designing an e-commerce site

1. Planning and requirement analysis

Define business goals, target audience, and products/services.
Study competitors and choose a business model (B2C, B2B, C2C).
List features: catalogue, search, cart, checkout, user accounts, admin panel.

2. Choose platform and technology

Build from scratch (e.g. React/Next.js + Node.js + MongoDB/MySQL) or use a platform (Shopify, WooCommerce, Magento).
Select hosting, domain name, and third-party services (payment gateway, shipping, email).

3. Information architecture and UX design

Plan site structure: home, categories, product pages, cart, checkout, account, help.
Create wireframes and prototypes, then the visual design with consistent branding.

4. Development

Front end: responsive product listing, filters, product pages, cart.
Back end: product and order management, user authentication, inventory, and APIs.
Database: products, customers, orders, payments.
Integrate payment gateway (Razorpay, Stripe, PayPal), tax, and shipping calculation.

5. Security and legal compliance

HTTPS/SSL, secure password storage, input validation, protection against SQL injection, XSS, and CSRF.
PCI-DSS compliance for card data (use hosted gateway pages), privacy policy, terms, returns policy, data-protection laws.

6. Testing

Functional, usability, cross-browser and device, performance/load, and security testing, plus a full test purchase flow.

7. Deployment and launch

Deploy to a reliable host or cloud, configure backups and monitoring, then launch.

8. Marketing, maintenance, and improvement

SEO, social media, email marketing, analytics; regular updates, bug fixes, and A/B testing of the checkout.

Key factors for usability and effectiveness

Factor	What to ensure
Easy navigation	Clear menus, categories, breadcrumbs, and a powerful search with filters and sorting
Product presentation	High-quality images, detailed descriptions, prices, stock status, reviews
Simple checkout	Few steps, guest checkout, autofill, progress indicator, multiple payment options
Speed	Fast loading through image compression, caching, and CDN
Mobile-responsive design	Works well on phones, since much shopping is mobile
Trust and security	SSL badge, secure payments, clear return/refund policy, contact details
Accessibility	Readable fonts, contrast, alt text, keyboard support
Personalisation	Recommendations, wishlists, order tracking, saved addresses
Customer support	Live chat, FAQs, easy contact
Scalability and reliability	Handles traffic peaks; good uptime and backups
SEO-friendliness	Clean URLs, meta tags, structured data
Analytics	Track conversion, cart abandonment, and user behaviour

A good design balances an attractive look with fast, simple, and secure shopping so that visitors become customers.

Q8(b). Define the Semantic Web. How does it differ from the current web, and what technologies support it?20247m

Module V: Web 3.0

Define the Semantic Web. How does it differ from the current web, and what technologies support it?

View this question on its own page →

Search Google Ask AI

Worked Solution

The Semantic Web

The Semantic Web (proposed by Tim Berners-Lee, often called Web 3.0 in its original sense) is an extension of the current web in which information is given well-defined meaning, so that machines can understand, interpret, and process it, not just display it. Data is published in a structured, linked form that software agents can reason over.

Example: on today's web, "Paris" on a page is just text. In the Semantic Web it is marked as a City that is the capital of France, so a program can answer "Which capitals are in Europe?"

How it differs from the current web

Basis	Current web (Web 1.0/2.0)	Semantic Web
Content is for	Humans to read	Humans and machines
Data form	Unstructured text and HTML markup	Structured, machine-readable data with metadata
Meaning	Not understood by computers	Explicit semantics through ontologies
Search	Keyword matching	Concept-based, context-aware answers
Links	Link documents to documents	Link data and concepts (Linked Data)
Integration	Hard to combine data from different sites	Easy data sharing and integration across sources
Automation	Limited	Intelligent agents can reason and act

Supporting technologies (the Semantic Web stack)

URI/IRI: unique identifiers for every resource.
XML: syntax for structured documents; XML Namespaces avoid name clashes.
RDF (Resource Description Framework): the core data model, expressing facts as subject–predicate–object triples.
```
<Paris> <isCapitalOf> <France> .
```
Serialisations: RDF/XML, Turtle, JSON-LD.
RDFS (RDF Schema): vocabulary for classes and properties.
OWL (Web Ontology Language): describes richer ontologies, relationships, and constraints, enabling reasoning.
SPARQL: the query language for RDF data.
Ontologies and vocabularies: shared definitions (e.g. FOAF, Dublin Core, schema.org).
Rules and logic (SWRL, RIF) and proof and trust layers, with digital signatures.
Microdata, RDFa, and JSON-LD: embed semantic markup directly in HTML pages.

Applications: knowledge graphs (Google Knowledge Graph, Wikidata), smarter search, healthcare and library data linking, and recommendation and virtual assistants.

Q9(a). Explain the technologies that support Web 3.0 and how they enable the creation of decentralized applications.20247m

Module V: Web 3.0

Explain the technologies that support Web 3.0 and how they enable the creation of decentralized applications.

View this question on its own page →

Search Google Ask AI

Worked Solution

Web 3.0 technologies

"Web 3.0" is used in two related senses: the Semantic Web (machine-understandable data) and the decentralised web (users own their data and identity through blockchain). Both rely on the following technologies.

Technologies

Technology	Role
Blockchain	A distributed, tamper-resistant ledger that records transactions without a central authority (Ethereum, Solana)
Smart contracts	Self-executing programs stored on the blockchain that run automatically when conditions are met (Solidity)
Cryptocurrencies and tokens	Native payment and incentive mechanisms; NFTs represent unique digital ownership
Decentralised storage	Files stored across a peer-to-peer network (IPFS, Filecoin, Arweave) instead of one server
Digital wallets and decentralised identity (DID)	MetaMask-style wallets let users sign in and own their identity and assets without a central account
Semantic Web standards	RDF, OWL, SPARQL give data machine-readable meaning
Artificial intelligence and machine learning	Understand data, personalise, and automate
Edge computing and 3D/AR/VR (metaverse)	Immersive, distributed experiences
Oracles	Bring real-world data (prices, weather) safely into smart contracts (Chainlink)

How they enable decentralised applications (dApps)

A dApp has its logic in smart contracts on a blockchain instead of on a company's private server.

User (browser + wallet)
     |  web3.js / ethers.js
Front end (HTML/JS/React)  --->  Smart contract on blockchain  --->  IPFS storage

No single point of control: logic runs on many nodes, so there is no central owner who can shut it down or alter it.
Trustless transactions: smart contracts enforce rules automatically; consensus (Proof of Stake/Work) validates every action.
User ownership: users hold their own keys, data, and assets through wallets, and sign in with a wallet address.
Transparency and immutability: all transactions are publicly verifiable and cannot be changed afterwards.
Censorship resistance and availability: data and code are replicated across the network.
Built-in payments and incentives: tokens allow direct peer-to-peer payments and reward participants.
Interoperability: open standards and shared data let dApps and services connect.

Example in JavaScript (ethers.js)

import { ethers } from 'ethers';
const provider = new ethers.BrowserProvider(window.ethereum);   // wallet
const signer   = await provider.getSigner();
const contract = new ethers.Contract(address, abi, signer);      // smart contract
await contract.vote(candidateId);                                 // on-chain action

Examples of dApps: Uniswap (decentralised exchange), Aave (lending), OpenSea (NFT marketplace), ENS (domain names).

Challenges: scalability and transaction fees, user experience, regulation, and security risks in smart contracts.

Q9(b). Write a short note on any two of the following: (i) DOM (Document Object Model) (ii) Static webpage vs. dynamic webpage (iii) Fat Client vs. Fat Servers. [3.5 × 2 = 7]20247m

Module I: Introduction to Web Technologies and Architectures

Write a short note on any two of the following: (i) DOM (Document Object Model) (ii) Static webpage vs. dynamic webpage (iii) Fat Client vs. Fat Servers. [3.5 × 2 = 7]

View this question on its own page →

Search Google Ask AI

Worked Solution

Any two notes are required (3.5 marks each). All three are given below; write any two in the exam.

(i) DOM (Document Object Model)

The DOM is a platform- and language-independent programming interface that represents an HTML or XML document as a tree of objects (nodes). The browser builds it when parsing a page, and JavaScript can read and change it, so pages become dynamic.

Node types: document, element, attribute, text, and comment nodes.

document
  └─ html
      ├─ head ─ title
      └─ body
          ├─ h1  ─ "Hello"
          └─ p   ─ "Text"

What JavaScript can do with it:

const h = document.getElementById('title');       // select
h.textContent = 'New heading';                     // change content
h.style.color = 'blue';                            // change style
const p = document.createElement('p');             // create node
p.textContent = 'Added';
document.body.appendChild(p);                      // insert
h.addEventListener('click', () => alert('Hi'));    // handle events

It allows adding, removing, or modifying elements, attributes, and styles, and reacting to events.

(ii) Static vs dynamic web page

Basis	Static page	Dynamic page
Content	Fixed; same for every visitor	Generated at request time; can differ per user
Technology	HTML, CSS (and client-side JS)	Server-side scripting (PHP, Node.js, JSP) with a database
Updates	Manual editing of the file	Content changes through a database or CMS
Interaction	Minimal	Login, forms, search, shopping carts
Development	Simple and quick	More complex
Speed	Faster; can be cached or served from a CDN	Slower due to processing and database calls
Cost / hosting	Cheap	Needs server and database
Examples	Portfolio, brochure page	Facebook, Amazon, online banking

(iii) Fat client vs fat server

Basis	Fat (thick) client	Fat server (thin client)
Processing	Most of the business logic on the client	Most of the logic on the server
Client	Powerful, needs installation	Simple; often just a browser
Server	Mainly stores data	Does processing and stores data
Maintenance	Updates must be installed on every client	Update once on the server
Network use	Lower (after local processing)	Higher, since each action goes to the server
Security	Data and logic exposed on the client	Centralised and easier to secure
Offline use	Possible	Not possible
Examples	Desktop apps, MS Office, games	Traditional web apps, terminal-based systems

Modern single-page applications combine both: a rich JavaScript client with server APIs.

Previous year2023 Next year2025

Official AppAndroid App

PYQDeck for Android

Solve BEU previous-year exam papers anywhere, anytime. Fast search, offline paper viewing, and step-by-step solutions designed specifically for your phone.

Get on Google Play

Web Technology

Pocketly on Android

Client-server computing

Middleware

How they enhance web applications

Block-level vs inline elements

Example

Effect on layout and rendering

N-tier architecture

Tiers explained

Benefits

How it improves scalability

How it improves maintainability

Web browser architecture

Components

How components interact to render a page

Web protocols

1. HTTP (HyperText Transfer Protocol)

2. FTP (File Transfer Protocol)

3. SMTP (Simple Mail Transfer Protocol)

4. POP (Post Office Protocol, POP3)

Comparison

Types of HTML lists

1. Unordered list <ul> (bulleted)

2. Ordered list <ol> (numbered)

3. Description (definition) list <dl>

Applying CSS: colour, font size, list style

Useful list-style-type values

1. Data types in JavaScript

2. Function expression

3. The this keyword

Servlets vs JSP

Comparison

Advantages and limitations

When to choose which

Handling form data in PHP

1. Creating the HTML form

2. The action and method attributes

3. GET vs POST

4. Complete example

Form submission process

What is AJAX?

How it improves user experience

Code example (fetch API)

Classic version with XMLHttpRequest

How the page is updated with the response

Pocketly on Android

E-business models

1. B2B (Business-to-Business)

2. B2C (Business-to-Consumer)

3. C2C (Consumer-to-Consumer)

4. C2B (Consumer-to-Business)

Comparison

Other models

Importance of SEO in e-commerce

Practices that improve visibility

On-page SEO

Technical SEO

Off-page SEO

Content marketing

Monitoring

Process of designing an e-commerce site

1. Planning and requirement analysis

2. Choose platform and technology

3. Information architecture and UX design

4. Development

5. Security and legal compliance

6. Testing

7. Deployment and launch

8. Marketing, maintenance, and improvement

Key factors for usability and effectiveness

The Semantic Web

How it differs from the current web

Supporting technologies (the Semantic Web stack)

Web 3.0 technologies

Technologies

How they enable decentralised applications (dApps)

(i) DOM (Document Object Model)

(ii) Static vs dynamic web page

(iii) Fat client vs fat server

1. Unordered list `<ul>` (bulleted)

2. Ordered list `<ol>` (numbered)

3. Description (definition) list `<dl>`

Useful `list-style-type` values

3. The `this` keyword

2. The `action` and `method` attributes