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

Cookies and Sessions in PHP

Cookies are small pieces of data stored on the client (browser) by the server. They are sent with every HTTP request to the same domain and are used to remember information (preferences, login tokens). They have an expiry time and can persist after the browser closes.

setcookie("user", "alice", time() + 3600, "/"); // valid for 1 hour
echo $_COOKIE["user"] ?? "no cookie";

Sessions store data on the server; only a session ID (PHPSESSID) is kept on the client (usually as a cookie). Sessions are more secure for sensitive data because the actual values never travel to the browser. Data is available through the superglobal $_SESSION.

PHP Script: Managing Login State with Sessions

login.php

<?php
session_start();
$users = ["alice" => "pass123"]; // demo credential store

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $u = $_POST["username"];
    $p = $_POST["password"];
    if (isset($users[$u]) && $users[$u] === $p) {
        $_SESSION["loggedin"] = true;
        $_SESSION["user"] = $u;
        header("Location: welcome.php");
        exit;
    } else {
        $error = "Invalid credentials";
    }
}
?>
<form method="post">
    <input name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <button type="submit">Login</button>
</form>
<?php if (!empty($error)) echo "<p>$error</p>"; ?>

welcome.php (protected page)

<?php
session_start();
if (empty($_SESSION["loggedin"])) {
    header("Location: login.php");
    exit;
}
echo "Welcome, " . htmlspecialchars($_SESSION["user"]) . "! ";
echo '<a href="logout.php">Logout</a>';
?>

logout.php

<?php
session_start();
session_unset();
session_destroy();
header("Location: login.php");
?>

Here session_start() initializes/resumes the session, $_SESSION["loggedin"] records the login state, protected pages check it before showing content, and session_destroy() logs the user out.

What is XML?

XML (eXtensible Markup Language) is a markup language for storing and transporting data in a self-descriptive, platform-independent, text-based format. Unlike HTML it has no predefined tags — the author defines their own tags. It is case-sensitive, must be well-formed (every tag closed, properly nested, one root element), and is widely used for data exchange and configuration.

Key features: self-describing, separates data from presentation, hierarchical (tree) structure, extensible, and human- and machine-readable.

XML Document: Weather Report

<?xml version="1.0" encoding="UTF-8"?>
<weatherReport date="2081-03-15">
    <city country="Nepal">Kathmandu</city>
    <temperature unit="Celsius">
        <current>24</current>
        <min>16</min>
        <max>28</max>
    </temperature>
    <humidity unit="percent">65</humidity>
    <condition>Partly Cloudy</condition>
    <wind unit="kmph">12</wind>
</weatherReport>

Here date, country, and unit are attributes, while city, temperature, humidity, etc. are elements.

