CSS Prepare

optional · CSS study notes

11. Web Engineering

FPSC CSS Computer Science past papers (2016–2026) — 36 questions: 5 MCQs, 31 subjective parts. Newest first.

Part A — Subjective Questions

2025 · Paper-II · Q8(a) (6 marks)

Question

What is the role of requirement engineering in web engineering? List functional and non-functional requirements for a website.

Solution

Requirement engineering in web engineering is the systematic process of eliciting, analyzing, specifying, validating and managing what a website/web application must do and how well it must do it, before/while it is designed and built. Because web projects typically have short delivery cycles, diverse stakeholders (business, marketing, end-users), and content that changes often, requirement engineering plays a critical role in scoping features correctly, aligning the site with business goals, preventing costly rework, and forming the basis for later testing/acceptance criteria.

Functional requirements (what the website must DO) for, e.g., an e-commerce website:

  • Users can register/login and manage their profile.
  • Users can search and browse products by category.
  • Users can add items to a cart and complete checkout/payment.
  • Admin can add, update, and remove product listings.
  • The system sends order-confirmation emails.

Non-functional requirements (how well the system performs) for the same website:

  • Performance: pages must load within 2 seconds under normal load.
  • Security: all payment data must be transmitted over HTTPS/TLS and comply with PCI-DSS.
  • Usability: the site must be navigable on both desktop and mobile (responsive design).
  • Availability/Reliability: the site must maintain 99.9% uptime.
  • Scalability: the system must support a growing number of concurrent users without redesign.

2025 · Paper-II · Q8(b) (6 marks)

Question

What are different security mechanisms used for encrypting the contents of a website? Explain any one in detail.

Solution

Common mechanisms used to secure/encrypt website content and communication include: SSL/TLS (HTTPS) for encrypting data in transit between browser and server; symmetric encryption (e.g., AES) for encrypting stored data; asymmetric/public-key encryption (e.g., RSA) for key exchange and digital signatures; hashing (e.g., SHA-256) combined with salting for storing passwords securely; Web Application Firewalls (WAF) to filter malicious traffic; and content security policies (CSP) to prevent injection-based attacks.

Detailed explanation of TLS/HTTPS: HTTPS is HTTP layered over TLS (Transport Layer Security). When a browser connects to an HTTPS site, a TLS handshake occurs: (1) the client sends a 'ClientHello' listing supported cipher suites; (2) the server responds with its digital certificate (containing its public key, issued/signed by a trusted Certificate Authority) and chosen cipher suite; (3) the client verifies the certificate's authenticity against trusted root CAs, then uses the server's public key to securely exchange (or, in modern TLS, derive via Diffie-Hellman key exchange) a shared symmetric session key; (4) from that point on, all HTTP traffic between client and server is encrypted using this fast symmetric session key (e.g., AES-GCM), while integrity is verified via a MAC/AEAD tag. This provides confidentiality (eavesdroppers cannot read the data), integrity (tampering is detected), and authentication (the client can trust it is really talking to the genuine website, not an impostor).

2025 · Paper-II · Q8(c) (8 marks)

Question

Explain 3-tier web application architecture.

Solution

3-tier web application architecture divides an application into three logically (and often physically) separate layers, each with a distinct responsibility, communicating only with the adjacent layer:

  1. Presentation Tier (Client/UI layer): runs in the user's web browser (or a mobile app); consists of HTML, CSS, JavaScript that render the user interface, capture user input, and send requests to the application tier. It contains no direct business logic or database access.

  2. Application/Logic Tier (Middle/Business layer): runs on a web/application server (e.g., using PHP, Java/Servlets, Node.js, ASP.NET); receives requests from the presentation tier, implements the actual business rules and processing logic (e.g., calculating a total price, validating an order), and mediates all access to the data tier — the presentation layer never talks to the database directly.

  3. Data Tier (Database layer): runs on a database server (e.g., MySQL, Oracle, PostgreSQL); is solely responsible for storing, retrieving and managing persistent data, responding only to queries/commands issued by the application tier.

Advantages of this separation: each tier can be developed, scaled, secured and maintained independently (e.g., adding more application servers behind a load balancer without touching the database, or changing the UI framework without touching business logic); it improves security since the database is never exposed directly to the client; and it improves maintainability/reusability since business logic is centralized in one layer rather than duplicated in the UI. This is the dominant architecture behind most modern web applications, as opposed to older 2-tier (client directly talking to database) designs.

2024 · Paper-II · Q8(a) (7 marks)

Question

Develop a numerical comparison between client-side functionalities implemented using different JavaScript patterns. Discuss how these patterns impact code maintainability and performance?

Solution

Consider a client-side application with 500 lines of ad hoc, unstructured JavaScript directly manipulating global variables and the DOM: such code typically has high coupling, with a cyclomatic complexity that can reach around 40+ for its main control flow, making it hard to test or modify without unintended side effects, since any part of the code can touch any global state.

Refactoring using the Module Pattern (encapsulating related functionality with closures, exposing only a defined public interface) might split this into, say, 5 modules of about 100 lines each, each with a much smaller, isolated complexity (roughly 8 per module) and clearly defined interfaces, substantially improving the maintainability index and making unit testing feasible module-by-module.

