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

DTD vs XSD

Summary: DTD is simpler and older but lacks data-type and namespace support, whereas XSD is more powerful, type-aware and itself written in XML.

XSD for a list of books

<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xs:element name="bookstore">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="book" maxOccurs="unbounded" minOccurs="1">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="title"  type="xs:string"/>
              <xs:element name="author" type="xs:string"/>
              <xs:element name="year"   type="xs:gYear"/>
              <xs:element name="price"  type="xs:decimal"/>
            </xs:sequence>
            <xs:attribute name="isbn" type="xs:string" use="required"/>
            <xs:attribute name="category" type="xs:string"/>
          </xs:complexType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

A matching XML instance:

<bookstore>
  <book isbn="978-0131103627" category="programming">
    <title>The C Programming Language</title>
    <author>Kernighan and Ritchie</author>
    <year>1988</year>
    <price>45.50</price>
  </book>
</bookstore>

Cookies and Sessions in PHP

Cookies are small pieces of data stored on the client (browser) and sent back to the server with every request. In PHP they are set with setcookie(name, value, expiry, path) and read from the $_COOKIE superglobal. They persist on the client (subject to an expiry time) and are useful for remembering small, non-sensitive preferences.

Sessions store data on the server; the client only holds a small session ID (usually in a cookie named PHPSESSID). A session is started with session_start() and data is read/written through the $_SESSION superglobal. Sessions are more secure for sensitive data (e.g. login state) because the actual values never leave the server.

PHP script managing login state with sessions

<?php
session_start();

// --- login.php (handles the login form POST) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user = $_POST['username'] ?? '';
    $pass = $_POST['password'] ?? '';

    // Demo check (use a hashed DB password in real code)
    if ($user === 'admin' && $pass === 'secret') {
        $_SESSION['loggedin'] = true;
        $_SESSION['username'] = $user;
        header('Location: dashboard.php');
        exit;
    } else {
        echo 'Invalid credentials';
    }
}
?>

<?php
// --- dashboard.php (protected page) ---
session_start();
if (empty($_SESSION['loggedin'])) {
    header('Location: login.php');   // not logged in -> redirect
    exit;
}
echo 'Welcome, ' . htmlspecialchars($_SESSION['username']);
?>

<?php
// --- logout.php ---
session_start();
session_unset();      // clear all session variables
session_destroy();    // destroy the session
header('Location: login.php');
?>

The $_SESSION['loggedin'] flag is checked on every protected page to keep the user authenticated until they log out or the session expires.

What is XML?

XML (eXtensible Markup Language) is a markup language used to store and transport data in a platform-independent, self-describing, text-based format. Unlike HTML, XML has no predefined tags; the author defines their own tags to describe the meaning of the data. It is hierarchical (tree structured), case-sensitive, and must be well-formed (one root element, properly nested and closed tags, quoted attribute values).

XML document: weather report

<?xml version="1.0" encoding="UTF-8"?>
<weatherReport city="Kathmandu" date="2080-12-15">
  <temperature unit="Celsius">18</temperature>
  <humidity>62</humidity>
  <wind unit="kmph">12</wind>
  <condition>Partly Cloudy</condition>
</weatherReport>

Here city and date are attributes of the root, while temperature, humidity, wind and condition are child elements; unit is an attribute on some elements.

Equivalent DTD

<!ELEMENT weatherReport (temperature, humidity, wind, condition)>
<!ATTLIST weatherReport
    city CDATA #REQUIRED
    date CDATA #REQUIRED>

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

