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

Q: Where can I find the BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) question paper 2075?

The full BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2075 (regular) question paper is available free on Kekkei. You can read every question online and attempt the paper under timed exam conditions.

Q: Does the Web Technology (BSc CSIT, CSC318) 2075 paper come with solutions?

Yes. Every question on this Web Technology (BSc CSIT, CSC318) past paper includes a step-by-step solution, plus instant AI feedback when you attempt it on Kekkei.

Q: How many marks is the BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2075 paper?

The BSc CSIT (TU) Web Technology (BSc CSIT, CSC318) 2075 paper carries 60 full marks and is meant to be completed in 180 minutes, across 12 questions.

Q: Is practising this Web Technology (BSc CSIT, CSC318) past paper free?

Yes — reading and attempting this Web Technology (BSc CSIT, CSC318) past paper on Kekkei is completely free.

Question

1long10 marks

Explain how PHP handles forms and connects to a MySQL database. Write a PHP script to insert and retrieve student records from a MySQL database.

phpmysql

Answer 1

PHP Form Handling and MySQL Connectivity

How PHP handles forms

When an HTML form is submitted, the browser sends the field data to a PHP script via the HTTP GET or POST method. PHP collects this data into the superglobal arrays $_GET, $_POST, or $_REQUEST. The form's action attribute names the PHP file and the method attribute selects the transfer method.

<form action="student.php" method="post">
  Name: <input type="text" name="name"><br>
  Age:  <input type="text" name="age"><br>
  <input type="submit" name="submit" value="Save">
</form>

Inside student.php the value is read with $_POST['name']. Data should always be validated and sanitised (e.g. trim(), htmlspecialchars(), prepared statements) to prevent injection.

Connecting PHP to MySQL

PHP connects to MySQL using the MySQLi or PDO extension. The steps are: (1) open a connection, (2) run SQL queries, (3) process results, (4) close the connection.

Complete script: insert and retrieve student records

<?php
// 1. Connect to MySQL (host, user, password, database)
$conn = new mysqli("localhost", "root", "", "college");
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 2. INSERT a record (using a prepared statement to stay safe)
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $age  = (int)$_POST['age'];
    $stmt = $conn->prepare("INSERT INTO student (name, age) VALUES (?, ?)");
    $stmt->bind_param("si", $name, $age);  // s = string, i = integer
    $stmt->execute();
    echo "New record inserted (id = " . $conn->insert_id . ")<br>";
    $stmt->close();
}

// 3. RETRIEVE and display all records
$result = $conn->query("SELECT id, name, age FROM student");
echo "<table border='1'><tr><th>ID</th><th>Name</th><th>Age</th></tr>";
while ($row = $result->fetch_assoc()) {
    echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['age']}</td></tr>";
}
echo "</table>";

// 4. Close the connection
$conn->close();
?>

The table is assumed to be created as:

CREATE TABLE student (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(50), age INT);

This demonstrates the full cycle: form submission → PHP reads $_POST → MySQLi connection → prepared INSERT → SELECT and display.

Answer 2

Client-Side Form Validation using JavaScript

Client-side validation checks form input in the user's browser before the data is sent to the server. It runs in JavaScript, so errors (empty fields, wrong format, weak password, unticked agreement) are caught instantly without a round-trip to the server.

Advantages

Immediate feedback, better user experience.
Reduces unnecessary server load and network traffic.

Note: Client-side validation can be bypassed (JavaScript disabled), so it must always be backed up by server-side validation for security.

HTML form with JavaScript validation

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

  // 1. Username required, at least 4 chars
  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 required, at least 6 chars
  if (pass.length < 6) {
    alert("Password must be at least 6 characters"); return false;
  }
  // 3. Terms checkbox must be ticked
  if (!agree) {
    alert("You must accept the terms"); return false;
  }
  return true;   // all checks passed -> allow submission
}
</script>
</head>
<body>
<form name="reg" action="submit.php" method="post" onsubmit="return validateForm()">
  Username: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  <input type="checkbox" name="terms"> I accept the terms<br>
  <input type="submit" value="Register">
</form>
</body>
</html>

The onsubmit="return validateForm()" handler runs the function on submit; returning false cancels submission and shows the alert, while true lets the form proceed.

Answer 3

Structure of an HTML5 Document, Applying CSS, and the Box Model

1. Structure of an HTML5 document

An HTML5 page begins with the simplified doctype and a clear structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <section>...</section>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>
</html>

<!DOCTYPE html> — declares HTML5.
<head> — metadata (charset, viewport, title, links to CSS/JS).
<body> — visible content.
HTML5 adds semantic elements: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

2. Three ways of applying CSS

(a) Inline CSS — style attribute on a single element (highest priority, hard to reuse):

<p style="color:red; font-size:18px;">Hello</p>

(b) Internal (embedded) CSS — inside a <style> block in the <head>, applies to one page:

<style>
  p { color: blue; text-align: center; }
</style>

(c) External CSS — a separate .css file linked with <link>; best for multi-page sites (reusable, cached):