Using the Observer/Pub-Sub pattern for UI event handling can reduce direct dependencies between components: without it, n interacting UI components might need up to O(n^2) direct pairwise references to notify each other of changes; with a central event bus, each component only needs one connection to the bus, reducing this to O(n) relationships, which scales far better and simplifies maintenance as the UI grows, at a small runtime cost of the extra indirection through the event dispatcher.

2024 · Paper-II · Q8(b) (7 marks)

Question

Discuss data aspect architectures in web development. How do these architectures address challenges related to data storage, retrieval, and management?

Solution

Web applications typically combine several data-related architectural layers: client-side storage (cookies, localStorage, IndexedDB) for small amounts of per-user data or offline caching; server-side databases (relational SQL databases for structured, transactional data, or NoSQL databases for flexible-schema/high-scale data); caching layers (Redis, Memcached, or CDN edge caching) to reduce repeated load on the primary database and speed up frequent reads; and architectural patterns like microservices, where each service owns its own dedicated database best suited to its data shape, coordinated through APIs.

These architectures address the core challenges as follows: storage is addressed by choosing the right engine for the data's structure and access pattern (e.g., document store for flexible JSON-like data, relational DB for strongly related transactional data); retrieval performance is addressed through indexing, caching layers, and query optimization, reducing latency for frequently accessed data; and management (consistency, replication, backup, scaling) is addressed through replication strategies, backup/disaster-recovery policies, and, in distributed setups, careful handling of the trade-offs described by the CAP theorem. A well-chosen data architecture lets an application scale its storage and retrieval independently of its business logic.

2024 · Paper-II · Q8(c) (6 marks)

Question

Create a numerical comparison of the efficiency of data exchange using different APIs, such as REST and GraphQL. Discuss the considerations in choosing the appropriate API for a given scenario.

Solution

Suppose a client needs a user's profile plus their recent posts plus each post's comments. With a typical REST API, this might require 3 separate round trips to different endpoints (/user, /user/posts, /post/{id}/comments), each with roughly 100ms network latency, giving about 300ms total latency, and each endpoint may return more fields than actually needed (over-fetching) - e.g., transferring 5KB of JSON when only 1KB of it is actually used by the client.

With GraphQL, the client can send a single query specifying exactly the nested fields it needs (user, posts, and comments together) and receive exactly that ~1KB of data in one round trip (~100ms total) - roughly a 3x latency improvement and a 5x reduction in transferred data for this scenario, since GraphQL avoids both extra round trips and over-fetching.

However, REST has its own advantages: its resource-based endpoints are naturally cacheable at the HTTP level (and by CDNs), and its server implementation is simpler (no need to write field-level resolvers). GraphQL requires a more sophisticated server (a resolver for each field) and is harder to cache generically since queries are dynamic and typically sent via POST. Considerations: choose GraphQL when clients (e.g., mobile apps on constrained networks) need flexible, minimal, and deeply nested data in one request; choose REST for simpler, well-defined, highly cacheable public APIs where over-fetching a few small resources is not a significant concern.

2023 · Paper-I · Q2(c) (6 marks)

Question

Discuss the role of Web Crawling, Indexing & Searching operations for a Search Engine.

Solution

A search engine operates through three coordinated stages:

  1. Web Crawling: automated programs called crawlers/spiders/bots systematically browse the web, starting from a set of seed URLs, downloading page content, and following the hyperlinks found on each page to discover new pages, continuously refreshing already-known pages to detect updates.

  2. Indexing: the crawled content is processed and analyzed - text is tokenized, stop words may be removed, keywords/metadata are extracted - and stored in an inverted index (a data structure mapping each term to the list of documents/pages containing it), enabling extremely fast lookup instead of scanning the entire web at query time.

  3. Searching (query processing and ranking): when a user submits a query, the search engine looks up matching documents in the index, then ranks them by relevance using algorithms considering factors such as keyword frequency/placement, link-based authority (e.g., PageRank), freshness, and user-behavior signals, finally returning the ranked list of results to the user.

2023 · Paper-II · Q8(a) (8 marks)

Question

How SEO improves your website traffic? Explain with proper reasons and coding examples.

Solution

Search Engine Optimization (SEO) improves organic (unpaid) search ranking, which drives more traffic since higher-ranked pages get clicked far more often. It works through several mechanisms:

  • On-page SEO: using descriptive, keyword-relevant titles, headings, and meta descriptions so search engines correctly understand and index the page's content:
<title>Best Coffee Shop in Lahore | Fresh Roasted Coffee</title>
<meta name="description" content="Visit our coffee shop in Lahore for fresh roasted coffee beans and pastries.">
<h1>Best Coffee Shop in Lahore</h1>
<img src="coffee.jpg" alt="Fresh roasted coffee beans on display">

The <title> and meta description directly influence how the page appears in search results and its click-through rate; the alt attribute lets image search also find and rank the page; a proper heading hierarchy (h1, h2...) helps search engines understand content structure.

  • Technical SEO: fast page load speed, mobile-friendliness, an XML sitemap and robots.txt to guide crawlers, and clean semantic HTML5.
  • Off-page SEO: earning quality backlinks from other reputable sites, which search engines treat as a signal of authority/trustworthiness.

Together, these factors raise the page's relevance and authority score, improving its position in search results and therefore increasing the volume of organic visitors.

