Assignment

Web Programming
(3160713)

B.E. Semester 6
Computer Engineering

Directorate of Technical Education, Gandhinagar,

Gujarat
Instructions:
1. Theory Assignment solution should be original and can be submitted in handwritten/softcopy
format.
2. The Assignment should be submitted on day of term work submission.
3. Total marks will be scaled down to 10 for Progressive Assessment.
4. The theory assignment will be evaluated based on factors like correctness and originality
of the answers, necessary detailing, presentation of answers, use of appropriate examples
and timely submission.
Assignment – Course Outcome matrix

Course Outcomes (COs):

CO-1: Use the various HTML tags with appropriate styles to display the various types of
contents effectively.

CO-2: Develop the dynamic web pages using HTML, CSS and JavaScript applying web design
principles to make pages effective.

CO-3: Develop the server side PHP scripts using various features for creating customized web
services.

CO-4: Write the server side scripts for designing web based services with database connectivity.

CO-5: Develop a web application using advanced web programming features including AJAX and JQuery
using concepts of Web API.

Student has to individually carry out following assignments.

Sr. Description CO
1 Explain client server architecture. 1
2 Explain web design issues. 1
3 What is frame set? Explain the use of frame set in web site design with proper 1,2
example.
4 List and Explain types of CSS with Example. 2
5 Explain pop-up boxes in JavaScript with example. 2
6 Explain Callbacks in Java Script. 2
7 Explain event handling in JavaScript with proper example. 2
8 Explain State Management in PHP using query string. 3
9 Explain the implementation of CRUD operations using PHP. 3,4
10 What is AJAX? How AJAX works? 5
11 What is JQuery? Explain JQuery Syntax. 5
12 Explain JQuery selectors with example. 5
Government Engineering College, Bhavnagar Web Programming (3160713)

ASSIGNMENT

1. Explain client server architecture.

Ans. Client-server architecture is a computing model that divides tasks between two types
of specialized programs: clients and servers, which communicate over a network. The
client, typically a user's device like a computer or smartphone, requests services or
resources from the server. The server, a powerful computer or software application, fulfills
these requests by processing them and providing the necessary data or functionality.

Clients initiate communication by sending requests to servers, which then process these
requests and return the requested information. This model allows for efficient distribution
of tasks, as servers are designed to handle multiple client requests simultaneously.
Additionally, it promotes scalability, as additional clients can be easily accommodated by
adding more server resources.

One of the key advantages of client-server architecture is its flexibility. Clients and servers
can run on different types of hardware and operating systems, enabling interoperability
across diverse environments. Furthermore, it enhances security by centralizing data storage
and access control within the server, reducing the risk of unauthorized access or data loss.

Overall, client-server architecture forms the backbone of modern networked computing,

powering a wide range of applications and services, from web browsing to online gaming
to cloud computing.

2. Explain web design issues.

Ans. Web design encompasses various issues that designers face when creating websites to
ensure optimal user experience, functionality, and visual appeal. One significant issue is
responsive design, which involves designing websites to adapt seamlessly to different
devices and screen sizes, ensuring consistency and usability across desktops, tablets, and
smartphones.

Accessibility is another critical concern, focusing on making websites usable by individuals

with disabilities, such as those using screen readers or alternative input devices. Designers
must adhere to accessibility standards and guidelines to ensure that all users can navigate
and interact with the content effectively.

210210107062 1
Government Engineering College, Bhavnagar Web Programming (3160713)

Performance optimization is also vital to minimize page loading times and enhance user
engagement. Designers must optimize images, code, and other elements to improve website
speed and responsiveness, considering factors like caching, compression, and minification.

Security is a fundamental issue in web design, involving protecting websites from threats
like hacking, data breaches, and malware. Designers must implement security measures
such as SSL encryption, secure authentication, and regular software updates to safeguard
sensitive information and maintain user trust.

Additionally, usability and user experience design focus on creating intuitive navigation,
clear layout, and engaging content to enhance user satisfaction and retention. By addressing
these and other issues, web designers can create effective websites that meet the needs of
both clients and users.

