December 2023 [Free] Solved BCS-053 Web Programming
Hey there! Welcome to KnowledgeKnot! Don't forget to share this with your friends and revisit often. Your support motivates us to create more content in the future. Thanks for being awesome!
1. (a) What is WAP? How does WAP model work? Explain it with diagram. [Marks: 5]
Answer:
Wireless Application Protocol (WAP):
WAP is a standardized protocol that allows mobile devices, such as cell phones and personal digital assistants (PDAs), to access internet-based information and services. It bridges the gap between mobile devices with limited resources and the complexity of accessing web content.
Working of WAP Model:
The WAP model includes several components working together to deliver web services to mobile devices:
- Mobile Device: Equipped with a WAP browser, it generates requests for web-based content.
- WAP Gateway: Acts as a bridge between the mobile device and the web server. It converts requests from the WAP format to HTTP for communication with the server and translates responses back to WAP format.
- Web Server: Hosts the requested content, often formatted in WML (Wireless Markup Language) or XHTML Mobile Profile, optimized for mobile devices.
WAP follows a layered architecture similar to the OSI model, ensuring efficient communication between components. A typical interaction involves the mobile device sending a request via the WAP gateway, which retrieves data from the web server and delivers it back to the device in a format it can display.
Diagram:
Mobile Device -> WAP Gateway -> Internet -> Web Server
1. (b) Explain the uses of any five HTML elements which are used in form design. [Marks: 5]
Answer:
- <input>: This versatile element creates form controls such as text fields, password fields, checkboxes, radio buttons, and submit buttons, allowing user input in various formats.
- <textarea>: Used for multi-line text input, it is ideal for collecting detailed comments or feedback from users.
- <select>: Generates drop-down menus, enabling users to select a single option or multiple options based on its configuration.
- <label>: Associates descriptive text with form controls, improving accessibility and user experience, especially for screen readers.
- <button>: Creates clickable buttons that can trigger form submissions or execute JavaScript functions, offering a flexible way to handle user actions.
1. (c) What is Document Object Model (DOM)? Draw the node tree of an HTML DOM. [Marks: 3]
Answer:
Document Object Model (DOM):
The DOM is a programming interface for HTML and XML documents. It represents the document as a structured tree of objects (nodes) that can be manipulated using programming languages like JavaScript. Each node corresponds to a part of the document, such as elements, attributes, or text.
Developers use the DOM to dynamically modify content, style, and structure of web pages, allowing interactive and responsive user experiences.
Node Tree of an HTML DOM:
<html>
├── <head>
└── <body>
├── <div>
└── <p>
1. (d) What is AJAX? List out the differences between AJAX and JavaScript. [Marks: 4]
Answer:
AJAX (Asynchronous JavaScript and XML):
AJAX is a technique for creating fast, dynamic, and interactive web applications. It enables the exchange of data with a web server without requiring the full page to reload, improving user experience and performance. It often uses XML, JSON, or plain text for data transmission.
Key Differences Between AJAX and JavaScript:
- Purpose: AJAX is used for asynchronous server communication, while JavaScript is a general-purpose scripting language for client-side interactivity.
- Reloading: AJAX updates parts of a web page without refreshing it, while JavaScript typically requires page reloads unless combined with AJAX.
- Scope: AJAX focuses on server requests and data manipulation, whereas JavaScript can handle DOM manipulation, event handling, and more.
- Dependency: AJAX relies on JavaScript for implementation, but JavaScript operates independently of AJAX.
- Format: AJAX often uses JSON or XML for data exchange, whereas JavaScript primarily deals with the DOM and browser environment.
1. (e) What is CSS? Explain embedded style sheets with HTML example. [Marks: 3]
Answer:
CSS (Cascading Style Sheets):
CSS is a style sheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and other visual aspects of a web page. CSS enables developers to separate content from design, improving maintainability and flexibility.
Embedded Style Sheets:
Embedded style sheets are defined within the <style> element in the <head> section of an HTML document. This method allows the styling of the web page without linking to an external CSS file.
HTML Example of Embedded Style Sheets:
<html>
<head>
<style>
body {
background-color: lightblue;
color: black;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of an embedded style sheet.</p>
</body>
</html>
2. (a) What is DTD? Explain its role in XML. [Marks: 5]
Answer:
DTD (Document Type Definition):
DTD is a set of rules that define the structure and elements of an XML document. It specifies what elements and attributes are allowed in a document, their relationships, and their order. DTDs help ensure that an XML document is both valid and well-formed.
Role of DTD in XML:
- Validation: DTD ensures that the XML document adheres to a defined structure and contains valid data.
- Data Consistency: DTD helps maintain consistency by defining required elements and their relationships.
- Interoperability: DTD allows different systems to exchange XML data that follows the same structural rules.
Example of DTD Declaration:
<!DOCTYPE note [
<!ELEMENT note (to, from, heading, body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
2. (b) What is the need of server-side scripting? How is it different from client-side scripting? [Marks: 5]
Answer:
Need for Server-Side Scripting:
Server-side scripting is used to generate dynamic content on a web page. It allows web servers to execute scripts, process data, and interact with databases before sending the content to the client's browser. This enables personalized user experiences, secure data handling, and greater functionality.
Differences between Server-Side and Client-Side Scripting:
- Execution Location: Server-side scripts are executed on the web server, while client-side scripts are executed on the user's browser.
- Security: Server-side scripting is more secure, as sensitive data is processed on the server and not exposed to the client, unlike client-side scripting.
- Performance: Server-side scripts may introduce some delay due to server processing time, while client-side scripts run faster as they are executed directly in the user's browser.
- Functionality: Server-side scripting can access databases and perform complex operations, while client-side scripting is mainly used for UI interactivity and validation.
3. (a) What are cookies? How do you create and set the life of a cookie in a JSP program? [Marks: 5]
Answer:
Cookies:
Cookies are small pieces of data stored by a web browser on the client side. They are used to remember user preferences, session information, and other details between visits to a website. Cookies help provide a personalized experience without requiring the user to re-enter information.
Creating and Setting the Life of a Cookie in JSP:
To create and set a cookie in a JSP program, the `Cookie` class is used. You can also set the expiration time of the cookie by specifying the age in seconds. If the age is not set, the cookie becomes a session cookie, which expires when the browser is closed.
<%
// Create a cookie
Cookie userCookie = new Cookie("username", "john_doe");
// Set the life of the cookie to 1 day (86400 seconds)
userCookie.setMaxAge(86400);
// Add the cookie to the response
response.addCookie(userCookie);
%>
3. (b) Design a WML program to display username and password. Make the necessary assumptions. [Marks: 3]
Answer:
Assumptions: The user will be required to enter a username and password, which will be displayed upon submission.
WML Program:
<wml>
<card id="loginCard" title="Login">
<p>
<b>Enter Username:</b><br/>
<input name="username" type="text" size="20"/>
</p>
<p>
<b>Enter Password:</b><br/>
<input name="password" type="password" size="20"/>
</p>
<p>
<anchor>
<go href="#displayCard"/>
<prev/>
<send form="loginForm"/>
</anchor>
</p>
</card>
<card id="displayCard" title="Display">
<p>
<b>Your username is:</b> <var name="username"/>
</p>
<p>
<b>Your password is:</b> <var name="password"/>
</p>
</card>
</wml>
3. (c) Why do we use GET and POST methods of HTTP protocol? [Marks: 2]
Answer:
GET Method:
The GET method is used to send data to the server through the URL, typically for requesting information or retrieving resources. It appends data to the URL and is visible to the user in the browser's address bar. It is commonly used for non-sensitive data retrieval.
POST Method:
The POST method sends data in the body of the request, making it suitable for submitting sensitive or large amounts of data (e.g., passwords or file uploads). Unlike GET, POST does not expose data in the URL, providing better security and privacy. It is mainly used for actions that modify server-side data.
4. (a) Differentiate between the following: [Marks: 4]
Answer:
1. HTML vs. XML:
- HTML: A markup language designed to display data and create web pages. It is focused on presentation and display.
- XML: A markup language designed to store and transport data. It is focused on structure and transportability.
2. Static vs. Dynamic Web Pages:
- Static Web Pages: Fixed content that does not change unless manually updated. They are rendered the same for all users.
- Dynamic Web Pages: Content that changes based on user interaction or data, typically generated by server-side scripting or databases.
4. (b) Explain the following WML elements: [Marks: 3]
Answer:
1. <wml>Element:
The <wml> element is the root element in a WML document. It is used to define the entire structure of a WML page and contains all other elements.
2. <card> Element:
The <card> element represents a single screen of a WML document. It can contain text, input elements, and links. A WML document can have multiple cards, each representing a different screen of the application.
3. <anchor> Element:
The <anchor> element is used to define a link in WML. It enables navigation between different cards or external resources by specifying a destination using the <go> element.
4. (c) Explain the Box model of HTML with the help of a diagram. [Marks: 3]
Answer:
The Box Model in HTML is a fundamental concept used to design and layout web pages. It defines the rectangular boxes that are generated for elements in the document tree. Each HTML element can be thought of as a box with four distinct parts:
- Content: This is the actual content of the element, such as text or an image.
- Padding: Space between the content and the border. It is used to add inner space inside the element.
- Border: A border around the padding (if any). It is used to visually separate elements.
- Margin: Space outside the border. It separates the element from other elements on the page.
Diagram of Box Model:
+-----------------------------+
| Margin |
| +---------------------+ |
| | Border | |
| | +---------------+ | |
| | | Padding | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +---------------+ | |
| +---------------------+ |
+-----------------------------+
5. (a) Write a JSP program to fetch the record of the student having attributes such as name, programme, course code, and grade from the table stored in the database. [Marks: 6]
Answer:
The following JSP program fetches student data from a database and displays it in an HTML table format:
<%@ page import="java.sql.*" %>
<html>
<head><title>Student Records</title></head>
<body>
<h2>Student Information</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Programme</th>
<th>Course Code</th>
<th>Grade</th>
</tr>
<%
// Database connection
String url = "jdbc:mysql://localhost:3306/school";
String username = "root";
String password = "password";
Connection con = DriverManager.getConnection(url, username, password);
String query = "SELECT name, programme, course_code, grade FROM students";
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(query);
// Display records
while(rs.next()) {
%>
<tr>
<td><%= rs.getString("name") %></td>
<td><%= rs.getString("programme") %></td>
<td><%= rs.getString("course_code") %></td>
<td><%= rs.getString("grade") %></td>
</tr>
<%
}
con.close();
%>
</table>
</body>
</html>
5. (b) Explain the method getElementById() in JavaScript with the help of an example. [Marks: 4]
Answer:
The getElementById() method in JavaScript is used to select an HTML element by its unique ID. Once the element is selected, you can manipulate its properties or content.
Syntax:
document.getElementById("elementID");
Example:
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
<script type="text/javascript">
function changeText() {
document.getElementById("demo").innerHTML = "Hello, World!";
}
</script>
</head>
<body>
<p id="demo">Click the button to change this text.</p>
<button onclick="changeText()">Change Text</button>
</body>
</html>
In this example, when the user clicks the button, the changeText() function is triggered. It selects the <p> element with the ID "demo" and changes its text to "Hello, World!".