<link rel="stylesheet" href="styles.css">

/* styles.css */
p { color: green; }

3. The CSS Box Model

Every element is a rectangular box made of four layers, from inside out:

Layer	Meaning
Content	The actual text/image (width × height)
Padding	Space between content and border
Border	Line surrounding the padding
Margin	Space outside the border, separating from other elements

+-----------------------------+
|          margin             |
|  +-----------------------+  |
|  |       border          |  |
|  |  +-----------------+  |  |
|  |  |    padding      |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  | content   |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

Total width = content + left/right padding + left/right border + left/right margin. With box-sizing: border-box, padding and border are included inside the declared width.

Answer 4

Types of CSS Selectors

A selector targets the HTML element(s) a CSS rule applies to.

Selector	Syntax	Example	Targets
Universal	`*`	`* { margin:0; }`	All elements
Element (type)	`tag`	`p { color:blue; }`	All `<p>`
Class	`.name`	`.btn { padding:5px; }`	Elements with `class="btn"`
ID	`#id`	`#nav { width:100%; }`	The element with `id="nav"`
Group	`a, b`	`h1, h2 { color:red; }`	Multiple selectors at once
Descendant	`a b`	`div p { ... }`	`<p>` inside a `<div>`
Child	`a > b`	`ul > li { ... }`	Direct `<li>` children of `<ul>`
Attribute	`[attr]`	`input[type="text"] {...}`	Elements with that attribute
Pseudo-class	`:state`	`a:hover { color:green; }`	Elements in a state
Pseudo-element	`::part`	`p::first-line {...}`	Part of an element

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

Answer 5

JavaScript Data Types, Operators and Control Structures

Data types

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

JavaScript is dynamically typed — typeof x returns the current type.

let n = 25;        // number
let s = "CSIT";   // string
let ok = true;     // boolean
let arr = [1,2,3]; // object (array)

Operators

Arithmetic: + - * / % **
Assignment: = += -= *=
Comparison: == (loose), === (strict), !=, <, >
Logical: &&, ||, !

let x = 7 % 2;       // 1
let eq = (5 === "5"); // false (strict)

Control structures

Decision: if / else if / else, switch.

if (n > 0) console.log("positive");
else console.log("non-positive");

Loops: for, while, do...while, for...of.

for (let i = 1; i <= 3; i++) console.log(i); // 1 2 3

These let a program take decisions and repeat blocks of code.

Answer 6

Document Object Model (DOM) and JavaScript Manipulation

What is the DOM?

The Document Object Model is a platform- and language-neutral programming interface that represents an HTML/XML document as a tree of objects (nodes). The document object is the root; each element, attribute and piece of text is a node. The DOM lets scripts read and change the content, structure and style of a page dynamically.

document
  └─ html
       ├─ head ── title
       └─ body ── h1, p, div ...

Manipulating the DOM with JavaScript

1. Selecting elements

document.getElementById("demo");
document.getElementsByClassName("box");
document.querySelector("p.note");

2. Changing content / attributes / style

document.getElementById("demo").innerHTML = "Hello DOM";
img.setAttribute("src", "pic.png");
document.getElementById("demo").style.color = "red";

3. Creating / adding / removing nodes

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

4. Handling events

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

Through these methods JavaScript makes web pages interactive and dynamic.

Answer 7

XSLT (eXtensible Stylesheet Language Transformations)

XSLT is a language used to transform XML documents into other formats such as HTML, plain text, or another XML structure. It is part of the XSL family and uses XPath to navigate and select parts of the source XML. An XSLT processor reads the XML and the XSLT stylesheet and produces the output document.

How it works

The XML file links to (or is paired with) an .xsl stylesheet.
The stylesheet contains templates (<xsl:template match="...">) that match nodes.
The processor walks the XML tree, applies matching templates, and emits the result tree.

Example

student.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="student.xsl"?>
<students>
  <student><name>Ram</name><age>20</age></student>
  <student><name>Sita</name><age>21</age></student>
</students>

student.xsl

<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>Age</th></tr>
      <xsl:for-each select="students/student">
        <tr>
          <td><xsl:value-of select="name"/></td>
          <td><xsl:value-of select="age"/></td>
        </tr>
      </xsl:for-each>
    </table>
  </body></html>
</xsl:template>
</xsl:stylesheet>

This transforms the XML data into an HTML table for display in a browser.

Answer 8

Arrays in PHP

A PHP array is an ordered map that stores multiple values in a single variable, each value reachable by a key. PHP has three kinds of arrays.

1. Indexed array

Keys are automatic integers starting at 0.

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

2. Associative array

Uses named (string) keys mapped to values — good for key→value data.

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

3. Multidimensional array

An array whose elements are themselves arrays (a table / matrix).

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

Difference

Type	Key	Use
Indexed	numeric (0,1,2…)	simple lists
Associative	string names	key–value pairs
Multidimensional	arrays inside arrays	tables / records

Arrays are traversed with foreach, e.g. foreach($marks as $name => $m) {...}.