3. What is frame set? Explain the use of frame set in web site design with
proper example.
Ans. A frameset is an HTML element used to create a layout that divides a web page into
multiple independent sections, or frames, each containing its own HTML document.
Framesets were commonly used in early web design to achieve layouts with multiple
sections that could be scrolled independently or updated separately.

For example:

<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
<noframes>
<body>
This page requires a browser that supports frames.

210210107062 2
Government Engineering College, Bhavnagar Web Programming (3160713)

</body>
</noframes>
</frameset>
</html>

In this example, the `<frameset>` element creates two columns, with the first column
occupying 25% of the width and the second column occupying 75%. Within the frameset,
there are two `<frame>` elements, each specifying a separate HTML document to be loaded
into the frame. The `src` attribute of each `<frame>` element points to the HTML files
containing the menu and content of the website, respectively.

When a user visits the webpage, the browser displays the content of the `menu.html` file in
the left frame and the content of the `content.html` file in the right frame. This allows for a
consistent navigation menu to be displayed while the main content of the website changes
based on user interactions, without needing to reload the entire page.

4. List and Explain types of CSS with Example.

Ans. CSS (Cascading Style Sheets) is a powerful styling language used to control the
presentation and layout of HTML documents. There are several types of CSS, each serving
different purposes. Here are some common types:

(i) Inline CSS:

Inline CSS involves styling HTML elements directly within the HTML tags using the
`style` attribute. It overrides any external or internal styles defined for the element.

Example:
<p style="color: red; font-size: 16px;">This is a paragraph with inline CSS styling.</p>

(ii) Internal CSS:

Internal CSS is defined within the `<style>` element in the `<head>` section of an HTML
document. It applies styles to elements within that specific HTML document.

Example:
<html>

210210107062 3
Government Engineering College, Bhavnagar Web Programming (3160713)

