# GTU IT Sem 5 Web Development (WD) WINTER 2021 Paper Solution | 3151606

Q1.

(a) Define term : WWW (3 marks)

  • WWW stands for World Wide Web. It's a system of linked web pages and various content you access on the internet.
  • These pages can contain text, images, videos, and other types of multimedia content.
  • When you open your web browser, you're essentially tapping into this web of information.
  • Beyond information retrieval, the WWW serves as a platform for communication.

(b) List out any four HTML Tag and describe their functionality. (4 marks)

  1. <div> (Division):
    • Functionality: Container for grouping and structuring content without specific styling or semantic meaning.
  2. <a> (Anchor):
    • Functionality: Creates hyperlinks for linking to other web pages, documents, or resources.
  3. <p> (Paragraph):
    • Functionality: Defines a paragraph, separating blocks of text.
  4. <img> (Image):
    • Functionality: Embeds images into the web page, displaying visual content.

(c) Elaborate HTTP Protocol Header, HTTP Request and HTTP Response (7 marks)

1. HTTP Protocol Header:

The HTTP protocol header is a set of rules that govern the communication between a client (e.g., a web browser) and a server. It is a crucial part of the HTTP protocol as it contains metadata about the HTTP message being sent. The header is composed of key-value pairs, where each key provides information about the associated value.

Common components of the HTTP header include:

  • Request/Response Line: Specifies whether it's a request or a response, along with the HTTP version.
  • Headers: These include additional information about the message, such as:
    • Host: The domain name of the server.
    • User-Agent: Information about the client making the request.
    • Accept: The types of media that the client can process.
    • Content-Type: The media type of the resource in the body of the request or response.
  • Cookies: Information stored on the client-side and sent with each subsequent request.

2. HTTP Request:

An HTTP request is a message sent by the client to request a particular action from the server. It comprises several parts:

  • Request Line: Specifies the HTTP method (e.g., GET, POST) and the target resource (Uniform Resource Identifier, URI).
  • Request Headers: Provide additional information about the request, such as:
    • Accept: The expected content types.
    • Authorization: Credentials for access control.
    • Content-Type: The media type of the request body.
  • Request Body (Optional): Some requests, like POST or PUT, may include data in the body. For example, when submitting a form or sending JSON data.

3. HTTP Response:

An HTTP response is a message sent by the server to fulfill the client's request. It also consists of several parts:

  • Status Line: Contains the HTTP version, a status code (indicating the result of the request), and a corresponding status message.
  • Response Headers: Provide additional information about the response, similar to request headers. Common headers include:
    • Content-Type: The media type of the response body.
    • Content-Length: The size of the response body in bytes.
    • Server: Information about the server software.
  • Response Body (Optional): Contains the requested data or a message. For example, HTML content for a web page or JSON data.

Q2.

(a) Define term: SEO (3 marks)

SEO (Search Engine Optimization):

SEO, which stands for Search Engine Optimization, is a set of practices and strategies aimed at improving the visibility and ranking of a website or web page on search engine results pages (SERPs).

The primary goal of SEO is to enhance the likelihood of a website being found by users when they search for relevant keywords or phrases on search engines like Google, Bing, or Yahoo.

It involves practices such as keyword optimization, content improvement, and technical enhancements. The goal is to increase organic traffic by ranking higher for relevant search queries.

(b) Write full form of CSS. Describe types and advantages of CSS.

Full Form of CSS:

  • CSS: Cascading Style Sheets

Types of CSS:

  1. Inline CSS:
    • Description: Style applied directly within the HTML element using the style attribute.
    • Example: css <p style="color: blue;">This is a blue paragraph.</p
  2. Internal (or Embedded) CSS:
    • Description: Style defined within the HTML document using the <style> tag in the document's <head> section.
    • Example: html <head> <style> p { color: green; } </style> </head>
  3. External CSS:
    • Description: Style stored in a separate external CSS file and linked to the HTML document using the <link> tag.
    • Example: css <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>

Advantages of CSS:

  • Consistent Styling
  • Modern looking UI
  • Responsive Design
  • Reusability of Code

