CSC329 · TU past paper

Web Technology 2080 question paper

The complete TU 2080 exam paper for Web Technology (CSC329), all 12 questions with solved model answers written to the mark scheme.

Past Papers2082 2081 2080 2079 2078 2076

Tap a question to open its answer.

110 marksEvent Handling and Form ValidationHideAnswer
Write HTML script to create HTML form as below and perform form validation using JavaScript. The validation should be as; the username should be of length at least 4 and is required. The password should start with a character and end with # and is required. The country and gender should be checked.[10]
Create an HTML form with: - Username: required, minimum length 4 - Password: required, must start with a character (a-z/A-Z) and end with - Country: must be selected (dropdown) - Gender: must be selected (radio button) --- --- Field Vali...
210 marksSyntax Rules for creating XML documentHideAnswer
How XML is different from HTML? Write XML script to create XML document containing element Person having sub elements Age, Name and Pincode. Write equivalent XSD for validating restrictions on the elements as the Age should be between 10 and 20, the Name should be only accepting either Ram or Shyam and the pincode should be 3 digit.[10]
Feature XML HTML --------- Purpose Designed to store and transport data Designed to display data Tag Definition Tags are user-defined (custom tags) Tags are predefined and fixed Case Sensitivity Tags are case-sensitive (<Name and <name a...

310 marksWorking with PHP and MySQLAnswer

Write a server side script in PHP to illustrate inserting and selecting values to and from database table. Create required connection using your own assumptions.[10]

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

Server: localhost
Username: root
Password: `` (empty)
Database: webTech
Table: students with columns id, name, email, phone

Complete PHP Script

<?php

// Step 1: Database Connection
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "webTech";

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Step 2: Check Connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully  ";

// Step 3: Create Table (if not exists)
$createTable = "CREATE TABLE IF NOT EXISTS students (
    id     INT(6) AUTO_INCREMENT PRIMARY KEY,
    name   VARCHAR(50)  NOT NULL,
    email  VARCHAR(50)  NOT NULL,
    phone  VARCHAR(15)  NOT NULL
)";

if (mysqli_query($conn, $createTable)) {
    echo "Table ready.  ";
} else {
    echo "Error creating table: " . mysqli_error($conn) . " ";
}

// Step 4: INSERT values into the table
$name  = "Ram Sharma";
$email = "[email protected]";
$phone = "9841000000";

$insertSQL = "INSERT INTO students (name, email, phone)
              VALUES ('$name', '$email', '$phone')";

if (mysqli_query($conn, $insertSQL)) {
    echo "Record inserted successfully.  ";
} else {
    echo "Error inserting record: " . mysqli_error($conn) . " ";
}

// Step 5: SELECT values from the table
$selectSQL = "SELECT * FROM students";
$result    = mysqli_query($conn, $selectSQL);

// Step 6: Display the results
if (mysqli_num_rows($result) > 0) {
    echo " <strong>Records from students table:</strong> ";
    echo "<table border='1' cellpadding='5'>";
    echo "<tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>";

    // Fetch each row and display
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<tr>";
        echo "<td>" . $row["id"]    . "</td>";
        echo "<td>" . $row["name"]  . "</td>";
        echo "<td>" . $row["email"] . "</td>";
        echo "<td>" . $row["phone"] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
} else {
    echo "No records found.";
}

// Step 7: Close Connection
mysqli_close($conn);

?>

Step-by-Step Explanation

Step	Description
1	Set server credentials (`localhost`, `root`, empty password, `webTech` DB)
2	Use `mysqli_connect()` to create connection; check with `if(!$conn)`
3	Create `students` table if it does not already exist
4	Write INSERT SQL query and execute using `mysqli_query()`
5	Write SELECT SQL query (`SELECT * FROM students`) and execute
6	Use `mysqli_num_rows()` to check if rows exist; loop with `mysqli_fetch_assoc()` to display each row
7	Close connection using `mysqli_close()`

Expected Output

Connected successfully
Table ready.
Record inserted successfully.

Records from students table:
+----+------------+-----------------+------------+
| ID | Name       | Email           | Phone      |
+----+------------+-----------------+------------+
|  1 | Ram Sharma | [email protected] | 9841000000 |
+----+------------+-----------------+------------+

