Sample Answers
Sample Answers
Sample Questions
Ans) The **HTTP TRACE** method is used to debug web applications by echoing back the
entire request received by the server, allowing the client to see what is being
sent and received at an intermediary level (like proxies). It helps identify any
modifications or issues along the transmission path.
Q.2 Explain how the user can be allowed to enter more that one email id seperated by a
comma, like: [email protected], [email protected], [email protected] in the input
email field.
Ans) To allow the user to enter multiple email IDs separated by commas in an input field, use
the `multiple` attribute in the `<input>` tag like this:
```html
<input type="email" multiple>
```
This ensures the input accepts multiple email addresses, separated by commas, and validates
each email format.
[2]
Q.3. Elucidate the differences between the <picture>, <img> and <figure> elements in
HTML5. [3]
Ans)
2. **`<picture>`**: Allows the use of multiple image sources for responsive design,
displaying the most appropriate one based on conditions (e.g., screen size).
3. **`<figure>`**: Wraps media content (like images) along with optional captions, providing
semantic grouping.
Q.4 Your browser currently is on the URL http://books.xyz.edu/cse/c.html. Write the resulting
URLs when the user clicks on each of the following links: [4]
A. <a href=”123.html”>a</a>
B. <a href=”/234.html” target=”_blank”>b</a>
C. <a href=”#c”>c</a>
D. <a href=”http://google.com”>google</a>
A. **`<a href="123.html">a</a>`**
→ `http://books.xyz.edu/cse/123.html`
C. **`<a href="#c">c</a>`**
→ `http://books.xyz.edu/cse/c.html#c`
D. **`<a href="http://google.com">google</a>`**
→ `http://google.com`
Q.5. Based on the given html code, write the CSS selectors for the following. [Do not do any
changes to the html code, write only the CSS ] [2+2+2=6]
<HTML>
<ul id="menu">
<li>
<a href="/html/">HTML</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
</ul>
</HTML>
i) Write a CSS selector which selects all <a> tags that are somewhere inside the
<ul> with id="menu" and apply the style: color: white;
ii) Write a CSS selector which selects all <a> tags that have <li> as their immediate
parent and apply the style: margin:20px;
iii) Write a CSS selector which selects all input tags with the attribute
type="button" and apply the style: background-color: blue;
Ans) Here are the CSS selectors based on the provided HTML code:
i) **Select all `<a>` tags that are inside the `<ul>` with `id="menu"`:**
```css
#menu a {
color: white;
}
```
ii) **Select all `<a>` tags that have `<li>` as their immediate parent:**
```css
li > a {
margin: 20px;
}
```
Q.7. Assume you execute the following JavaScript code in a browser. Write the log
statements as it will appear in the console window [2]
console.log('log1');
setTimeout(()=> console.log('log 2'), 10);
console.log('log3');
setTimeout(()=> console.log('log 4'), 1);
Ans) The log statements will appear in the console window as follows:
```
log1
log3
log 4
log 2
```
Q.8. Predict the output for the given code snippet [3*2=6]
a)
var o1={a:true};
var o2={a:true};
var o3=o2;
console.log(o1===o3);
console.log(o2===o3);
console.log(JSON.stringify(o1)==JSON.stringify(o2));
console.log(JSON.stringify(o1)==JSON.stringify(o3));
console.log(JSON.stringify(o2)==JSON.stringify(o3));
b)
try { console.log(a); } catch(err) { console.log("ERROR"); }
try { console.log(b); } catch(err) { console.log("ERROR"); }
{
var a =1;
var b= 2;
console.log(a+b);
}
try { console.log(a); } catch(err) { console.log("ERROR"); }
try { console.log(b); } catch(err) { console.log("ERROR"); }
c)
var v = [];
v[0] = 0;
v[1] = 1;
v[1.5] = 1.5;
v['foo'] = 'foo';
console.log(v[0] + v[1] + v[1.5], v.foo);
**Explanation:**
- `o1` and `o3` refer to different objects, so `o1 === o3` is `false`.
- `o2` and `o3` refer to the same object, so `o2 === o3` is `true`.
- `JSON.stringify()` converts objects to identical strings, so all string comparisons are `true`.
---
### b) Output:
```javascript
try { console.log(a); } catch (err) { console.log("ERROR"); } // ERROR
try { console.log(b); } catch (err) { console.log("ERROR"); } // ERROR
{
var a = 1;
var b = 2;
console.log(a + b); // 3
}
**Explanation:**
- Due to **hoisting**, `a` and `b` are declared but initialized as `undefined` before their
assignments inside the block, causing `"ERROR"` during the first two `console.log()` calls.
- After the block, `a` and `b` are available in the global scope, so their values are printed.
---
### c) Output:
```
1 foo
```
**Explanation:**
1. `v[0] = 0` and `v[1] = 1`: These are valid array elements.
2. `v[1.5] = 1.5`: This is not treated as an array index but as a regular object property (arrays
are specialized objects in JavaScript). So, `v[1.5]` does not contribute to the array's length or
numeric sum.
3. `v['foo'] = 'foo'`: This creates another non-indexed property of the array object.
4. `v[0] + v[1]` gives `0 + 1 = 1`.
5. `v[1.5]` is treated as an object property, and adding it to the sum is ignored.
6. `v.foo` logs `'foo'` directly from the array object properties.
Hence, the output is:
```
1 foo
```
Q.9. Answer the following questions based on the Apache Web Server.
a. What might you do if you have a port conflict issue? (2 Marks)
b. What are the different ways to secure a website hosted on Apache Web Server? (2 Marks)
c. What is Zone? (1 Mark)
Ans) **a) What might you do if you have a port conflict issue?**
- Change the Apache port (e.g., from 80 to 8080) in the `httpd.conf` or `ports.conf` file.
- Stop or reconfigure the conflicting service using the same port.
Q.10. Compare and contrast XML and JSON as data serialization formats. Discuss their
strengths, weaknesses, and common use cases in web programming. (6 marks)
Ans) ### **Comparison of XML and JSON:**
3. **Data Types:**
- **XML:** Primarily stores everything as text, requiring parsing for numbers, booleans,
etc.
- **JSON:** Natively supports data types like numbers, booleans, arrays, and objects.
4. **Schema Validation:**
- **XML:** Supports schema validation through DTD or XSD to enforce structure.
- **JSON:** Validation requires external schemas like JSON Schema but is less strict.
5. **Performance:**
- **XML:** Larger payloads lead to slower parsing and transmission.
- **JSON:** Faster to parse and transmit due to lightweight structure.
- **XML Strengths:**
- Better for hierarchical, complex data structures.
- Supports comments and metadata through attributes.
- **XML Weaknesses:**
- Verbose and difficult to read.
- Slower to parse compared to JSON.
- **JSON Strengths:**
- Lightweight and easy to parse.
- Native support in JavaScript, making it ideal for web development.
- **JSON Weaknesses:**
- No built-in support for comments.
- Less suited for highly structured, nested data.
Q.11. Explore the key principles of the MVC architecture and how they contribute to the
separation of concerns in Web development. Provide a detailed explanation of the
responsibilities of each component (Model, View, and Controller) and discuss how this
separation enhances code maintainability and collaborative development. (8 marks)
---
1. **Model:**
- **Role:** Manages the data and business logic of the application.
- **Responsibilities:**
- Interacts with the database and handles data-related operations (CRUD).
- Implements business rules and validation logic.
- Notifies the View or Controller about data changes.
- **Benefit:** Keeps the data logic independent of the user interface, ensuring consistency
and reusability.
2. **View:**
- **Role:** Manages the presentation and user interface.
- **Responsibilities:**
- Renders data received from the Model to the user.
- Handles layout and design elements (HTML, CSS).
- Updates when the Model changes (in some implementations).
- **Benefit:** Decouples the UI from the logic, allowing front-end designers and developers
to work independently.
3. **Controller:**
- **Role:** Acts as an intermediary between the Model and View.
- **Responsibilities:**
- Receives user input (e.g., form submissions, button clicks) and determines the appropriate
response.
- Calls methods in the Model to manipulate data.
- Chooses the appropriate View to display the result.
- **Benefit:** Ensures smooth communication between Model and View, making the
application flow easier to manage.
---
1. **Separation of Concerns:**
- Each component (Model, View, Controller) has a single responsibility, reducing the chance
of code conflicts and simplifying debugging.
2. **Code Reusability:**
- Business logic (Model) can be reused across different views, and the same UI components
(View) can display data from different sources.
3. **Easier Testing:**
- Isolated components allow for unit testing (e.g., Models can be tested independently of
Views).
4. **Collaborative Development:**
- Backend and frontend developers can work simultaneously since the Model and View are
separate. Designers can focus on the View while developers handle the Controller and Model.
5. **Scalability:**
- MVC structure supports large, complex applications by making it easier to add new features
without breaking existing ones.
---
In summary, the MVC architecture promotes a clean separation of concerns, enhancing code
maintainability, testability, and scalability while fostering efficient collaboration among
developers and designers.
<?php
$length = strlen("Hello, World!");
$substring = substr("Hello, World!", 0, 5);
$str = str_replace("World", "PHP", "Hello, World!");
// Display results
echo "String Length: $length, Substring: $substring, Modified String: $str";
?>
Ans) ### **Output:**
```
String Length: 13, Substring: Hello, Modified String: Hello, PHP!
```
### **Explanation:**
1. **`strlen("Hello, World!")`**:
- Calculates the length of the string `"Hello, World!"`, which is **13** (including
spaces and punctuation).
4. **`echo`**:
- Combines and displays all the results in a single line.
Q.13. a. Below is a Registration Form. Write PHP code to POST this data. Once posted, same
details need to be displayed below when user clicks the Submit button. (6 Marks)
Ans) Here's the PHP code that will handle the **POST request** from the registration form
and display the submitted data below the form when the user clicks the **Submit** button.
```php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
margin-bottom: 20px;
}
input {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form method="POST" action="">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required><br>
<label for="website">Website:</label>
<input type="url" id="website" name="website" required><br>
<h2>Your Input:</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$website = htmlspecialchars($_POST['website']);
### **Explanation:**
1. **HTML Form:**
- The form uses the `POST` method to send data to the same page.
- It has input fields for **name**, **email**, and **website**.
- The `required` attribute ensures that all fields are filled before submission.
2. **PHP Code:**
- We check if the request method is **POST** using
`$_SERVER["REQUEST_METHOD"]`.
- We retrieve and sanitize the input values using `htmlspecialchars()` to prevent XSS attacks.
- The submitted data is displayed below the form when the form is submitted.
echo strlen($x);
echo str_replace("highest","extreme",$x);
Ans) Let me break down the PHP code and its output line by line:
Note that there's no space between 51 and "BITS" because the two echo statements don't
include any spacing between them.
Q.14. You are working on a project named “The Employee Hub”. Your project manager has
asked to design the HTML page that meets the following requirements
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
</form>
</body>
</html>
```
This is a basic HTML form that matches what's shown in the image:
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</form>
</body>
</html>
```
This meets the 1-mark requirement for including the form method to post to a PHP server.
C) Here's the code to find age based on the user's date of birth (2 marks):
```html
<!DOCTYPE html>
<html>
<head>
<script>
function calculateAge() {
// Calculate age
age--;
return false;
</script>
</head>
<body>
<div id="result"></div>
</form>
</body>
</html>
```
This meets the 2-mark requirement for calculating age based on date of birth.
D) Here's the code to print the user's age in Years, Months, and Days (1 mark):
```html
<!DOCTYPE html>
<html>
<head>
<script>
function calculateAge() {
parts[0] - 1, parts[1]);
if (days < 0) {
months--;
days += 30;
}
if (months < 0) {
years--;
months += 12;
// Display result
document.getElementById('result').innerHTML =
"Age is: " + years + " Years, " + months + " Months, " + days + " Days";
return false;
</script>
</head>
<body>
<div id="result"></div>
</form>
</body>
</html>
```
Q.15. Create an XML document for the below given tree structure. Also create a
corresponding XML Schema (XSD) for the same. (8 marks)
<?php
$num3=10;
function static_var()
{
global $num3;
static $num1=3;
$num2=6;
$num1++;
$num2++;
$num3--;
echo "Num 1: " . $num1 . "\n";
echo "Num 2: " . $num2 . "\n";
echo "Num 3: " . $num3 . "\n";
}
for($i=0;$i<2;$i++)
static_var();
?>
7. Ans) What is the output of the following PHP code? [6 marks]
<?php
$num3=10;
function static_var()
{
global $num3;
static $num1=3;
$num2=6;
$num1++;
$num2++;
$num3--;
echo "Num 1: " . $num1 . "\n";
echo "Num 2: " . $num2 . "\n";
echo "Num 3: " . $num3 . "\n";
}
for($i=0;$i<2;$i++)
static_var();
?>
8. Design the backend for a PHP-MYSQL based application for online registration at an
International Conference, whose requirements are given below. (10 marks)
Registration Page contains the following fields: id (auto increment field), name,
designation, highest qualification, institution, mobile number, registration fees and city.
Registration fees are as follows:
INR 3000 for student (UG / PG / PhD Scholar)
INR 6000 for Academician / Researcher
INR 7500 for Industry Professional
I. Write PHP code to:
a. Create ‘conferencedb’ database
b. Create ‘registration’ table, with the fields mentioned for the registration page. Assume
appropriate datatypes for the field values.
c. Insert two rows of data into the database.
d. Write the connection string to connect to database. Make suitable assumptions regarding
the login credentials.
I'll help you create the complete backend solution for the International Conference registration
system.
```php
<?php
// Connection credentials
$servername = "localhost";
$username = "root";
$password = "";
// a. Create database
$conn = new mysqli($servername, $username, $password);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE DATABASE IF NOT EXISTS conferencedb";
if ($conn->query($sql) === TRUE) {
echo "Database created successfully\n";
} else {
echo "Error creating database: " . $conn->error;
}
// b. Create table
$sql = "CREATE TABLE IF NOT EXISTS registration (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
designation VARCHAR(50) NOT NULL,
highest_qualification VARCHAR(50) NOT NULL,
institution VARCHAR(100) NOT NULL,
mobile_number VARCHAR(15) NOT NULL,
registration_fees DECIMAL(10,2) NOT NULL,
city VARCHAR(50) NOT NULL
)";
$conn->close();
?>
```
II. Here are the SQL queries for the specified conditions:
```sql
-- a. Retrieve rows with PhD qualification and specific designations
SELECT *
FROM registration
WHERE highest_qualification = 'phd'
AND designation IN ('associate professor', 'professor');
2. Table Fields:
- id (INT, AUTO_INCREMENT, PRIMARY KEY)
- name (VARCHAR(100))
- designation (VARCHAR(50))
- highest_qualification (VARCHAR(50))
- institution (VARCHAR(100))
- mobile_number (VARCHAR(15))
- registration_fees (DECIMAL(10,2))
- city (VARCHAR(50))
4. SQL Queries:
- Used LOWER() function for case-insensitive city comparison
- Used IN clause for multiple designation options
- Used appropriate aggregate functions (SUM, COUNT)