(c) Create HTML Form for BE 1st Year Student registration which includes all personal details. (7 marks)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>BE 1st Year Student Registration</title>
  </head>
  <body>
    <h2>BE 1st Year Student Registration</h2>

    <form action="#" method="post">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" name="firstName" required />

      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" name="lastName" required />

      <label for="gender">Gender:</label>
      <select id="gender" name="gender" required>
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
      </select>

      <label for="dob">Date of Birth:</label>
      <input type="date" id="dob" name="dob" required />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />

      <label for="phone">Phone Number:</label>
      <input type="tel" id="phone" name="phone" required />

      <label for="address">Address:</label>
      <textarea id="address" name="address" rows="4" required></textarea>

      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

OR

(c) Explain term: Class, ID, Wild card selectors, Media Queries for CSS (7 marks)

Class in CSS:

  • Definition: A class in CSS is a way to select and style multiple HTML elements with a shared class attribute. It is denoted by a period (.) followed by the class name.
  • Example: css .highlight { color: red; font-weight: bold; } html <p class="highlight">This is a highlighted paragraph.</p>

ID in CSS:

  • Definition: An ID in CSS is a way to uniquely identify and style a specific HTML element. It is denoted by a hash (#) followed by the ID name.
  • Example: css #main-heading { font-size: 24px; color: blue; } html <h1 id="main-heading">Main Heading</h1>

Wildcard Selectors in CSS:

  • Definition: Wildcard selectors (asterisk *) target all HTML elements on a page. They can be used to apply styles universally or as a base reset for consistent styling.
  • Example: css * { margin: 0; padding: 0; box-sizing: border-box; }

Media Queries in CSS:

  • Definition: Media queries in CSS allow styles to be applied based on the characteristics of the device or viewport, such as screen width, height, or orientation. They are commonly used for creating responsive designs.
  • Example: css @media screen and (max-width: 600px) { body { font-size: 14px; } /* Additional styles for smaller screens */ }

Q3.

(a) Define term: Boot Strap for CSS (3 marks)

Bootstrap for CSS:

  • Bootstrap is a popular open-source front-end framework that provides a collection of pre-designed HTML, CSS, and JavaScript components.
  • Bootstrap provides a set of pre-styled components like navigation bars, buttons, forms, and more, allowing developers to easily integrate them into their projects.
  • Bootstrap is designed to ensure consistent appearance and functionality across various web browsers.
  • Faster development, as it eliminates the need to build certain components from scratch.

(b) Write java script function to find maximum value among three different value entered by user. (4 marks)

index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Maximum Value Finder</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h2>Maximum Value Finder</h2>

    <label for="num1">Enter Value 1:</label>
    <input type="number" id="num1" />

    <label for="num2">Enter Value 2:</label>
    <input type="number" id="num2" />

    <label for="num3">Enter Value 3:</label>
    <input type="number" id="num3" />

    <button onclick="findMax()">Find Maximum</button>

    <p id="result"></p>
  </body>
</html>

script.js file

function findMax() {
  // Get input values
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  var num3 = parseFloat(document.getElementById("num3").value);

  // Find maximum value
  var max = Math.max(num1, num2, num3);

  // Display the result
  document.getElementById("result").innerHTML = "Maximum Value: " + max;
}

(c) Develop a PHP Code which read stock code and display stock information when user submit page.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Stock Information</title>
</head>
<body>

  <h2>Stock Information</h2>

  <form method="post" action="stock.php">
    <label for="stockCode">Enter Stock Code:</label>
    <input type="text" id="stockCode" name="stockCode" required>
    <button type="submit">Get Stock Information</button>
  </form>

</body>
</html>

stock.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Stock Information</title>
</head>
<body>

  <h2>Stock Information</h2>

  <?php
  // Associative array with stock information
  $stockData = array(
    'AAPL' => 'Apple Inc.',
    'GOOGL' => 'Alphabet Inc.',
    'MSFT' => 'Microsoft Corporation'
  );

  // Check if form is submitted
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Retrieve the entered stock code
    <math>enteredStockCode = strtoupper(</math>_POST['stockCode']);

    // Check if the entered stock code exists in the array
    if (array_key_exists(<math>enteredStockCode, </math>stockData)) {
      <math>stockName = </math>stockData[$enteredStockCode];
      echo "<p>Stock Code: $enteredStockCode</p>";
      echo "<p>Stock Name: $stockName</p>";
    } else {
      echo "<p>Invalid Stock Code</p>";
    }
  }
  ?>

</body>
</html>

OR

Q3. (a) Define term: JSON (3 marks)