Note: The procedural approach uses mysqli_connect() for connection and mysqli_query() for executing SQL statements. The die() function stops execution if the connection fails, so no else block is needed after it.

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

Server: localhost
Username: root
Password: `` (empty)
Database: webTech
Table: students with columns id, name, email, phone

Complete PHP Script

<?php

// Step 1: Database Connection
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "webTech";

$conn = mysqli_connect($servername, $username, $password, $dbname);

// Step 2: Check Connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully  ";

// Step 3: Create Table (if not exists)
$createTable = "CREATE TABLE IF NOT EXISTS students (
    id     INT(6) AUTO_INCREMENT PRIMARY KEY,
    name   VARCHAR(50)  NOT NULL,
    email  VARCHAR(50)  NOT NULL,
    phone  VARCHAR(15)  NOT NULL
)";

if (mysqli_query($conn, $createTable)) {
    echo "Table ready.  ";
} else {
    echo "Error creating table: " . mysqli_error($conn) . " ";
}

// Step 4: INSERT values into the table
$name  = "Ram Sharma";
$email = "[email protected]";
$phone = "9841000000";

$insertSQL = "INSERT INTO students (name, email, phone)
              VALUES ('$name', '$email', '$phone')";

if (mysqli_query($conn, $insertSQL)) {
    echo "Record inserted successfully.  ";
} else {
    echo "Error inserting record: " . mysqli_error($conn) . " ";
}

// Step 5: SELECT values from the table
$selectSQL = "SELECT * FROM students";
$result    = mysqli_query($conn, $selectSQL);

// Step 6: Display the results
if (mysqli_num_rows($result) > 0) {
    echo " <strong>Records from students table:</strong> ";
    echo "<table border='1' cellpadding='5'>";
    echo "<tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>";

    // Fetch each row and display
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<tr>";
        echo "<td>" . $row["id"]    . "</td>";
        echo "<td>" . $row["name"]  . "</td>";
        echo "<td>" . $row["email"] . "</td>";
        echo "<td>" . $row["phone"] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
} else {
    echo "No records found.";
}

// Step 7: Close Connection
mysqli_close($conn);

?>

Step-by-Step Explanation

Step	Description
1	Set server credentials (`localhost`, `root`, empty password, `webTech` DB)
2	Use `mysqli_connect()` to create connection; check with `if(!$conn)`
3	Create `students` table if it does not already exist
4	Write INSERT SQL query and execute using `mysqli_query()`
5	Write SELECT SQL query (`SELECT * FROM students`) and execute
6	Use `mysqli_num_rows()` to check if rows exist; loop with `mysqli_fetch_assoc()` to display each row
7	Close connection using `mysqli_close()`

Expected Output

Connected successfully
Table ready.
Record inserted successfully.

Records from students table:
+----+------------+-----------------+------------+
| ID | Name       | Email           | Phone      |
+----+------------+-----------------+------------+
|  1 | Ram Sharma | [email protected] | 9841000000 |
+----+------------+-----------------+------------+

Note: The procedural approach uses mysqli_connect() for connection and mysqli_query() for executing SQL statements. The die() function stops execution if the connection fails, so no else block is needed after it.

45 marksHTML EventsHideAnswer
What are HTML keyboard events? Write a script to display a message 'Hello world' on keypress event. [5]
Keyboard events are events that are triggered when a user interacts with the keyboard. The three keyboard event attributes are: Attribute Description ------------------------ onkeydown Fires/runs when a user is pressing a key (key held d...
55 marksBuilt-in ObjectsHideAnswer
How HTML elements are accessed using getElementById and getElementByTagName, illustrate using HTML script. [5]
JavaScript provides built-in DOM (Document Object Model) methods to access and manipulate HTML elements: Method Description ------ getElementById("id") Accesses a single element by its unique id attribute getElementsByTagName("tag") Acce...
65 marksPositioningHideAnswer
How can you define position property for specifying specific positioning of an HTML element? Write internal CSS to illustrate position of an HTML div. [5]
The position property in CSS specifies the type of positioning method used for an HTML element. There are five different position values: Value Description -------------------- static Default value; positioned according to the normal flo...

75 marksEvents and EffectsAnswer

What is chaining in jQuery? Write a script to illustrate concept of chaining using slideUp and slideDown method. [5]

Chaining in jQuery

Definition

Chaining allows us to run multiple jQuery commands, one after another, on the same element(s) in a single statement. To chain an action, we simply append the action to the previous action using the dot (.) operator. This makes the code shorter, cleaner, and more efficient because jQuery does not need to find the same element multiple times.

General Syntax:

$(selector).method1().method2().method3();

Script Illustrating Chaining using `slideUp()` and `slideDown()`

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h2>jQuery Chaining Demo</h2>

    <div id="myDiv">This is a div element.</div>
     
    <button id="btn">Click to Chain Effects</button>

    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#myDiv")
                    .css("color", "red")
                    .slideUp(1000)
                    .slideDown(1000);
            });
        });
    </script>