Equivalent DTD

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

  <!ELEMENT city (#PCDATA)>
  <!ATTLIST city country CDATA #REQUIRED>

  <!ELEMENT temperature (current, min, max)>
  <!ATTLIST temperature unit CDATA #REQUIRED>
  <!ELEMENT current (#PCDATA)>
  <!ELEMENT min (#PCDATA)>
  <!ELEMENT max (#PCDATA)>

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

  <!ELEMENT condition (#PCDATA)>

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

The DTD declares the structure: weatherReport is the root containing the listed child elements in order, #PCDATA denotes parsed character data (text), and #REQUIRED marks mandatory attributes.

PHP Form Handling and MySQL Connectivity

Form handling: An HTML form submits data via the method (GET or POST) to a PHP script named in action. PHP reads submitted values through the superglobals $_GET, $_POST, or $_REQUEST. Best practice is to validate and sanitize input (e.g. htmlspecialchars(), prepared statements) to prevent XSS and SQL injection.

MySQL connectivity: PHP connects to MySQL using either the MySQLi or PDO extension. The steps are: (1) open a connection, (2) prepare/execute SQL, (3) process results, (4) close the connection. Prepared statements bind parameters safely.

PHP Script: Insert and Retrieve Student Records

db.php — connection

<?php
$conn = new mysqli("localhost", "root", "", "school");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Assume a table:

CREATE TABLE students (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  roll INT,
  marks INT
);

insert.php

<?php
require "db.php";
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $stmt = $conn->prepare(
        "INSERT INTO students (name, roll, marks) VALUES (?, ?, ?)");
    $stmt->bind_param("sii", $_POST["name"], $_POST["roll"], $_POST["marks"]);
    $stmt->execute();
    echo "Record inserted (ID " . $stmt->insert_id . ")";
    $stmt->close();
}
?>
<form method="post">
    <input name="name" placeholder="Name" required>
    <input name="roll" type="number" placeholder="Roll" required>
    <input name="marks" type="number" placeholder="Marks" required>
    <button type="submit">Add Student</button>
</form>

retrieve.php

<?php
require "db.php";
$result = $conn->query("SELECT id, name, roll, marks FROM students");
echo "<table border='1'><tr><th>ID</th><th>Name</th><th>Roll</th><th>Marks</th></tr>";
while ($row = $result->fetch_assoc()) {
    echo "<tr><td>{$row['id']}</td><td>" . htmlspecialchars($row['name']) .
         "</td><td>{$row['roll']}</td><td>{$row['marks']}</td></tr>";
}
echo "</table>";
$conn->close();
?>

The insert script uses a prepared statement with bound parameters (safe against SQL injection), and the retrieve script loops over the result set with fetch_assoc() to print all records in an HTML table.

JSON

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

{
  "name": "Alice",
  "age": 22,
  "courses": ["Web Tech", "DBMS"]
}

JSON vs XML for Data Exchange

In short, JSON is preferred for modern web APIs because it is lighter and maps directly to JavaScript objects, whereas XML offers richer structure (attributes, namespaces, schemas) suited to complex documents.

Cookies

A cookie is a small piece of data (typically up to 4 KB) that a web server stores in the user's browser. The browser sends it back with every subsequent request to the same domain, allowing the server to remember stateful information such as login, preferences, or shopping-cart contents across the otherwise stateless HTTP protocol. Each cookie has a name, value, expiry, path, and domain.

Creating a Cookie

In PHP a cookie is set before any output using setcookie():

setcookie("username", "alice", time() + 3600, "/"); // expires in 1 hour

This sends a Set-Cookie HTTP header to the browser. In JavaScript:

document.cookie = "username=alice; max-age=3600; path=/";

Reading a Cookie

The browser returns cookies in the request header; the server reads them from the $_COOKIE superglobal:

if (isset($_COOKIE["username"])) {
    echo "Welcome back, " . htmlspecialchars($_COOKIE["username"]);
}

In JavaScript all cookies are read as a single string via document.cookie. Note a cookie set on one request is only available from the next request onward.

Cookies can be deleted by setting an expiry time in the past, e.g. setcookie("username", "", time() - 3600, "/");.

Internet vs World Wide Web

In short, the Internet is the underlying global network, while the WWW is one of the many services delivered over it.

Client–Server Architecture of the Web

The web follows a request–response client–server model:

1. Client (browser): the user enters a URL or clicks a link. The browser sends an HTTP request to the server.
2. DNS resolution: the domain name is resolved to the server's IP address.
3. Server (web server, e.g. Apache/Nginx): receives the request, processes it (possibly running server-side code like PHP, querying a database), and returns an HTTP response containing HTML/CSS/JS or data.
4. Rendering: the browser parses the response and displays the page.

HTTP is stateless, so techniques such as cookies and sessions are used to maintain state between requests. The model is scalable because one server can serve many clients.

(Diagram in words: Browser ⇄ [HTTP request/response over the Internet] ⇄ Web Server ⇄ Database.)

HTML Tables

Tables display data in rows and columns. Key tags: <table> (container), <tr> (row), <th> (header cell, bold/centered), <td> (data cell), plus optional <caption>, <thead>, <tbody>. Cells can span with rowspan/colspan.

<table border="1">
  <caption>Student Marks</caption>
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Alice</td><td>85</td></tr>
  <tr><td>Bob</td><td>78</td></tr>
</table>

HTML Forms

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

• Text input: <input type="text">
• Password: <input type="password">
• Radio button: <input type="radio"> (single choice)
• Checkbox: <input type="checkbox"> (multiple choice)
• Dropdown: <select><option>...</option></select>
• Textarea: <textarea> (multi-line text)
• Submit/Reset: <input type="submit">, <input type="reset">

<form action="submit.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">M
          <input type="radio" name="g" value="F">F<br>
  Course:
  <select name="course">
    <option>Web Tech</option>
    <option>DBMS</option>
  </select><br>
  <textarea name="address"></textarea><br>
  <input type="submit" value="Send">
</form>

CSS Selectors

A selector targets the HTML element(s) to which a set of style rules applies. The main types:

1. Universal selector * — selects all elements.

* { margin: 0; padding: 0; }

2. Element (type) selector — selects by tag name.

p { color: blue; }

3. Class selector .classname — selects elements with that class (reusable).

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

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

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

5. Group selector — applies the same rule to several selectors.

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

6. Descendant / child selector — based on nesting.

div p { color: green; }   /* p inside div */
div > p { color: red; }   /* direct child p */

7. Attribute selector — selects by attribute.

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

8. Pseudo-class / pseudo-element — selects by state or part.

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

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

JavaScript Data Types

JavaScript is dynamically typed. Primitive types: Number, String, Boolean, Undefined, Null, BigInt, Symbol. Non-primitive (reference) type: Object (including arrays and functions).

let n = 10;          // Number
let s = "hello";     // String
let b = true;        // Boolean
let u;               // Undefined
let x = null;        // Null
let arr = [1, 2, 3]; // Object (array)

Operators

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

let sum = 5 + 3;          // 8
let eq = (5 === "5");     // false (strict)
let max = (a > b) ? a : b;

Control Structures

Conditional (if / else / switch):

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

Loops (for, while, do-while):

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

let j = 0;
while (j < 3) { console.log(j); j++; }

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

Document Object Model (DOM)

The DOM is a programming interface (API) that represents an HTML or XML document as a tree of nodes/objects. Each element, attribute, and piece of text becomes a node, and the document's root is the document object. The DOM is language-independent and allows programs (typically JavaScript) to access, traverse, and modify the structure, content, and style of a web page dynamically. The tree has a hierarchy: document → <html> → <head>/<body> → elements → text nodes.

Manipulating the DOM with JavaScript

1. Selecting elements:

let el  = document.getElementById("title");
let els = document.getElementsByClassName("item");
let q   = document.querySelector(".item");      // first match
let all = document.querySelectorAll("p");

2. Changing content / attributes:

el.innerHTML = "<b>New Heading</b>";
el.textContent = "Plain text";
el.setAttribute("class", "active");
el.style.color = "red";

3. Creating / adding / removing nodes:

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

4. Handling events:

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

Through these methods JavaScript makes pages interactive and dynamic without reloading.

XSLT

XSLT (eXtensible Stylesheet Language Transformations) is a declarative, XML-based language used to transform an XML document into another format — such as HTML, plain text, or another XML structure. It works together with XPath (to select nodes) and uses template rules that match parts of the source tree and define the output. An XSLT processor reads the source XML and the XSLT stylesheet and produces a result tree.

Example

students.xml

<?xml version="1.0"?>
<students>
  <student><name>Alice</name><marks>85</marks></student>
  <student><name>Bob</name><marks>78</marks></student>
</students>

transform.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 stylesheet is linked from the XML with <?xml-stylesheet type="text/xsl" href="transform.xsl"?>. The <xsl:template match="/"> matches the root, <xsl:for-each> iterates over each student, and <xsl:value-of> extracts element values — producing an HTML table from the XML data.

Arrays in PHP

A PHP array is an ordered map that associates keys with values; it can hold multiple values in a single variable. PHP supports three kinds of arrays.

1. Indexed (numeric) array

Elements accessed by an automatically assigned integer index starting at 0.

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

2. Associative array

Uses named (string) keys instead of numeric indexes — good for key/value data.

$marks = array("Alice" => 85, "Bob" => 78);
echo $marks["Alice"];   // 85

3. Multidimensional array

An array containing one or more arrays (a table/matrix). Accessed with multiple indexes.

$students = array(
  array("Alice", 85),
  array("Bob", 78)
);
echo $students[0][0];   // Alice
echo $students[1][1];   // 78

Differences

Arrays can be looped with foreach, e.g. foreach ($marks as $name => $m) { echo "$name: $m"; }.