<head>
<style>
p{
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS styling.</p>
</body>
</html>

3. External CSS:
External CSS is defined in a separate CSS file and linked to the HTML document using
the `<link>` element. It allows for the separation of content and presentation, making styles
reusable across multiple HTML pages.

Example (style.css):
/* style.css */
p{
color: green;
font-size: 20px;
}

(index.html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

210210107062 4
Government Engineering College, Bhavnagar Web Programming (3160713)

<p>This is a paragraph with external CSS styling.</p>

</body>
</html>

5. Explain pop-up boxes in JavaScript with example.

Ans. Pop-up boxes in JavaScript are used to interact with users by displaying alerts,
confirming actions, or prompting for input. There are three types of pop-up boxes in
JavaScript: `alert`, `confirm`, and `prompt`.

(i) Alert Box:

The `alert` box is used to display a message to the user. It typically contains information
or a notification and provides an "OK" button for the user to acknowledge the message.

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

(ii) Confirm Box:

The `confirm` box is used to confirm or cancel an action. It displays a message with "OK"
and "Cancel" buttons. It returns `true` if the user clicks "OK" and `false` if they click
"Cancel".

Example:
var result = confirm("Do you want to proceed?");
if (result) {
// User clicked OK
console.log("User confirmed");
} else {
// User clicked Cancel
console.log("User canceled");
}

(iii) Prompt Box:

210210107062 5
Government Engineering College, Bhavnagar Web Programming (3160713)

The `prompt` box is used to prompt the user for input. It displays a message along with a
text input field. It returns the text entered by the user or `null` if they click "Cancel".

Example:
var name = prompt("Please enter your name:", "");
if (name != null && name != "") {
console.log("Hello, " + name + "!");
} else {
console.log("User canceled or did not enter a name.");
}

These pop-up boxes are useful for gathering user input, confirming actions, or providing
important notifications. However, they should be used judiciously to avoid interrupting the
user experience excessively.

6. Explain Callbacks in Java Script.

Ans. In JavaScript, a callback is a function that is passed as an argument to another function
and is executed after a particular task or event has occurred. Callbacks are commonly used
in asynchronous programming, where tasks may take some time to complete, such as
fetching data from a server or handling user interactions.

Example:

function fetchData(url, callback) {

// Simulate fetching data from a server
setTimeout(function() {
var data = "Data fetched from " + url;
// Call the callback function with the fetched data
callback(data);
}, 2000); // Simulate a delay of 2 seconds
}

210210107062 6
Government Engineering College, Bhavnagar Web Programming (3160713)

function handleData(data) {
console.log("Received data:", data);
}

fetchData("https://example.com/api/data", handleData);
```

In this example:
• The `fetchData` function takes two parameters: `url` and `callback`. It simulates
fetching data from a server after a delay of 2 seconds using `setTimeout`.
• Once the data is fetched, it calls the `callback` function and passes the fetched data
as an argument.
• The `handleData` function is defined separately as a callback. It receives the
fetched data and logs it to the console.
• Finally, the `fetchData` function is called with the URL and the `handleData`
function as arguments.

Callbacks allow us to define what should happen after a certain task is completed, making
it possible to write asynchronous code in a more organized and readable manner. They are
essential in scenarios where we need to wait for tasks like data retrieval, user input, or event
handling to finish before executing further actions.

7. Explain event handling in JavaScript with proper example.

Ans. Event handling in JavaScript involves responding to user actions or events, such as
mouse clicks, keyboard inputs, or page loading. It allows developers to create interactive
web applications by executing code in response to these events.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Event Handling Example</title>
<script>

210210107062 7
Government Engineering College, Bhavnagar Web Programming (3160713)

function handleClick() {
// Change the text content of the paragraph
document.getElementById("output").textContent = "Button clicked!";
}

function handleKeyPress(event) {
// Check if the pressed key is Enter
if (event.key === "Enter") {
// Change the text content of the paragraph
document.getElementById("output").textContent = "Enter key pressed!";
}
}
</script>
</head>
<body>
<button onclick="handleClick()">Click Me</button>
<input type="text" onkeypress="handleKeyPress(event)">

<p id="output">Output will appear here.</p>

</body>
</html>

In this example:
• We define two JavaScript functions: `handleClick` to handle the click event of the
button, and `handleKeyPress` to handle the key press event of the input field.
• Inside the `handleClick` function, we select the `<p>` element with the id "output"
using `document.getElementById` and change its text content to "Button clicked!".
• Inside the `handleKeyPress` function, we check if the pressed key is Enter using
`event.key === "Enter"`. If true, we change the text content of the `<p>` element
to "Enter key pressed!".
• The button and input field have inline event handlers (`onclick` and `onkeypress`)
that call the respective JavaScript functions when the associated events occur.
• The output is displayed in a `<p>` element with the id "output".

210210107062 8
Government Engineering College, Bhavnagar Web Programming (3160713)

8. Explain State Management in PHP using query string.

Ans. State management in PHP using query strings involves passing data between different
web pages by appending parameters to the URL in the form of key-value pairs. This allows
PHP scripts to access the data through the `$_GET` superglobal array.

Example:

(i) Sending Data via Query String:

In the first PHP script (sender.php), we send data to another PHP script (receiver.php)
using a query string appended to the URL.

<!-- sender.php -->

<!DOCTYPE html>
<html>
<head>
<title>Send Data via Query String</title>
</head>
<body>
<?php
// Data to be sent
$name = "John";
$age = 30;

// Constructing the query string

$query_string = "name=" . urlencode($name) . "&age=" . urlencode($age);

// Generating the URL with the query string

$url = "receiver.php?" . $query_string;
?>

<!-- Link to receiver.php with query string -->

210210107062 9
Government Engineering College, Bhavnagar Web Programming (3160713)

<a href="<?php echo $url; ?>">Click here to send data</a>

</body>
</html>

(ii) Receiving Data via Query String:

In the second PHP script (receiver.php), we receive and process the data sent from
sender.php using the `$_GET` superglobal array.

<!-- receiver.php -->

<!DOCTYPE html>
<html>
<head>
<title>Receive Data via Query String</title>
</head>
<body>
<?php
// Accessing data sent via query string
$name = isset($_GET['name']) ? urldecode($_GET['name']) : '';
$age = isset($_GET['age']) ? urldecode($_GET['age']) : '';

// Displaying the received data

echo "<p>Name: $name</p>";
echo "<p>Age: $age</p>";
?>
</body>
</html>

In this example:
- sender.php constructs a query string with the data to be sent (`$name` and `$age`) and
generates a URL containing this query string.

210210107062 10
Government Engineering College, Bhavnagar Web Programming (3160713)

- receiver.php retrieves the data from the query string using the `$_GET` superglobal array
and displays it on the web page.

Using query strings for state management in PHP is straightforward and useful for passing
small amounts of data between pages. However, it's essential to sanitize and validate the
data received from query strings to prevent security vulnerabilities like SQL injection or
cross-site scripting (XSS) attacks.

9. Explain the implementation of CRUD operations using PHP.

Ans. CRUD (Create, Read, Update, Delete) operations are fundamental in database
management systems, allowing users to interact with database records. Below, I'll outline
a simple implementation of CRUD operations using PHP and MySQL.

(i) Connect to the Database:

First, establish a connection to your MySQL database using PHP's `mysqli` extension.

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "mydatabase";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

(ii) Create Records (Create Operation):

210210107062 11
Government Engineering College, Bhavnagar Web Programming (3160713)

Use an HTML form to collect data and insert it into the database.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
?>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
Name: <input type="text" name="name"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>

(iii) Retrieve Records (Read Operation):

Fetch data from the database and display it.

<?php
$sql = "SELECT * FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

210210107062 12
Government Engineering College, Bhavnagar Web Programming (3160713)

while($row = $result->fetch_assoc()) {
echo "Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
}
} else {
echo "0 results";
}
?>

(iv) Update Records (Update Operation):

Allow users to update existing records.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];

$sql = "UPDATE users SET name='$name', email='$email' WHERE id='$id'";

if ($conn->query($sql) === TRUE) {

echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}
}
?>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
ID: <input type="text" name="id"><br>
Name: <input type="text" name="name"><br>
Email: <input type="text" name="email"><br>

210210107062 13
Government Engineering College, Bhavnagar Web Programming (3160713)

<input type="submit" value="Update">

</form>

(v) Delete Records (Delete Operation):

Allow users to delete existing records.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$id = $_POST['id'];

$sql = "DELETE FROM users WHERE id='$id'";

if ($conn->query($sql) === TRUE) {

echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}
}
?>
<form method="post" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
ID: <input type="text" name="id"><br>
<input type="submit" value="Delete">
</form>

This example demonstrates a basic implementation of CRUD operations using PHP and
MySQL. It's important to handle user input securely to prevent SQL injection attacks, and
to validate and sanitize data before interacting with the database. Additionally, consider
implementing error handling and validation to provide a robust user experience.

210210107062 14
Government Engineering College, Bhavnagar Web Programming (3160713)

10. What is AJAX? How AJAX works?

Ans. AJAX (Asynchronous JavaScript and XML) is a web development technique used to
create interactive and dynamic web applications. It allows web pages to send and receive
data from a server asynchronously, without reloading the entire page. This enables a
smoother and more responsive user experience, as only specific parts of the page are
updated as needed.

Here's how AJAX works:

(i) Asynchronous Request:

When a user interacts with a web page, such as clicking a button or submitting a form,
JavaScript code initiates an asynchronous request to the server using the
`XMLHttpRequest` object or the newer `fetch` API. This request is sent in the background,
without blocking the user's interaction with the page.

(ii) Server Processing:

The server receives the AJAX request and processes it, typically by executing server-side
code (e.g., PHP, Python, Node.js) to fetch data from a database, perform calculations, or
handle other tasks.

(iii) Response Generation:

After processing the request, the server generates a response, which can be in various
formats such as HTML, XML, JSON, or plain text, depending on the application's
requirements.

(iv) Data Transfer:

The server sends the response back to the client (web browser) over the network.

(v) Client-Side Handling:

Once the client receives the response, JavaScript code on the web page processes the data
and updates the content of the page dynamically, without requiring a full page reload. This
could involve manipulating the DOM (Document Object Model) to insert new content,
update existing elements, or perform other actions based on the received data.

By leveraging AJAX, web developers can create more interactive and responsive web
applications that provide a richer user experience, similar to desktop applications. AJAX is

210210107062 15
Government Engineering College, Bhavnagar Web Programming (3160713)

commonly used in modern web development frameworks and libraries, such as jQuery,
React, Angular, and Vue.js, which provide convenient APIs for making asynchronous
requests and handling responses.

11. What is JQuery? Explain JQuery Syntax.

Ans. jQuery is a fast, small, and feature-rich JavaScript library that simplifies client-side
scripting in web development. It provides a wide range of utilities and functions to
manipulate HTML documents, handle events, perform animations, and make AJAX
requests, among other tasks. jQuery abstracts away many of the complexities of JavaScript,
making it easier to write concise and efficient code.

The jQuery syntax is designed to be intuitive and easy to use, employing a simple, chainable
API. Here's a breakdown of jQuery syntax:

(i) Selecting Elements:

jQuery uses CSS-style selectors to target HTML elements. For example, `$('p')` selects
all `<p>` elements on the page.

(ii) Chaining Methods:

jQuery methods can be chained together, allowing multiple operations to be performed
on the same set of elements in a single line of code. For example,
`$('p').addClass('highlight').fadeOut('slow')` adds a class to paragraphs and fades them out.

(iii) Manipulating Elements:

jQuery provides methods to manipulate HTML content, attributes, and styles of elements.
For example, `.html()`, `.text()`, `.attr()`, `.addClass()`, `.css()`.

(iv) Handling Events:

jQuery simplifies event handling with methods like `.click()`, `.hover()`, `.on()`, allowing
developers to attach event handlers to elements easily.

Overall, jQuery's concise and expressive syntax streamlines web development and
enhances productivity by reducing the amount of code needed to achieve common tasks.

210210107062 16
Government Engineering College, Bhavnagar Web Programming (3160713)

12. Explain JQuery selectors with example.

Ans. jQuery selectors allow developers to target and manipulate HTML elements using
CSS-style selectors. They are powerful tools for efficiently accessing and modifying
elements on a web page. Here are some common jQuery selectors with examples:

(i) Element Selector:

Selects all elements with a specified tag name.
$('p') // Selects all <p> elements

(ii) ID Selector:
Selects an element with a specific ID attribute.
$('#myElement') // Selects the element with ID "myElement"

(iii) Class Selector:

Selects elements with a specific class name.
$('.myClass') // Selects all elements with class "myClass"

(iv) Multiple Selector:

Selects multiple elements with different selectors.
$('p, .myClass, #myElement') // Selects paragraphs, elements with class "myClass", and
element with ID "myElement"

(v) Attribute Selector:

Selects elements based on attribute values.
$('[type="text"]') // Selects elements with type attribute set to "text"

(vi) Descendant Selector:

Selects elements that are descendants of a specified element.
$('div p') // Selects all <p> elements that are descendants of <div> elements

210210107062 17
Government Engineering College, Bhavnagar Web Programming (3160713)

(vii) Child Selector:

Selects elements that are direct children of a specified element.
$('ul > li') // Selects all <li> elements that are direct children of <ul> elements

(viii) First, Last, Even, Odd Selectors:

Selects specific elements based on their position within a selection.
$('li:first') // Selects the first <li> element
$('li:last') // Selects the last <li> element
$('li:even') // Selects even-indexed <li> elements
$('li:odd') // Selects odd-indexed <li> elements

210210107062 18