</body>
</html>

Explanation of the Script

Step	Code	Description
1	`.css("color", "red")`	Changes the text color of `#myDiv` to red
2	`.slideUp(1000)`	Slides the `#myDiv` element up (hides it) over 1000 milliseconds
3	`.slideDown(1000)`	Slides the `#myDiv` element down (shows it) over 1000 milliseconds

All three methods are chained together on the same element (#myDiv) in a single statement. jQuery executes them one after another in sequence.

Key Benefit

Without chaining, the same code would require three separate lines each finding #myDiv:

// Without chaining (less efficient)
$("#myDiv").css("color", "red");
$("#myDiv").slideUp(1000);
$("#myDiv").slideDown(1000);

With chaining, it is written in one clean statement, which is more readable and performs better.

Chaining in jQuery

Definition

General Syntax:

$(selector).method1().method2().method3();

Script Illustrating Chaining using `slideUp()` and `slideDown()`

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Chaining Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #myDiv {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h2>jQuery Chaining Demo</h2>

    <div id="myDiv">This is a div element.</div>
     
    <button id="btn">Click to Chain Effects</button>

    <script>
        $(document).ready(function() {
            $("#btn").click(function() {
                $("#myDiv")
                    .css("color", "red")
                    .slideUp(1000)
                    .slideDown(1000);
            });
        });
    </script>

</body>
</html>

Explanation of the Script

Step	Code	Description
1	`.css("color", "red")`	Changes the text color of `#myDiv` to red
2	`.slideUp(1000)`	Slides the `#myDiv` element up (hides it) over 1000 milliseconds
3	`.slideDown(1000)`	Slides the `#myDiv` element down (shows it) over 1000 milliseconds

All three methods are chained together on the same element (#myDiv) in a single statement. jQuery executes them one after another in sequence.

Key Benefit

Without chaining, the same code would require three separate lines each finding #myDiv:

// Without chaining (less efficient)
$("#myDiv").css("color", "red");
$("#myDiv").slideUp(1000);
$("#myDiv").slideDown(1000);

With chaining, it is written in one clean statement, which is more readable and performs better.

85 marksIntroduction to XML and its ApplicationHideAnswer
What is XML? Why is it called extensible? Mention the use of XML. [5]
--- XML (eXtensible Markup Language) is a markup language designed to store, transport, and describe data in a structured, human-readable, and machine-readable format. It was developed by the W3C (World Wide Web Consortium) and became a ...

95 marksBasics of AJAXAnswer

What is XMLHttpRequest object? Write HTML script with AJAX showing the use of XMLHttpRequest object. [5]

XMLHttpRequest Object and AJAX

XMLHttpRequest Object

The XMLHttpRequest (XHR) object is a built-in browser object that is used to exchange data with a web server in the background. It is the core component of AJAX technology. Using the XMLHttpRequest object, a web page can request data from a server and update only a portion of the page without reloading the entire page.

Syntax to create an XMLHttpRequest object:

var xhr = new XMLHttpRequest();

Key Methods of XMLHttpRequest Object

Method	Description
`open(method, url, async)`	Specifies the type of request (GET/POST), the server URL, and whether the request is asynchronous (true) or synchronous (false)
`send()`	Sends the request to the server (used for GET)
`send(string)`	Sends the request to the server (used for POST)

Key Properties of XMLHttpRequest Object

Property	Description
`responseText`	Returns the server response as a JavaScript string
`responseXML`	Returns the server response as an XML DOM object
`onreadystatechange`	Defines a function to be called when the readyState changes
`readyState`	Holds the status of the request (0 to 4)
`status`	Returns the HTTP status code (e.g., 200 for OK)

HTML Script with AJAX Using XMLHttpRequest Object

<!DOCTYPE html>
<html>
<head>
    <title>AJAX XMLHttpRequest Example</title>
    <script>
        function loadData() {
            // Step 1: Create XMLHttpRequest object
            var xhr = new XMLHttpRequest();

            // Step 2: Define what happens when response is received
            xhr.onreadystatechange = function() {
                // readyState 4 means request is done
                // status 200 means response is OK
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Step 5: Update the page with the server response
                    document.getElementById("result").innerHTML = xhr.responseText;
                }
            };

            // Step 3: Open the request (GET method, async = true)
            xhr.open("GET", "ajax_info.txt", true);

            // Step 4: Send the request to the server
            xhr.send();
        }
    </script>
</head>
<body>
    <h2>AJAX Demo Using XMLHttpRequest</h2>

    <button onclick="loadData()">Click to Load Data</button>

      

    <!-- This div will be updated without page reload -->
    <div id="result">
        <p>Data will appear here without reloading the page.</p>
    </div>

</body>
</html>

How This Script Works (AJAX Working Steps)

The user clicks the "Click to Load Data" button, which triggers the loadData() function.
A new XMLHttpRequest object (xhr) is created.
The open() method specifies a GET request to ajax_info.txt with async = true (asynchronous).
The send() method sends the request to the web server.
When the server responds (readyState == 4 and status == 200), the onreadystatechange function is called.
The response text from the server is displayed inside the <div id="result"> element without reloading the page.

Note: The file ajax_info.txt is a simple text file stored on the server that contains the data to be fetched and displayed.

105 marksFunctionsHideAnswer
Write a PHP program that includes a function that will take two strings as input argument and print concatenation of two strings. [5]
A user-defined function declaration starts with the word function. Arguments are specified after the function name, inside the parentheses, and as many arguments as needed can be added, separated by commas. --- --- --- Step Description -...
115 marksCookies and SessionsHideAnswer
How can you handle session in PHP? [5]
A session is a way to store information (in variables) to be used across multiple pages. Unlike cookies, session data is stored on the server side. Each user gets a unique session ID which is used to identify them across requests. --- Be...
125 marksWeb BasicsHideAnswer
Describe the WWW, web client and web server. [5]
--- The World Wide Web (WWW) is an information system that operates over the Internet, allowing users to access and share documents, images, videos, and other resources through web browsers. Key points: - It is based on the Client-Server...

Keep going

Important questions + predictions

Full syllabus Flashcards and practice

Other papers

2082 paper 2081 paper 2079 paper 2078 paper 2076 paper

Web Technology 2080 question paper

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

Complete PHP Script

Step-by-Step Explanation

Expected Output

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

Complete PHP Script

Step-by-Step Explanation

Expected Output

Chaining in jQuery

Definition

Script Illustrating Chaining using slideUp() and slideDown()

Explanation of the Script

Key Benefit

Chaining in jQuery

Definition

Script Illustrating Chaining using slideUp() and slideDown()

Explanation of the Script

Key Benefit

XMLHttpRequest Object and AJAX

XMLHttpRequest Object

Key Methods of XMLHttpRequest Object

Key Properties of XMLHttpRequest Object

HTML Script with AJAX Using XMLHttpRequest Object

How This Script Works (AJAX Working Steps)

PHP Server-Side Script: Inserting and Selecting Values from Database

Assumptions

Complete PHP Script

Step-by-Step Explanation

Expected Output

Chaining in jQuery

Definition

Script Illustrating Chaining using slideUp() and slideDown()

Explanation of the Script

Key Benefit

Script Illustrating Chaining using `slideUp()` and `slideDown()`

Script Illustrating Chaining using `slideUp()` and `slideDown()`

Script Illustrating Chaining using `slideUp()` and `slideDown()`