Answer 9

User-Defined Functions in PHP

A user-defined function is a reusable block of code created by the programmer using the function keyword. It is defined once and called whenever needed, optionally taking arguments and returning a value.

function greet($name) {
    return "Hello, $name";
}
echo greet("Ram");   // Hello, Ram

Passing arguments by value (default)

A copy of the value is passed; changes inside the function do not affect the original variable.

function addTen($x) {
    $x = $x + 10;
    return $x;
}
$a = 5;
addTen($a);
echo $a;   // 5  (original unchanged)

Passing arguments by reference

Prefix the parameter with &. The function works on the original variable, so changes persist outside.

function addTen(&$x) {
    $x = $x + 10;
}
$a = 5;
addTen($a);
echo $a;   // 15  (original modified)

Key difference

	By value	By reference
Passed	a copy	the actual variable (`&`)
Effect	original unchanged	original changed

Functions reduce repetition, improve readability and make code modular.

Answer 10

Structure of a URL and the Role of DNS

Structure of a URL

A URL (Uniform Resource Locator) is the address of a resource on the web. Example:

https://www.example.com:443/path/page.html?id=10#top

Part	Example	Meaning
Scheme / protocol	`https://`	How to access (http, https, ftp)
Host / domain	`www.example.com`	Server that holds the resource
Port	`:443`	Network port (default 80 http, 443 https)
Path	`/path/page.html`	Location of the file on the server
Query string	`?id=10`	Parameters sent to the server
Fragment	`#top`	A section within the page

Role of DNS

Computers communicate using IP addresses, but domain names like www.example.com are easier for humans. The Domain Name System (DNS) is a distributed hierarchical database that translates (resolves) a domain name into its IP address.

Resolution steps:

Browser checks its cache, then asks the resolver (ISP DNS server).
The resolver queries the root server → TLD server (.com) → authoritative name server for example.com.
The authoritative server returns the IP (e.g. 93.184.216.34).
The browser then connects to that IP to fetch the page.

Thus DNS acts like the "phonebook of the Internet," mapping readable names to numeric addresses.

Answer 11

GET vs POST Methods

Both GET and POST are HTTP methods used to submit form data to the server, set via the form's method attribute, but they differ in how data is carried.

Feature	GET	POST
Data location	Appended to the URL as a query string (`?name=ram`)	Sent in the HTTP request body
Visibility	Visible in the address bar	Not shown in the URL
Data size	Limited (URL length limit, ~2KB)	Large amounts allowed
Bookmark / cache	Can be bookmarked and cached	Cannot
Security	Less secure (data exposed)	More secure (hidden from URL)
Idempotent	Yes — should only retrieve data	No — used to change/create data
PHP access	`$_GET`	`$_POST`
Typical use	Search, navigation, filters	Login, registration, file upload, sensitive data

Summary: Use GET to fetch data when it is safe to expose in the URL; use POST to send large or sensitive data such as passwords.

Answer 12

AJAX (Asynchronous JavaScript And XML)

AJAX is a web technique that lets a web page exchange data with the server in the background and update parts of the page without reloading the whole page. It combines JavaScript, the XMLHttpRequest (or fetch) object, and a data format such as JSON or XML.

How AJAX enables asynchronous communication

A user action (click, keypress) triggers a JavaScript function.
JavaScript creates an XMLHttpRequest object and sends a request to the server.
Because the request is asynchronous, the browser keeps responding to the user while waiting.
The server processes the request and sends back only the needed data.
A callback (the onreadystatechange/onload handler) fires when the response arrives, and JavaScript updates just the relevant part of the DOM.

Example

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

Benefits

Faster, smoother user experience (partial page updates).
Less bandwidth — only data, not the full page, is transferred.
Used in live search, autocomplete, chat, and dynamic content loading.

Section A: Long Answer Questions

PHP Form Handling and MySQL Connectivity

How PHP handles forms

Connecting PHP to MySQL

Complete script: insert and retrieve student records

Client-Side Form Validation using JavaScript

Advantages

HTML form with JavaScript validation

Structure of an HTML5 Document, Applying CSS, and the Box Model

1. Structure of an HTML5 document

2. Three ways of applying CSS

3. The CSS Box Model

Section B: Short Answer Questions

Types of CSS Selectors

JavaScript Data Types, Operators and Control Structures

Data types

Operators

Control structures

Document Object Model (DOM) and JavaScript Manipulation

What is the DOM?

Manipulating the DOM with JavaScript

XSLT (eXtensible Stylesheet Language Transformations)

How it works

Example

Arrays in PHP

1. Indexed array

2. Associative array

3. Multidimensional array

Difference

User-Defined Functions in PHP

Passing arguments by value (default)

Passing arguments by reference

Key difference

Structure of a URL and the Role of DNS

Structure of a URL

Role of DNS

GET vs POST Methods

AJAX (Asynchronous JavaScript And XML)

How AJAX enables asynchronous communication

Example

Benefits

Frequently asked questions