<!ELEMENT humidity (#PCDATA)>

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

<!ELEMENT condition (#PCDATA)>

The DTD declares the element hierarchy with <!ELEMENT> and the allowed attributes with <!ATTLIST>, where #PCDATA is parsed character data and #REQUIRED marks mandatory attributes.

AJAX

AJAX (Asynchronous JavaScript and XML) is a web technique that lets a web page exchange data with the server and update parts of the page without reloading the whole page. It is not a single technology but a combination of HTML/CSS, the DOM, JavaScript, and the XMLHttpRequest object (or the modern fetch() API); data is usually exchanged as JSON or XML.

How AJAX enables asynchronous communication

1. A browser event (e.g. a click or keypress) triggers a JavaScript function.
2. The script creates an XMLHttpRequest object and sends a request to the server in the background.
3. Because the request is asynchronous, the browser does not freeze — the user can keep interacting with the page while waiting.
4. The server processes the request and returns only the needed data (JSON/XML/text), not a full page.
5. A callback (onreadystatechange / then()) fires when the response arrives, and JavaScript uses the DOM to update just the relevant portion of the page.

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

This gives faster, smoother, more interactive applications (e.g. search suggestions, live form validation).

Role of a Web Server

A web server is software (and the host machine) that stores website files and responds to HTTP/HTTPS requests from clients (browsers). Its main roles are:

• Listen for incoming HTTP requests on a port (typically 80/443).
• Locate the requested resource and, for static content, return the file directly.
• For dynamic content, pass the request to a server-side engine (PHP, Node, etc.), then return the generated output.
• Send back the response with appropriate status codes and headers.
• Handle authentication, logging, and security (e.g. SSL/TLS).

Examples: Apache, Nginx, Microsoft IIS.

Static vs Dynamic Web Pages

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based, language-independent data-interchange format. It represents data as key/value pairs (objects, in { }) and ordered lists (arrays, in [ ]), and is easy for both humans to read and machines to parse.

{
  "name": "Ram",
  "age": 21,
  "courses": ["Web Tech", "DBMS"]
}

JSON vs XML for Data Exchange

Summary: JSON is preferred for modern web APIs because it is lighter, faster to parse and maps directly to JavaScript objects; XML is richer (attributes, namespaces, schemas) and better for document-centric data.

What are Cookies?

A cookie is a small piece of data (up to ~4 KB) that a server sends to the browser, which the browser stores on the client and sends back with every subsequent request to that site. Cookies let a stateless HTTP protocol "remember" information such as user preferences, login state, or shopping-cart contents. Each cookie has a name, value, and optional attributes (expiry, path, domain, Secure, HttpOnly).

Creating and Reading Cookies

In PHP (server-side):

<?php
// Create / set a cookie that lasts 1 hour
setcookie("username", "Ram", time() + 3600, "/");

// Read a cookie (available on the NEXT request)
if (isset($_COOKIE["username"])) {
    echo "Welcome back, " . $_COOKIE["username"];
}
?>

In JavaScript (client-side):

// Create
document.cookie = "theme=dark; max-age=3600; path=/";

// Read (all cookies as one string)
console.log(document.cookie);   // "theme=dark"

When a cookie is set, it travels to the browser in the Set-Cookie response header; on later requests the browser automatically returns it in the Cookie request header, where the server reads it (e.g. via $_COOKIE).

Internet vs World Wide Web

In short, the Internet is the infrastructure, while the Web is one of the services (using HTTP and URLs) that operates over it.

Client-Server Architecture of the Web

The Web follows a client-server model:

• The client (web browser) sends an HTTP request for a resource, identified by a URL.
• The request travels over the Internet (resolved via DNS to an IP address) to the server.
• The web server processes the request, fetches/generates the resource (HTML, image, JSON, etc.) and returns an HTTP response with a status code.
• The browser renders the response for the user.

It is a request-response, stateless interaction; one server can serve many clients simultaneously. Diagrammatically: Browser (client) --HTTP request--> Web Server, and Web Server --HTTP response--> Browser.

HTML Tables

HTML tables display data in rows and columns. Key tags:

• <table> – the table container
• <tr> – a table row
• <th> – a header cell (bold, centred)
• <td> – a data cell
• Attributes such as colspan / rowspan merge cells; <caption> adds a title.

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

HTML Forms

A form (<form>) collects user input and submits it to a server using the action (URL) and method (GET/POST) attributes. Common form elements:

<form action="submit.php" method="post">
  Name:  <input type="text" name="name"><br>
  Email: <input type="email" name="email"><br>
  Pass:  <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>
  Bio: <textarea name="bio" rows="3"></textarea><br>
  <input type="submit" value="Send">
</form>

Common form elements: text/email/password inputs, radio buttons, checkbox, select/option drop-downs, textarea, and the submit/reset buttons. The name attribute identifies each value sent to the server.

CSS Selectors

A CSS selector specifies which HTML element(s) a style rule applies to. The main types:

1. Universal selector * — selects every element.

* { margin: 0; }

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

p { color: gray; }

3. Class selector .classname — selects elements with that class.

.note { background: yellow; }

4. ID selector #id — selects the single element with that id.

#header { height: 60px; }

5. Group selector — applies one rule to several selectors.

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

6. Descendant selector — element inside another.

div p { font-size: 14px; }

7. Attribute selector — matches by attribute.

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

8. Pseudo-class / pseudo-element.

a:hover   { color: red; }
p::first-line { font-weight: bold; }

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

JavaScript Data Types, Operators and Control Structures

Data Types

Primitive types: Number, String, Boolean, Undefined, Null, BigInt, Symbol. Non-primitive: Object (including arrays and functions). JavaScript is dynamically typed — a variable's type is decided at runtime.

let age = 21;            // Number
let name = "Ram";       // String
let ok = true;          // Boolean
let x;                  // Undefined
let person = {a: 1};    // Object
let list = [1, 2, 3];   // Array (object)

Operators

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

let y = (age >= 18) ? "adult" : "minor";

Control Structures

Conditional:

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}
// switch, and if-else-if ladders also available

Loops:

for (let i = 0; i < 3; i++) console.log(i);   // for
while (age > 0) { age--; }                    // while
do { } while (false);                         // do-while

These let a program make decisions and repeat actions based on conditions.

Document Object Model (DOM)

The DOM (Document Object Model) is a programming interface that represents an HTML/XML document as a tree of objects (nodes). When a browser loads a page, it builds the DOM tree where the document is the root and every element, attribute and piece of text becomes a node. Through the DOM, scripts can access, change, add or delete any part of the page dynamically.

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

Manipulating the DOM with JavaScript

JavaScript uses the DOM API to interact with the page:

1. Selecting elements

let el = document.getElementById("title");
let items = document.querySelectorAll(".item");

2. Changing content / attributes / style

el.innerHTML = "Hello DOM";
el.setAttribute("class", "active");
el.style.color = "red";

3. Creating and removing nodes

let li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").appendChild(li);
el.remove();

4. Handling events

el.addEventListener("click", function () {
  alert("clicked");
});

This lets pages respond to user actions and update without reloading, which is the basis of dynamic, interactive web applications.