BSc CSIT (TU) Science Web Technology (BSc CSIT, CSC318) Question Paper 2074 Nepal

XML (eXtensible Markup Language)

XML is a text-based, platform-independent markup language used to store and transport data in a structured, self-describing format. Unlike HTML (which describes presentation), XML describes what data is. Its tags are not predefined — the author defines custom tags. XML documents must be well-formed (one root element, properly nested and closed tags, case-sensitive) and may optionally be valid (conform to a DTD or schema).

Key features:

• Separates data from presentation
• Self-describing and human-readable
• Hierarchical (tree) structure
• Used in configuration files, web services (SOAP), RSS, etc.

XML Document — Weather Report

<?xml version="1.0" encoding="UTF-8"?>
<weatherReport city="Kathmandu" date="2017-06-15">
  <temperature unit="Celsius">28</temperature>
  <humidity>65</humidity>
  <windSpeed unit="kmph">12</windSpeed>
  <condition>Partly Cloudy</condition>
  <forecast day="tomorrow">Light Rain</forecast>
</weatherReport>

Here city and date are attributes of the root element, while temperature, humidity, windSpeed, condition and forecast are child elements. unit and day are attributes of their respective elements.

Equivalent DTD

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE weatherReport [
  <!ELEMENT weatherReport (temperature, humidity, windSpeed, condition, forecast)>
  <!ATTLIST weatherReport
      city CDATA #REQUIRED
      date CDATA #REQUIRED>

  <!ELEMENT temperature (#PCDATA)>
  <!ATTLIST temperature unit CDATA #REQUIRED>

  <!ELEMENT humidity (#PCDATA)>

  <!ELEMENT windSpeed (#PCDATA)>
  <!ATTLIST windSpeed unit CDATA #REQUIRED>

  <!ELEMENT condition (#PCDATA)>

  <!ELEMENT forecast (#PCDATA)>
  <!ATTLIST forecast day CDATA #REQUIRED>
]>

Explanation of DTD syntax: <!ELEMENT> declares an element and its content model — (#PCDATA) means parsed character data (text), while a list of child names defines the allowed sub-elements and order. <!ATTLIST> declares attributes; CDATA is a string type and #REQUIRED makes the attribute mandatory.

PHP Form Handling

PHP processes HTML forms through two superglobal arrays:

• $_GET — data appended to the URL query string (method="get"); visible, limited length, used for non-sensitive data.
• $_POST — data sent in the HTTP request body (method="post"); hidden from URL, larger capacity, used for sensitive data and database insertion.

The form's action attribute names the PHP script that receives the data, and each input is read by its name attribute (e.g. $_POST['name']). User input should always be sanitized (e.g. mysqli_real_escape_string, htmlspecialchars) to prevent SQL injection and XSS.

Connecting PHP to MySQL

PHP connects using the MySQLi (or PDO) extension. Steps:

1. Connect: mysqli_connect(host, user, password, database)
2. Build and execute a query with mysqli_query()
3. Process results / handle errors
4. Close the connection with mysqli_close()

PHP Script — Insert and Retrieve Student Records

HTML form (index.html):

<form action="student.php" method="post">
  Roll: <input type="text" name="roll"><br>
  Name: <input type="text" name="name"><br>
  Marks: <input type="text" name="marks"><br>
  <input type="submit" name="submit" value="Add Student">
</form>

student.php:

<?php
// 1. Connect to MySQL
$con = mysqli_connect("localhost", "root", "", "college");
if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

// 2. INSERT record when form is submitted
if (isset($_POST['submit'])) {
    $roll  = mysqli_real_escape_string($con, $_POST['roll']);
    $name  = mysqli_real_escape_string($con, $_POST['name']);
    $marks = mysqli_real_escape_string($con, $_POST['marks']);

    $sql = "INSERT INTO students (roll, name, marks)
            VALUES ('$roll', '$name', '$marks')";
    if (mysqli_query($con, $sql)) {
        echo "Record inserted successfully.<br>";
    } else {
        echo "Error: " . mysqli_error($con);
    }
}

// 3. RETRIEVE and display all records
$result = mysqli_query($con, "SELECT * FROM students");
echo "<table border='1'><tr><th>Roll</th><th>Name</th><th>Marks</th></tr>";
while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr><td>{$row['roll']}</td><td>{$row['name']}</td>
          <td>{$row['marks']}</td></tr>";
}
echo "</table>";

mysqli_close($con);
?>

Table assumed:

CREATE TABLE students (
  roll INT PRIMARY KEY,
  name VARCHAR(50),
  marks INT
);

This script connects to the database, inserts a new student on form submission, and then retrieves and displays every record in an HTML table.

Client-Side Form Validation

Client-side validation is the process of checking user input in the browser using JavaScript before the form is submitted to the server. It improves user experience by giving instant feedback, reduces unnecessary server round-trips, and lessens server load. It is triggered typically on the form's onsubmit event or input events.

Note: Client-side validation is for convenience only and can be bypassed (e.g. disabling JS), so it must always be backed by server-side validation for security.

Common checks: empty/required fields, minimum length, format (using regular expressions for email/password), and ensuring a checkbox is ticked.

HTML Form with JavaScript Validation

<!DOCTYPE html>
<html>
<head>
<title>Login Validation</title>
<script>
function validateForm() {
  var user = document.forms["loginForm"]["username"].value;
  var pass = document.forms["loginForm"]["password"].value;
  var agree = document.forms["loginForm"]["terms"].checked;

  // 1. Username: non-empty, at least 4 characters
  if (user.trim() === "") {
    alert("Username is required.");
    return false;
  }
  if (user.length < 4) {
    alert("Username must be at least 4 characters.");
    return false;
  }

  // 2. Password: at least 6 characters
  if (pass.length < 6) {
    alert("Password must be at least 6 characters.");
    return false;
  }

  // 3. Checkbox must be checked
  if (!agree) {
    alert("You must agree to the terms before submitting.");
    return false;
  }

  return true; // all valid -> allow submission
}
</script>
</head>
<body>
  <form name="loginForm" action="submit.php" method="post"
        onsubmit="return validateForm()">
    Username: <input type="text" name="username"><br><br>
    Password: <input type="password" name="password"><br><br>
    <input type="checkbox" name="terms"> I agree to the terms<br><br>
    <input type="submit" value="Login">
  </form>
</body>
</html>

How it works: The onsubmit="return validateForm()" handler runs validateForm(); if it returns false the submission is cancelled and an alert tells the user the problem, otherwise it returns true and the form is sent to the server.

Internet vs World Wide Web

In short, the Internet is the infrastructure, while the Web is one application that uses that infrastructure.

Client-Server Architecture of the Web

The web works on a request–response client-server model:

1. Client (browser) — sends an HTTP request for a resource (e.g. an URL typed by the user).
2. Server (web server) — receives the request, locates/generates the resource, and sends back an HTTP response (HTML, CSS, images, JSON, etc.).
3. The browser renders the received content for the user.

Key points: the protocol is HTTP/HTTPS, communication is stateless (each request is independent; state is maintained via cookies/sessions), and a single server can serve many clients concurrently. Example: typing www.example.com → DNS resolves it to an IP → browser sends GET / → server returns the home page.

HTML Tables

Tables display data in rows and columns. Key tags:

• <table> — container; <tr> — table row; <th> — header cell (bold/centered); <td> — data cell.
• Attributes: border, colspan, rowspan, cellpadding, cellspacing.

<table border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Ram</td><td>85</td></tr>
  <tr><td>Sita</td><td>90</td></tr>
</table>

HTML Forms

A form collects user input and sends it to a server. The <form> tag has action (target script) and method (get/post).

Common form elements:

• <input type="text"> — single-line text
• <input type="password"> — masked text
• <input type="radio"> — choose one of many
• <input type="checkbox"> — choose multiple
• <select>/<option> — drop-down list
• <textarea> — multi-line text
• <input type="submit"> — submit button

<form action="register.php" method="post">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="pwd"><br>
  Gender: <input type="radio" name="g" value="M">Male
          <input type="radio" name="g" value="F">Female<br>
  Hobbies: <input type="checkbox" name="h" value="music">Music<br>
  Country:
  <select name="country">
    <option>Nepal</option><option>India</option>
  </select><br>
  <textarea name="address"></textarea><br>
  <input type="submit" value="Register">
</form>

CSS Selectors

A CSS selector is a pattern used to select the HTML element(s) to which a style rule applies. The main types are:

1. Universal selector (*) — selects every element.

* { margin: 0; padding: 0; }

2. Element (type) selector — selects all elements of a given tag.

p { color: blue; }

3. Class selector (.) — selects all elements with a given class attribute (reusable).

.note { background: yellow; }   /* <p class="note"> */

4. ID selector (#) — selects the single element with a given id (unique per page).

#header { height: 80px; }        /* <div id="header"> */

5. Group selector (,) — applies the same style to multiple selectors.

h1, h2, p { font-family: Arial; }

6. Descendant selector (space) — selects elements nested inside another.

div p { color: green; }          /* <p> inside <div> */

7. Attribute selector — selects by attribute/value.

input[type="text"] { border: 1px solid gray; }

8. Pseudo-class selector (:) — selects elements in a special state.

a:hover { color: red; }

Specificity order (low → high): element < class/attribute/pseudo-class < ID < inline style.

JavaScript Data Types, Operators and Control Structures

1. Data Types

JavaScript is dynamically typed (a variable's type is decided at runtime).

Primitive types: Number (5, 3.14), String ("hi"), Boolean (true/false), Undefined, Null, and Symbol/BigInt (ES6+). Non-primitive (reference): Object, Array, Function.

var age = 25;          // Number
var name = "Ram";      // String
var isPass = true;     // Boolean
var marks = [80, 90];  // Array (object)

2. Operators

• Arithmetic: + - * / % ++ --
• Assignment: = += -= *= /=
• Comparison: == === != !== > < >= <= (=== checks value and type)
• Logical: && || !
• Ternary: condition ? a : b

var x = 10, y = 3;
console.log(x % y);        // 1
console.log(x > y && y > 0); // true

3. Control Structures

Conditional:

if (marks >= 40) {
  console.log("Pass");
} else {
  console.log("Fail");
}

Switch:

switch (grade) {
  case 'A': console.log("Excellent"); break;
  default:  console.log("Average");
}

Loops:

for (var i = 1; i <= 5; i++) { console.log(i); }   // for
while (i < 10) { i++; }                            // while

These let a program make decisions and repeat actions, controlling the flow of execution.

Document Object Model (DOM)

The DOM is a programming interface that represents an HTML/XML document as a tree of objects (nodes). The browser parses the page and builds this tree where the document is the root and each element, attribute and text becomes a node. The DOM lets scripts access and dynamically change a page's content, structure and style after it has loaded.

document
 └── html
      ├── head
      └── body
           ├── h1
           └── p

Manipulating the DOM with JavaScript

1. Selecting elements:

var h = document.getElementById("title");
var items = document.getElementsByClassName("item");
var p = document.querySelector("p");

2. Changing content / attributes / style:

h.innerHTML = "New Heading";          // change text/HTML
h.setAttribute("class", "big");        // change attribute
h.style.color = "red";                 // change style

3. Creating / removing nodes:

var li = document.createElement("li");
li.innerHTML = "New item";
document.getElementById("list").appendChild(li);

4. Handling events:

document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});

Through these methods JavaScript reads and modifies the DOM, enabling interactive, dynamic web pages.

XSLT (eXtensible Stylesheet Language Transformations)

XSLT is a language used to transform an XML document into another format — such as HTML, plain text, or a different XML structure. It is part of XSL and works with XPath to navigate and select parts of the source XML. The transformation is performed by an XSLT processor, which reads an XML document and an XSLT stylesheet and produces the output document.

Key features:

• Uses template rules (<xsl:template match="...">) that match nodes
• Uses XPath expressions to select data (<xsl:value-of select="...">)
• Supports looping (<xsl:for-each>) and conditions (<xsl:if>, <xsl:choose>)

Example

Source XML (students.xml):

<students>
  <student><name>Ram</name><marks>85</marks></student>
  <student><name>Sita</name><marks>90</marks></student>
</students>

XSLT stylesheet (students.xsl):

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html><body>
      <h2>Student List</h2>
      <table border="1">
        <tr><th>Name</th><th>Marks</th></tr>
        <xsl:for-each select="students/student">
          <tr>
            <td><xsl:value-of select="name"/></td>
            <td><xsl:value-of select="marks"/></td>
          </tr>
        </xsl:for-each>
      </table>
    </body></html>
  </xsl:template>
</xsl:stylesheet>

The processor applies the template to the XML root, loops over each <student> and outputs an HTML table — converting structured data into a presentable web page.

Arrays in PHP

A PHP array is a special variable that holds multiple values in a single variable, each accessed by a key. PHP arrays are ordered maps. There are three types:

1. Indexed (Numeric) Array

Elements are accessed by a numeric index starting from 0.

$fruits = array("Apple", "Banana", "Mango");
echo $fruits[1];        // Banana

2. Associative Array

Elements use named (string) keys instead of numeric indexes.

$marks = array("Ram" => 85, "Sita" => 90);
echo $marks["Sita"];    // 90

3. Multidimensional Array

An array containing one or more arrays (a table-like structure).

$students = array(
  array("Ram", 85),
  array("Sita", 90)
);
echo $students[1][0];   // Sita
echo $students[1][1];   // 90

Differences

Arrays can be traversed with foreach:

foreach ($marks as $name => $score) {
  echo "$name: $score ";
}

User-Defined Functions in PHP

A user-defined function is a reusable block of code written by the programmer that performs a specific task. It is declared with the function keyword, may take parameters, and may return a value. Functions promote code reuse and modularity.

function add($a, $b) {
  return $a + $b;
}
echo add(5, 3);   // 8

Passing Arguments by Value

By default, PHP passes arguments by value — a copy of the variable is sent, so changes inside the function do not affect the original variable.

function increment($n) {
  $n = $n + 1;
}
$x = 10;
increment($x);
echo $x;   // 10 (unchanged)

Passing Arguments by Reference

Prefixing the parameter with & passes the variable by reference — the function works on the original variable, so changes persist outside.

function increment(&$n) {
  $n = $n + 1;
}
$x = 10;
increment($x);
echo $x;   // 11 (changed)

Difference: By value protects the caller's data (safe, copy made); by reference lets the function modify the caller's variable directly (efficient for large data, but mutates the original).

Structure of a URL

A URL (Uniform Resource Locator) is the address used to locate a resource on the web. General form:

scheme://host:port/path?query#fragment

Example: https://www.example.com:443/products/item.php?id=10#reviews

Role of DNS

Computers communicate using IP addresses (e.g. 93.184.216.34), but humans use domain names (e.g. www.example.com). The Domain Name System (DNS) is a distributed hierarchical database that translates (resolves) domain names into IP addresses.

Resolution steps:

1. Browser checks its cache; if not found, queries a DNS resolver (usually the ISP).
2. The resolver queries the root server, which directs it to the TLD server (e.g. .com).
3. The TLD server points to the domain's authoritative name server, which returns the IP address.
4. The browser then opens an HTTP connection to that IP to fetch the page.

Thus DNS acts as the "phonebook of the Internet," letting users use memorable names instead of numeric IPs.