2023 · Paper-II · Q8(c) (4 marks)

Question

Write the jQuery code to slide elements up and down. Use HTML, CSS, and jQuery

Solution

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  #panel { width:200px; height:200px; background:coral; display:none; }
</style>
</head>
<body>

<button id="toggle">Toggle Panel</button>
<div id="panel"></div>

<script>
$(document).ready(function(){
    $("#toggle").click(function(){
        $("#panel").slideToggle(500);  // slideDown() if hidden, slideUp() if visible
    });
});
</script>
</body>
</html>

Clicking the "Toggle Panel" button smoothly reveals the panel by sliding it down when hidden, and hides it by sliding it up when visible.

2022 · Paper-II · Q7(a) (8 marks)

Question

Explain 3-tier web application architecture.

Solution

A 3-tier web application architecture separates the system into three logically (and often physically) distinct layers:

  1. Presentation tier (client/UI layer): runs in the user's web browser (or a client app), handling HTML/CSS/JavaScript rendering, user input, and display of data - it contains no business logic or direct database access.

  2. Application/business logic tier (middle layer): runs on a web/application server, implementing the core business rules, processing requests from the presentation tier, performing computations/validations, and mediating access to the data tier (e.g., via PHP, Java/Servlets, Node.js, ASP.NET).

  3. Data tier: runs on a database server, responsible for storing, retrieving, and managing persistent data (e.g., MySQL, PostgreSQL, MongoDB), exposed only to the application tier, never directly to the client.

Requests flow: client -> application server (business logic) -> database server, and responses flow back the same way. Benefits include separation of concerns (each tier can be developed/maintained independently), improved security (the database is never directly exposed to the client), scalability (each tier can be scaled independently, e.g., adding more app servers), and easier maintenance (changing the UI does not require touching business logic or the database, and vice versa).

2022 · Paper-II · Q7(b) (6 marks)

Question

Write the jQuery code to slide elements up and down. Also write the code to fade the elements in and out of visibility. Use HTML, CSS, and jQuery.

Solution

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  #box { width:150px; height:150px; background:teal; display:none; margin-top:10px; }
</style>
</head>
<body>

<button id="slideBtn">Slide Up/Down</button>
<button id="fadeBtn">Fade In/Out</button>
<div id="box"></div>

<script>
$(document).ready(function(){
    // slide the element down if hidden, up if visible
    $("#slideBtn").click(function(){
        $("#box").slideToggle(600);   // internally calls slideDown()/slideUp()
    });

    // fade the element in if hidden, out if visible
    $("#fadeBtn").click(function(){
        $("#box").fadeToggle(600);    // internally calls fadeIn()/fadeOut()
    });
});
</script>
</body>
</html>

Clicking "Slide Up/Down" toggles the box's visibility with a vertical sliding animation (slideDown()/slideUp()), while clicking "Fade In/Out" toggles it with an opacity animation (fadeIn()/fadeOut()).

2022 · Paper-II · Q7(c) (6 marks)

Question

What is web application promotion? Discuss some of the common webvertising methods.

Solution

Web application promotion refers to the marketing activities used to increase awareness, traffic, and user adoption of a website or web application, drawing visitors and converting them into active/returning users or customers.

Common webvertising (web advertising) methods include:

  • Search Engine Optimization (SEO): improving organic search ranking through keyword-optimized content, meta tags, and site structure.
  • Search Engine Marketing (SEM) / Pay-Per-Click (PPC): paid ads shown on search results (e.g., Google Ads), charged per click.
  • Social media marketing: promoting through platforms like Facebook, Instagram, LinkedIn, X, using organic posts and paid campaigns.
  • Email marketing: sending newsletters/promotions to a subscriber list.
  • Display/banner advertising: graphical ads placed on partner websites, often through ad networks.
  • Affiliate marketing: paying third parties a commission for traffic/sales they refer.
  • Content marketing: publishing valuable content (blogs, videos) to attract and retain an audience.
  • Influencer marketing: partnering with popular online personalities to promote the product to their followers.

2022 · Paper-II · Q8(a) (8 marks)

Question

Explain process of Web Application Testing.

Solution

Web application testing follows a structured process:

  1. Requirement analysis: understand functional and non-functional requirements of the web application.
  2. Test planning: define test strategy, scope, resources, schedule, and tools.
  3. Test case design: write test cases covering functional testing (features work as specified), usability testing (ease of use, navigation), compatibility testing (across browsers, devices, OS), performance/load testing (response time under load), security testing (SQL injection, XSS, authentication flaws), and database testing (data integrity).
  4. Test environment setup: prepare staging servers, test data, and required browsers/devices.
  5. Test execution: run the designed test cases, both manually and via automation tools (e.g., Selenium).
  6. Defect logging and retesting: record found defects, verify fixes once resolved.
  7. Regression testing: re-run relevant tests after changes to ensure nothing else broke.
  8. Test closure/reporting: summarize results, coverage, and outstanding issues before release.

This process ensures the web application is functionally correct, secure, performant, and usable across different environments before deployment.

2022 · Paper-II · Q8(b) (6 marks)

Question

Explain in detail the Document Object Model (DOM). Also discuss XML and RSS.

Solution