JSON, or JavaScript Object Notation, is a text-based data format that represents structured data in a key-value pair format. JSON is often used to transmit data between a server and a web application, as well as for configuration files and data storage.

  • JSON is language-independent
  • JSON is easy for humans to read and write

Example:

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

(b) Describe any four php array function. (4 marks)

  1. count() Function:
    • Description: The count() function is used to count the number of elements in an array.
    • Example: php $fruits = array('apple', 'orange', 'banana'); <math>numberOfFruits = count(</math>fruits); echo "Number of Fruits: $numberOfFruits"; // Output: Number of Fruits: 3
  2. array_push() Function:
    • Description: The array_push() function adds one or more elements to the end of an array.
    • Example: php $colors = array('red', 'blue'); array_push($colors, 'green', 'yellow'); print_r($colors); // Output: Array ( [0] => red [1] => blue [2] => green [3] => yellow )
  3. array_pop() Function:
    • Description: The array_pop() function removes and returns the last element from an array.
    • Example: php $numbers = array(1, 2, 3, 4); <math>lastNumber = array_pop(</math>numbers); echo "Last Number: $lastNumber"; // Output: Last Number: 4
  4. array_key_exists() Function:
    • Description: The array_key_exists() function checks if a specific key exists in an array.
    • Example: php $student = array('name' => 'John', 'age' => 20, 'grade' => 'A'); if (array_key_exists('age', $student)) { echo "Age exists in the student array."; } else { echo "Age does not exist in the student array."; } // Output: Age exists in the student array.

(c) Develop a PHP Code which read employee code, year and month. On submit button press, it generates salary slip for that month-year for that employee. (7 marks)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Salary Slip Generator</title>
  </head>
  <body>
    <h2>Salary Slip Generator</h2>

    <form method="post" action="generate_salary_slip.php">
      <label for="employeeCode">Employee Code:</label>
      <input type="text" id="employeeCode" name="employeeCode" required />

      <label for="year">Year:</label>
      <input type="number" id="year" name="year" required />

      <label for="month">Month:</label>
      <select id="month" name="month" required>
        <option value="1">January</option>
        <option value="2">February</option>
        <!-- Add more months as needed -->
      </select>

      <button type="submit">Generate Salary Slip</button>
    </form>
  </body>
</html>

generate_salary_slip.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Salary Slip</title>
</head>
<body>

  <h2>Salary Slip</h2>

  <?php
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Retrieve form data
    <math>employeeCode = </math>_POST['employeeCode'];
    <math>year = </math>_POST['year'];
    <math>month = </math>_POST['month'];

    // Generate salary slip details
    $basicSalary = 5000;
    $allowances = 1000;
    $deductions = 500;

    // Calculate total salary
    <math>totalSalary = </math>basicSalary + <math>allowances - </math>deductions;
  ?>
    <table>
      <tr>
        <th>Employee Code</th>
        <td><?php echo $employeeCode; ?></td>
      </tr>
      <tr>
        <th>Year</th>
        <td><?php echo $year; ?></td>
      </tr>
      <tr>
        <th>Month</th>
        <td><?php echo date("F", mktime(0, 0, 0, $month, 1)); ?></td>
      </tr>
      <tr>
        <th>Basic Salary</th>
        <td><?php echo $basicSalary; ?></td>
      </tr>
      <tr>
        <th>Allowances</th>
        <td><?php echo $allowances; ?></td>
      </tr>
      <tr>
        <th>Deductions</th>
        <td><?php echo $deductions; ?></td>
      </tr>
      <tr>
        <th>Total Salary</th>
        <td><?php echo $totalSalary; ?></td>
      </tr>
    </table>
  <?php
  }
  ?>

</body>
</html>

Q4.

(a) Interpret PHP Function: Implode and Explode (3 marks)

In PHP, implode and explode are two functions used to handle strings and arrays.

  1. implode Function:

    • The implode function is used to join elements of an array into a single string. It takes two parameters: the glue string and the array.

    Example:

    $colors = array('red', 'green', 'blue');
<math>result = implode(', ', </math>colors);
echo $result;

    Output:

    red, green, blue

  2. explode Function:

  • The explode function is used to split a string into an array. It takes two parameters: the delimiter string and the input string. Example:

    $text = "apple, orange, banana";
<math>fruits = explode(', ', </math>text);
print_r($fruits);

    Output:

    Array