The Document Object Model (DOM) is a programming interface/tree-structured representation of an HTML or XML document, where every element, attribute, and piece of text becomes a node in a tree. It allows scripts (typically JavaScript) to dynamically access, traverse, and modify the structure, content, and styling of a document after it has loaded - e.g., document.getElementById(), appendChild(), or changing an element's style - enabling interactive, dynamic web pages.

XML (eXtensible Markup Language) is a markup language designed to store and transport structured data using user-defined tags (unlike HTML's fixed tag set), making it both human-readable and machine-parseable; it is widely used for data interchange between systems and as a configuration/document format.

RSS (Really Simple Syndication) is an XML-based format specifically used for web feed syndication - publishing frequently updated content such as blog posts or news headlines using a standard structure of elements like , , , , and , allowing feed readers/aggregators to automatically fetch and display updates from many sites. The DOM is used by browsers and applications to parse and manipulate both XML documents and RSS feeds programmatically.

2022 · Paper-II · Q8(c) (6 marks)

Question

Explain how can you access a database from a JSP page? Give the database connectivity issues in details.

Solution

A JSP page accesses a database through JDBC (Java Database Connectivity):

<%@ page import="java.sql.*" %>
<%
    Class.forName("com.mysql.cj.jdbc.Driver");
    Connection con = DriverManager.getConnection(
        "jdbc:mysql://localhost:3306/mydb", "user", "pass");
    PreparedStatement ps = con.prepareStatement(
        "SELECT * FROM students WHERE id=?");
    ps.setInt(1, 101);
    ResultSet rs = ps.executeQuery();
    while (rs.next()) {
        out.println(rs.getString("name"));
    }
    con.close();
%>

Steps: load the JDBC driver class, open a Connection using a connection URL/credentials, create a Statement or (preferably) a PreparedStatement, execute the query, iterate over the returned ResultSet, and finally close the connection/statement/result set to release resources.

Database connectivity issues to be aware of:

  • Resource leaks: forgetting to close Connection/Statement/ResultSet objects exhausts the database's connection pool.
  • SQL injection: building queries via string concatenation instead of PreparedStatement parameters allows malicious input to alter query logic.
  • Connection pooling overhead: opening a new raw connection per request is slow; production systems use a connection pool (e.g., via a DataSource) instead.
  • Driver/version compatibility: JDBC driver version must match the database server version/features.
  • Exception handling: SQLExceptions must be caught and handled gracefully, without exposing raw error details to the end user.
  • Transaction management: multiple related statements often need to be wrapped in a transaction (commit/rollback) to keep data consistent.
  • Scalability under concurrent load: many simultaneous JSP requests hitting the database directly (without pooling/caching) can overwhelm the database server.

2021 · Paper-II · Q8(a) (8 marks)

Question

Analyze the code and draw resulting table as drawing on the paper (HTML table with rowspan/colspan cells numbered 1-17).

Solution

The table has a base width of 4 columns (established by row 1: one plain cell plus one colspan='3' cell = 4 column-units, confirmed by row 2's rowspan(3)+colspan(4,4)+cell(5) = 4). Tracing each row's spans gives the rendered grid:

Row1: | 1        |    2     |    2     |    2     |
Row2: | 3        |    4     |    4     |    5     |   (3 spans down into Row3)
Row3: |(3, cont.)|    6     |    7     |    18    |
Row4: | 9        |    9     |    9     |  (blank) |   (colspan=3 only covers 3 of 4 columns)
Row5: | 10       |    11    |    11    |    11    |
Row6: | 12       |    13    |    14    |  (blank) |   (only 3 <td> given for this row)
Row7: | 15       |    16    |    16    |    17    |   (15 spans down into a Row8 not given)

Explanation of the merges: cell '1' occupies 1 column, '2' spans 3 columns (colspan=3); '3' spans 2 rows (rowspan=2, occupying the same column position in Row2 and Row3), '4' spans 2 columns, '5' is a single cell; Row3's '6','7','18' fill the remaining 3 columns since column 1 is already occupied by 3's rowspan; '9' spans 3 columns leaving the 4th column of that row empty as literally coded; '10' is single and '11' spans the remaining 3 columns; Row6 supplies only 3 plain cells (12,13,14), leaving the 4th column of that row blank; '15' spans 2 rows (its second row is not included in the given snippet), '16' spans 2 columns, and '17' is a single cell.

2021 · Paper-II · Q8(b) (6 marks)

Question

What is the role of requirement engineering in web engineering? List functional and non-functional requirements for a website.

Solution

Requirement Engineering (RE) in web engineering is the process of eliciting, analysing, documenting, and validating what a website/web application must do and how well it must do it, BEFORE design and development begin. Its role is to ensure the built site actually addresses real business and user needs, to provide a clear, agreed baseline that guides design/implementation decisions, to control scope creep, and to give a basis against which the finished site can later be tested and accepted — reducing costly rework that would otherwise result from building the wrong thing. Functional requirements for a website (examples): user registration and login, product/content search, adding items to a shopping cart and checking out, an admin panel for managing content, and displaying a user's order history. Non-functional requirements for a website (examples): pages must load within a specified time (e.g. 2-3 seconds), the site must support a specified number of concurrent users, the site must maintain a target uptime/availability (e.g. 99.9%), the site must work correctly across major browsers/devices, and all sensitive data must be transmitted securely (HTTPS).

2021 · Paper-II · Q8(c) (6 marks)

Question

What are different security mechanisms used for encrypting the contents of a website? Explain one in detail.

Solution

Common mechanisms: SSL/TLS (HTTPS) for encrypting data in transit between browser and server; password hashing (e.g. bcrypt, SHA-256 with salt) for securely storing user credentials; symmetric encryption (AES) for encrypting stored sensitive data at rest; asymmetric encryption (RSA/ECC) for key exchange and digital signatures/certificates; and Web Application Firewalls combined with strict input validation to block injection-based attacks. Detailed explanation of TLS/SSL (HTTPS): when a browser connects to a web server over HTTPS, a TLS handshake first takes place — the client and server negotiate a cipher suite, the server presents its digital certificate (containing its public key, digitally signed by a trusted Certificate Authority) so the browser can authenticate the server's identity. Using asymmetric cryptography (e.g. RSA or Elliptic-Curve Diffie-Hellman) during this handshake, the two sides securely agree on a shared, temporary SYMMETRIC session key without ever transmitting it in the clear. All subsequent application data (the actual page content, form submissions, cookies) is then encrypted using this session key with a fast symmetric cipher (AES), and integrity-protected with a Message Authentication Code — together providing confidentiality (eavesdroppers cannot read the data), integrity (tampering is detected), and authenticity (the browser knows it is really talking to the genuine server) for every byte exchanged over the connection.

2020 · Paper-I · Q3(b) (8 marks)

Question

Design an appropriate interface for citizen portal mobile application. The interface should contain different features which are part of the portal application. The Interface may contain different screens to support these features.

Solution

Screen flow for a citizen portal mobile app:

  1. Splash/Login screen — CNIC + password or biometric (fingerprint) login, with 'Register' and 'Forgot Password' options.
  2. Home/Dashboard screen — a grid of service icons: Tax Filing, National ID (CNIC) Renewal, Utility Bill Payment, Birth/Death Certificate, Passport Application, Vehicle Registration, Complaint/Grievance Registration, and a search bar for other services.
  3. Service Detail/Form screen — dynamic form fields relevant to the chosen service, with document upload (camera/gallery picker for CNIC copy, photographs, etc.) and a progress indicator for multi-step forms.
  4. Payment Gateway screen — displays fee breakdown and integrates card/mobile-wallet payment, with a confirmation receipt.
  5. Track Application Status screen — a list of the citizen's submitted applications with status badges (Pending/Processing/Approved/Rejected) and a detail view with a timeline.
  6. Notifications screen — push alerts for status changes, deadlines, and new service announcements.
  7. Profile/Settings screen — personal details, linked documents, language selection, and logout.
  8. Help/Support screen — FAQs and a chatbot or helpline contact option. Navigation: a persistent bottom navigation bar with Home, Services, Track Status, and Profile tabs for quick access across the whole app.

2020 · Paper-II · Q8(a) (7 marks)

Question

"Web engineering is more challenging than traditional software engineering". Argue for or against.

Solution

Arguing FOR the statement: Web applications must run correctly across a huge, uncontrolled variety of client environments (browsers, versions, screen sizes, devices), unlike shrink-wrapped desktop software with a known target platform. They face continuous evolution and frequent live updates rather than discrete release cycles. They carry far greater security exposure, being publicly reachable over the open Internet to any attacker worldwide. They demand a wider cross-disciplinary skill set — UI/UX design, content/information architecture, networking, security, and scalability engineering — within a single project. The underlying technology stack (frameworks, browser capabilities, standards) changes rapidly, requiring constant relearning. They must handle unplanned, spiky global-scale traffic and expect near-24/7 availability. And requirements/stakeholders are often less formally defined, with rapid, informal/agile iteration the norm rather than the exception. Taken together, these factors mean web engineering layers additional, web-specific challenges (cross-platform compatibility, security exposure, scale, and constant technology churn) ON TOP OF the core software-engineering discipline traditional software already requires — supporting the argument that it is, in important respects, more challenging.

2020 · Paper-II · Q8(c) (7 marks)

Question

Explain functional and non-functional requirements in the context of a web application development.

Solution

Functional requirements specify WHAT the web application must do — its concrete features and behaviours. Examples for an e-commerce web application: 'a user shall be able to register an account,' 'a user shall be able to search products by category and keyword,' 'the system shall process credit-card payments at checkout,' 'an admin shall be able to add/edit products.' Non-functional requirements specify HOW WELL the application performs these functions — quality attributes and constraints rather than specific behaviours. Examples: 'pages must load within 2 seconds under normal load,' 'the site must support 10,000 concurrent users,' 'the application must achieve 99.9% uptime,' 'the site must work correctly on the latest versions of Chrome, Firefox, and Safari,' 'all sensitive data must be transmitted over HTTPS,' and 'the UI must comply with WCAG accessibility guidelines.' In web application development, non-functional requirements are especially critical because the application is exposed to a large, diverse, uncontrolled public audience where performance, security, and compatibility failures are immediately visible and damaging, even if all functional features work correctly.

2019 · Paper-II · Q7(a) (8 marks)

Question

A Medium advertising company is reviewing its IT requirements and is considering using a Cloud solution for web applications as opposed to investing in existing infrastructure. Is this an appropriate strategy? Justify your answer using an example.

Solution

Yes, adopting a cloud solution is generally an appropriate strategy for a medium-sized advertising company. Reasons: (1) Lower upfront capital expenditure — cloud services are pay-as-you-go (OPEX) instead of buying/maintaining physical servers (CAPEX). (2) Elastic scalability — an advertising company's web traffic is highly variable (spikes during campaign launches), and cloud platforms can auto-scale resources up or down to match demand instantly, something fixed in-house infrastructure cannot do cost-effectively. (3) Reduced maintenance burden — patching, hardware failures, and backups are handled by the provider, freeing the company's small IT staff to focus on core business. (4) Faster time-to-market for new campaign microsites. (5) Built-in redundancy/high availability across data centres. Example: hosting the company's campaign websites on AWS Elastic Beanstalk or Azure App Service, which automatically scales out additional server instances during a viral marketing push and scales back down afterward, so the company pays only for what it actually uses rather than provisioning peak capacity year-round. Caveats to weigh: recurring operational cost over the long run, data security/compliance responsibilities, and potential vendor lock-in — but for a medium company without existing heavy infrastructure investment, cloud is the more strategic choice.

2019 · Paper-II · Q7(c) (6 marks)

Question

Explain the difference between functional and non-functional requirement in the context of web engineering using a suitable example.

Solution

Functional requirements specify WHAT the system must do — the concrete features/behaviours/services it provides. Example for a web application: 'a registered user shall be able to search for products by keyword and add them to a shopping cart.' Non-functional requirements specify HOW WELL the system performs its functions — quality attributes and constraints rather than specific behaviours. Example for the same web application: 'search results must be returned within 2 seconds,' 'the site must support 10,000 concurrent users,' 'the application must be accessible per WCAG 2.1 standards,' and 'the site must maintain 99.9% uptime.' In web engineering, functional requirements drive the design of pages/features/business logic, while non-functional requirements (performance, scalability, security, usability, cross-browser compatibility) are especially critical because a web application is exposed to an unpredictable, diverse public audience over the open Internet — a functionally-correct site that is slow or insecure would still be considered a failure.

2018 · Paper-II · Q8(A) (8 marks)

Question

Elaborate the concept of three tier architecture with reference to presentation, business logic and data access layers.

Solution

Three-tier architecture is a client-server software architecture pattern that separates an application into three distinct, logically independent layers, each with a specific responsibility, communicating only with the adjacent layer:

  1. Presentation Layer (Tier 1): the topmost layer, responsible for the user interface and user interaction - what the end user sees and interacts with in a browser or client application (HTML/CSS/JavaScript for a web app, or a native UI). It sends user requests to the business logic layer and displays the results returned, but contains no core application logic or direct database access itself.

  2. Business Logic Layer (Application/Middle Tier): the middle layer, containing the core functional logic of the application - processing rules, calculations, validations, workflow, and coordination between the presentation and data layers. It receives requests from the presentation layer, applies the necessary business rules, interacts with the data access layer as needed, and returns results back up to the presentation layer.

  3. Data Access Layer (Data Tier): the bottom layer, responsible for storing and retrieving the application's persistent data, typically a database management system, along with the code that directly interacts with it (queries, stored procedures).

Request flow: Presentation Layer <--> Business Logic Layer <--> Data Access Layer.

Benefits: each layer can be developed, tested, scaled, and maintained independently (e.g. the presentation layer can be redesigned without touching business logic; the database can be swapped without changing the UI); it improves security (the presentation layer never talks directly to the database); and it improves scalability (each tier can be deployed on separate, independently-scalable servers).

2018 · Paper-II · Q8(B) (6 marks)

Question

Differentiate between XHTML and XML.

Solution

XML (eXtensible Markup Language): a general-purpose markup language designed for storing, structuring, and transporting arbitrary DATA, not for display/presentation. It has no predefined set of tags - developers define their own custom tags/elements suited to their specific data (e.g. ...). It is primarily used for data interchange between systems (e.g. web services, configuration files, RSS feeds).

XHTML (eXtensible HyperText Markup Language): a reformulation of HTML as a strict XML application - it uses HTML's predefined set of tags (for describing and displaying WEB PAGE content), but must additionally conform to XML's strict, well-formedness syntax rules: all tags must be properly closed (including empty tags like ), tags must be properly nested, attribute values must be quoted, and tag/attribute names must be lowercase.

Key differences:

  • Purpose: XML describes/carries arbitrary DATA (application-defined tags); XHTML describes web PAGE CONTENT/presentation (using HTML's fixed, predefined tag vocabulary).
  • Custom tags: XML allows any user-defined tag names; XHTML is restricted to HTML's standard tag set.
  • Strictness: both require well-formed XML syntax, but plain HTML (unlike XHTML) is much more lenient/forgiving of unclosed tags or improper nesting - XHTML brought that XML-level strictness specifically to HTML web pages.

2017 · Paper-II · Q8(a) (8 marks)

Question

Explain the following web concepts: (i) localStorage and sessionStorage objects (ii) Application cache in HTML5 (iii) Manifest file (iv) Web Worker

Solution

localStorage and sessionStorage: both are HTML5 Web Storage APIs that let a web page store key-value data in the browser, with a larger capacity than cookies and without being sent to the server on every request. localStorage persists data with no expiration date - it remains even after the browser is closed and reopened, and is shared across all tabs/windows of the same origin. sessionStorage stores data only for the duration of the page session - it is cleared when the browser tab/window is closed, and is not shared between different tabs even of the same origin.

Application Cache (AppCache) in HTML5: a (now deprecated) mechanism that let web applications specify resources (HTML, CSS, JS, images) to be cached by the browser so the application could continue working offline or on a slow network, by serving cached resources instead of fetching from the server. It has been superseded by the more flexible Service Worker API in modern browsers.

Manifest file: a plain-text file (cache.manifest) referenced by an HTML page's <html manifest="..."> attribute that lists which resources should be cached (CACHE section), which must always be fetched from the network (NETWORK section), and fallback pages to use when offline (FALLBACK section) - it is the configuration file that drives the Application Cache mechanism.

Web Worker: a browser API that allows JavaScript code to run in a background thread, separate from the page's main UI thread, enabling computationally expensive tasks (data processing, complex calculations) to run without freezing/blocking the user interface. Workers communicate with the main script via message passing (postMessage) and cannot directly access the DOM.

2017 · Paper-II · Q8(b) (6 marks)

Question

What is SVG? What are the advantages of SVG over JPEG or GIF?

Solution

SVG (Scalable Vector Graphics) is an XML-based markup language/image format for describing two-dimensional vector graphics - shapes, paths, text, and their attributes (fill color, stroke, gradients) are defined mathematically (coordinates and formulas) rather than as a fixed grid of pixel values.

Advantages of SVG over JPEG/GIF (which are raster/bitmap formats storing a fixed pixel grid):

  • Scalability without quality loss: since SVG is defined mathematically, it can be resized/zoomed to any dimension without pixelation or blurring, whereas JPEG/GIF become blocky or blurry when enlarged beyond their native resolution.
  • Smaller file size for simple graphics: logos, icons, and diagrams with flat colors/shapes are typically much smaller in SVG than as a raster image, since only the mathematical description is stored, not every pixel.
  • Editable and searchable text: text within an SVG remains selectable/searchable text (not a rasterized image of text), and the XML markup itself can be edited/styled with CSS and manipulated/animated with JavaScript, directly in the DOM.
  • Lossless quality: SVG has no compression-artifact loss (unlike JPEG's lossy compression), rendering crisply at any resolution/screen density (ideal for retina/high-DPI displays).
  • Accessibility and SEO: because SVG content is markup, not opaque pixels, it can be indexed by search engines and read by screen readers.

SVG is best suited to logos, icons, charts, and illustrations, while JPEG remains better for photographs (continuous-tone images) where its lossy compression achieves much smaller files than an equivalent vector description would.

2017 · Paper-II · Q8(c) (6 marks)

Question

Explain Non Breaking space in HTML with example.

Solution

A Non-Breaking Space is a special whitespace character in HTML, written as the entity &nbsp;, that behaves like a normal space visually but prevents the browser from inserting a line break at that point when wrapping text - the words/elements on either side of it are kept together on the same line even if that line becomes too long to fit the container.

Why it's needed: by default, HTML collapses multiple consecutive regular spaces into a single space, and the browser is free to break a line at any regular space when wrapping text. This is undesirable in certain cases where two 'words' must always visually stay together.

Example:

<p>Rs.&nbsp;500</p>
<p>Mr.&nbsp;Ali&nbsp;Khan</p>

Here, 'Rs.' and '500' will never be split across two lines (avoiding an awkward line-break like 'Rs.' at the end of one line and '500' starting the next); similarly, 'Mr.' and 'Ali' stay together.

Additional uses: &nbsp; is also commonly used to insert visible extra/multiple spaces in rendered HTML (since regular consecutive spaces are collapsed by the browser to just one), e.g. <p>Item:&nbsp;&nbsp;&nbsp;Value</p> to force visible padding between the label and value.

2016 · Paper-II · Q8(a) (8 marks)

Question

Explain the principals of requirement engineering of web applications.

Solution

Requirements Engineering (RE) for web applications follows the general RE process, but with additional emphasis due to the web domain's rapid change, heterogeneous stakeholders and short delivery cycles. Key principles:

  1. Stakeholder identification and involvement: web applications typically have very diverse stakeholders (end users of varying technical skill, marketing, content editors, administrators) - all must be consulted since needs differ widely.
  2. Elicitation: gather requirements via interviews, surveys, prototyping, and competitor/market analysis - web requirements often emerge iteratively as users interact with early prototypes.
  3. Analysis and negotiation: resolve conflicts between stakeholders (e.g. marketing wants rich media, performance team wants fast load times) and prioritize features.
  4. Specification: document functional requirements (content, navigation, interactivity, transactions) and, critically, non-functional requirements specific to the web (usability, accessibility, browser/device compatibility, security, scalability under variable/unpredictable load, and performance/response time).
  5. Validation: confirm requirements with stakeholders, often via clickable prototypes/mock-ups rather than only text documents, since visual/interactive feedback is more meaningful for web UIs.
  6. Iteration and change management: because web requirements evolve quickly (new browsers, changing user expectations, competitor features), RE for the web is typically iterative/incremental rather than a single up-front phase, unlike traditional heavyweight RE.

Overall, web RE principles balance the standard software RE discipline against the web's need for speed, visual prototyping, and constant evolvability.

2016 · Paper-II · Q8(b) (6 marks)

Question

Elaborate the term E-Commerce. Discuss in detail about the effects of E-Commerce in Islamic Banking in Pakistan.

Solution

E-Commerce (Electronic Commerce) refers to the buying and selling of goods, services, or information, and the transfer of funds, conducted over electronic networks, primarily the Internet - including online retail (B2C), business-to-business trading (B2B), online banking, and mobile commerce.

Effects of E-Commerce on Islamic Banking in Pakistan:

  • Wider reach and financial inclusion: online/mobile banking platforms let Islamic banks reach customers in remote areas without needing a physical branch, growing their customer base while adhering to Shariah principles.
  • Convenience and efficiency: customers can perform Shariah-compliant transactions (e.g. Murabaha financing applications, Islamic fund transfers, bill payments) online, reducing paperwork and branch visits.
  • New Shariah-compliant e-commerce products: growth of e-commerce created demand for online payment gateways and digital wallets structured to avoid Riba (interest) and Gharar (excessive uncertainty), pushing Islamic banks to innovate compliant digital payment/financing instruments (e.g. Islamic e-wallets, Shariah-compliant online instalment/Ijarah products).
  • Increased competition and transparency: e-commerce growth increased competition between conventional and Islamic banks for digital customers, pushing Islamic banks to modernize their technology infrastructure.
  • Challenges: ensuring all digital transaction structures remain genuinely Shariah-compliant (avoiding interest-based penalty charges, ensuring proper risk-sharing) while competing with the speed and convenience of conventional e-commerce/fintech, and building customer trust/security in online Islamic financial services.

2016 · Paper-II · Q8(c) (6 marks)

Question

What are the components of Generic web application architecture?

Solution

A generic web application architecture is typically organized into layers/tiers:

  1. Client/Presentation Layer: runs in the user's web browser (or mobile app); consists of HTML, CSS, and client-side JavaScript that renders the user interface and handles basic interactivity/validation.

  2. Web Server: receives HTTP requests from clients and either serves static content directly or forwards dynamic requests to the application server.

  3. Application/Business Logic Layer: contains the server-side code (e.g. PHP, Java/Servlets, Node.js, Python) that implements the application's core functionality - processing requests, enforcing business rules, session management, and coordinating with the database.

  4. Data Access Layer: mediates between the business logic and the database, translating application objects into queries and results back into objects (often via an ORM).

  5. Database/Data Layer: the persistent storage system (relational DBMS like MySQL/PostgreSQL, or NoSQL store) holding the application's data.

  6. Supporting components: caching layer (for performance), authentication/authorization module (security), load balancer (for scalability across multiple servers), and external APIs/third-party service integrations.

Request flow: Browser (Client) --HTTP--> Web/Application Server --queries--> Database --results--> Application Server --HTML/JSON response--> Browser. This layered separation (presentation / business logic / data) improves maintainability, scalability, and allows each layer to be developed, scaled, and secured independently.

Part B — MCQs

2025 · Paper-II · Q15 (MCQ)

What is DOM?

  • A. Hierarchy of objects in ASP.NET
  • B. Application programming interface
  • C. Convention for representing and interacting with objects in html documents
  • D. Language dependent application programming

Answer: C

Explanation: The Document Object Model (DOM) is a platform- and language-neutral convention/API for representing and interacting with objects (elements) in HTML and XML documents as a tree structure.

2025 · Paper-II · Q16 (MCQ)

Which error is invoked when SQLTransaction Callback does not execute?

  • A. INVALID_ACCESS_ERR
  • B. UNKNOWN_ERR
  • C. TIMEOUT_ERR
  • D. INVALID_STATE_ERR

Answer: D

Explanation: In the (now-deprecated) Web SQL Database API, operations attempted on a transaction object outside its valid callback execution window raise an INVALID_STATE_ERR, since the transaction object is not in a state where the operation is permitted.

2025 · Paper-II · Q17 (MCQ)

Which of the following property defines labels for a list of items?

  • A. List-shape
  • B. List-style
  • C. List-type
  • D. List-style-type

Answer: D

Explanation: The CSS property list-style-type specifically controls the marker/label style (disc, decimal, roman numerals, etc.) used for items in a list.

2024 · Paper-II · Q18 (MCQ)

Which of the following statement/s are true about PHP?

  • A. Echo and print are same
  • B. Echo takes a single parameter
  • C. Both (A) & (B)
  • D. None of these

Answer: D

Explanation: Echo and print differ (echo can output multiple comma-separated arguments and has no return value, while print accepts only a single argument and returns 1), so statement A is false, and since echo can take multiple parameters, statement B is also false, making 'None of these' correct.

2024 · Paper-II · Q20 (MCQ)

Php allows dynamic code execution using:

  • A. Eval()
  • B. Reflection API
  • C. File Manipulation
  • D. None of these

Answer: A

Explanation: PHP's eval() function executes a string as PHP code at runtime, which is the standard mechanism for dynamic code execution in PHP.