(
    [0] => apple
    [1] => orange
    [2] => banana
)

    (b) Differentiate GET and POST methods. (4 marks)

    CharacteristicGET MethodPOST Method
    Data in URLAppended to the URL as parametersIncluded in the http request body, so not visible in URL
    Data LengthLimited by browser and server constraintsTypically allows larger data
    CachingCan be cached and bookmarkedNot cached and cannot be bookmarked
    SecurityLess secure for sensitive dataMore secure for sensitive data
    Use CaseSuitable for retrieving data or navigatingSuitable for submitting sensitive or large data, modifying server-side data

    (c) Prepare a java script solution to validate registration form including email address entered by user.

    index.html file

    <!DOCTYPE html>
<head>
  <title>Registration Form</title>
</head>
<body>

  <h2>Registration Form</h2>
  <form id="registrationForm" onsubmit="return validateForm()">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <br>

        <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>
    <br>

    <input type="submit" value="Register">
  </form>

  <script src="validation.js" />
</body>
</html>

    validation.js file

    function validateForm() {
  var username = document.getElementById("username").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;
  var confirmPassword = document.getElementById("confirmPassword").value;

  // Simple email validation using a regular expression
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    alert("Please enter a valid email address.");
    return false;
  }

  // Basic password confirmation
  if (password !== confirmPassword) {
    alert("Passwords do not match.");
    return false;
  }

  // If all validations pass, the form is submitted
  alert("Registration successful!");
  return true;
}

    OR

    Q.4 (a) Discuss Java script alert, prompt, confirm with example (3 marks)

    1. alert Box:

      • The alert box is used to display a message to the user. It provides an OK button for the user to acknowledge the message.

      Example:

      alert("This is an alert box!");

    2. confirm Box:

      • The confirm box is used to ask the user for confirmation. It displays a message and provides OK and Cancel buttons.

      Example:

      var userConfirmation = confirm("Do you want to proceed?");
if (userConfirmation) {
  console.log("User clicked OK.");
} else {
  console.log("User clicked Cancel.");
}

    3. prompt Box:

      • The prompt box is used to prompt the user to enter some input. It displays a message, an input field, and OK and Cancel buttons.

      Example:

      var userInput = prompt("Please enter your name:", "John Doe");
if (userInput !== null) {
  console.log("User entered: " + userInput);
} else {
  console.log("User clicked Cancel.");
}

    (b) Demonstrate functionality of following java script methods: substring, Slice, getDate, charAt (4 marks)

    substring(): Extracts characters from a string between two specified indices.

    var str = "Hello, World!";
var substrResult = str.substring(0, 5);
console.log("substring:", substrResult);
// OUTPUT - Hello

    slice(): Extracts a section of a string and returns it as a new string.

    var str = "Hello, World!";
var sliceResult = str.slice(7, 12);
console.log("slice:", sliceResult);
// OUTPUT - World

    getDate(): Gets the day of the month from a Date object.

    var currentDate = new Date();
var dayOfMonth = currentDate.getDate();
console.log("getDate:", dayOfMonth);
// OUTPUT - (current day of the month)

    charAt(): Returns the character at a specified index in a string.

    var str = "Hello, World!";
var charResult = str.charAt(7);
console.log("charAt:", charResult);
// OUTPUT - W

(c) Prepare a java script to find whether entered number by user is Prime or Not. (7 marks)

function isPrime(number) {
  if (number <= 1) return false; // Number 1 or less than 1 can't be a PRIME number
  for (var i = 2; i <= Math.sqrt(number); i++) {
    if (number % i === 0) return false;
  }
  return true;
}

// Example usage:
var inputNumber = 17; // Replace with the number you want to check
console.log(
  isPrime(inputNumber)
    ? inputNumber + " is a prime number."
    : inputNumber + " is not a prime number."
);

Function isPrime:

  • The function takes a number as an argument (number).
  • It checks if the number is less than or equal to 1. If so, it returns false because numbers less than or equal to 1 are not prime.
  • It then uses a for loop to iterate from 2 to the square root of the given number.
  • Inside the loop, it checks if the number is divisible evenly by any value within the loop (number % i === 0). If so, it means the number has a factor other than 1 and itself, so the function returns false.
  • If no factors are found, the function returns true, indicating that the number is prime.

Q5.

Q5. (Completely same as Q5 in Winter 2022 paper)