diff --git a/.gitignore b/.gitignore
index aafcb34..8b13789 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1 @@
-node_modules/
-.DS_Store
-*.log
+
diff --git a/CSDeptENDSEM.md b/CSDeptENDSEM.md
new file mode 100644
index 0000000..314efbc
--- /dev/null
+++ b/CSDeptENDSEM.md
@@ -0,0 +1,1731 @@
+
+**SANJIVANI COLLEGE OF ENGINEERING**
+**End-Semester Examination**
+**Academic Year: 2024-2025**
+**Course: Web Technology (CO3103)**
+**CS-TY (2022 Pattern, Semester-V)**
+**Answer Sheet**
+
+---
+
+**Que. 1**
+
+**a) It is required to design a registration form which will accept name of the student and branch. There are 3 options for the branch (Computer, Mechanical and Civil). The student should be able to select appropriate branch. The form should contain submit and clear button. When user click on submit button, then form data should be submitted to reg1.php file. Write HTML code for creating a samr form.** (5 Marks)
+
+**Answer:**
+```html
+
+
+
+ Student Registration
+
+
+ Student Registration Form
+
+
+
+```
+
+**b) It is required to have a web page (/sres/coe/coi.html) which should contain 3 links. First link for /sres/coe/target1.html. Second link is for /sres/target2.html while third link is for /sres/coe/kop/target3.html. Write suitable HTML code.** (5 Marks)
+
+**Answer:**
+File: `/sres/coe/coi.html`
+```html
+
+
+
+ COI Links Page
+
+
+ Main Links Page (coi.html)
+ Please find the links below:
+
+
+
+```
+**Note on paths for b):**
+* For `target1.html`: If `coi.html` and `target1.html` are in the same `/sres/coe/` directory, the link is `href="target1.html"`.
+* For `target2.html`: If `coi.html` is in `/sres/coe/` and `target2.html` is in `/sres/`, the relative path from `coi.html` is `href="../target2.html"`.
+* For `target3.html`: If `coi.html` is in `/sres/coe/` and `target3.html` is in `/sres/coe/kop/`, the relative path from `coi.html` is `href="kop/target3.html"`.
+The solution uses these relative paths.
+
+---
+
+**Que. 2**
+
+**a) Design a simple web page that embeds both a video and an audio file using HTML5 elements. Ensure that the video has controls enabled and is set to autoplay, and the audio has controls as well but does not autoplay.** (5 Marks)
+*(Note: The question states "video has controls enabled and is set to autoplay", then "the audio has controls as well but does not autoplay". There might be a slight contradiction, as typically autoplay is often restricted by browsers. I will write the code as requested, but add a note about autoplay restrictions).*
+
+**Answer:**
+```html
+
+
+
+ Multimedia Page
+
+
+ HTML5 Multimedia
+
+ Video Player
+
+
+
+
+
+ Your browser does not support the video tag.
+
+
+ Audio Player
+
+
+
+
+ Your browser does not support the audio element.
+
+
+ Note: Replace "sample_video.mp4", "sample_video.webm", "sample_audio.mp3", and "sample_audio.ogg" with actual paths to your media files.
+
+
+```
+
+**b) Explain significance of SVG images. Write HTML code to create a circle having center at (100,100) and radius 50.** (5 Marks)
+
+**Answer:**
+**Significance of SVG (Scalable Vector Graphics) Images:**
+1. **Scalability:** SVGs are vector-based, meaning they can be scaled up or down to any size without losing quality or becoming pixelated. This is ideal for responsive web design.
+2. **Resolution Independence:** They look sharp on any display, including high-resolution (Retina) screens.
+3. **Small File Sizes:** For simple graphics and illustrations, SVGs can often have smaller file sizes compared to raster formats (like JPG, PNG) especially for graphics with fewer details.
+4. **Editable & Animatable:** SVG code is XML-based, meaning it can be edited with a text editor or graphics software. Its elements can be easily animated using CSS or JavaScript.
+5. **Accessibility & SEO:** Text within SVGs is real text, making it accessible to screen readers and indexable by search engines.
+6. **Styling:** SVGs can be styled with CSS, allowing for dynamic changes to fill colors, strokes, opacity, etc.
+7. **Interactivity:** JavaScript can be used to interact with SVG elements, enabling complex user interactions.
+
+**HTML code to create an SVG circle:**
+```html
+
+
+
+ SVG Circle
+
+
+ SVG Circle Example
+
+
+
+
+```
+
+---
+
+**Que. 3**
+
+**a) Write CSS code to make following changes:** (5 Marks)
+**I) Set color of all h1 heading to "red".**
+**II)Set the font weight of all paragraphs () to bold.**
+**III)Set the background color of the element to darkgray.**
+**IV)Set the margin of all elements that have the class highlight to 20px.**
+**V)Apply a solid border with a width of 1px, color red, and style solid to all elements that are direct children of the class container.**
+
+**Answer:**
+```css
+/* I) Set color of all h1 heading to "red". */
+h1 {
+ color: red;
+}
+
+/* II) Set the font weight of all paragraphs (
) to bold. */
+p {
+ font-weight: bold;
+}
+
+/* III) Set the background color of the element to darkgray. */
+footer {
+ background-color: darkgray;
+}
+
+/* IV) Set the margin of all elements that have the class highlight to 20px. */
+article.highlight {
+ margin: 20px;
+}
+
+/* V) Apply a solid border with a width of 1px, color red, and style solid
+ to all elements that are direct children of the class container. */
+.container > div {
+ border: 1px solid red; /* 'solid' is part of the shorthand 'border' property */
+}
+```
+
+**b) Use HTML to design a form for accepting workshop registration details (name, mobile number, email id, college name) from participants and validate email id using Java Script.** (5 Marks)
+
+**Answer:**
+```html
+
+
+
+
Workshop Registration
+
+
+
+
Workshop Registration
+
+
+
+```
+
+---
+
+**OR (Alternative to Q.3)**
+
+**Que. 4**
+
+**a) Design a CSS class for a button that has a blue background, white text, font size 20px and rounded corners. Write CSS code in an external CSS file and link it to the HTML document.** (5 Marks)
+
+**Answer:**
+
+**1. External CSS File (`styles.css`):**
+```css
+/* styles.css */
+.custom-button {
+ background-color: blue;
+ color: white;
+ font-size: 20px;
+ border-radius: 8px; /* Adjust for desired roundness */
+ padding: 10px 20px; /* Add some padding for better appearance */
+ border: none; /* Remove default border */
+ cursor: pointer; /* Indicate it's clickable */
+ text-align: center;
+}
+
+.custom-button:hover {
+ background-color: darkblue; /* Optional: darker shade on hover */
+}
+```
+
+**2. HTML Document (`button_page.html`):**
+```html
+
+
+
+
Custom Button Page
+
+
+
+
Page with Custom Button
+
Click Me
+
+
Link as Button
+
+
+```
+
+**b) Design a web page that accepts the original price and discount percentage from the user and calculates the final price after discount. Use JavaScript to display the result.** (5 Marks)
+
+**Answer:**
+```html
+
+
+
+
Discount Calculator
+
+
+
+
Discount Calculator
+
+
Original Price ($):
+
+
+
Discount Percentage (%):
+
+
+
Calculate Final Price
+
+
+
+
+
+
+```
+
+---
+*(Continuing with Q5 to Q12 in subsequent focused blocks if needed, or assuming this structure is clear and will be followed for the rest)*
+I'll provide answers for a few more questions to show continuity.
+
+---
+
+**Que. 5**
+
+**a) Draw and explain MVC architecture of AngularJS.** (4 Marks)
+
+**Answer:**
+**MVC Architecture in AngularJS:**
+
+**Diagram:**
+```
+ +-------------------+ Updates +-------------------+
+ | View |<----------------| Model |
+ | (HTML, Directives)|---------------->| (Data, JavaScript |
+ +-------------------+ Notifies UI | Objects) |
+ ^ | (via $scope) +-------------------+
+ | | ^
+ User | | User Actions | Business Logic
+ Interactions| | (e.g., ng-click) | Manipulates
+ v | |
+ +-------------------+ |
+ | Controller |---------------------------+
+ | (JavaScript Func)| Updates Model based
+ +-------------------+ on View & Business Logic
+```
+
+**Explanation:**
+
+* **Model:**
+ * Represents the data and business logic of the application.
+ * In AngularJS, the model is typically plain JavaScript objects.
+ * It does not directly interact with the View. The `$scope` object acts as a bridge. When data in the `$scope` (which can be considered part of the Model or a ViewModel) changes, it reflects in the View, and vice-versa (with two-way data binding).
+ * It's responsible for managing the application's data state.
+
+* **View:**
+ * This is what the user sees – the HTML DOM (Document Object Model).
+ * It displays the data from the Model and sends user actions (like clicks, input) to the Controller.
+ * AngularJS extends HTML with directives (e.g., `ng-model`, `ng-bind`, `ng-repeat`) that declaratively define how the Model data should be projected onto the View.
+ * It observes the Model for changes and updates itself.
+
+* **Controller:**
+ * Responsible for handling user input from the View and interacting with the Model.
+ * It's a JavaScript function that defines the application's behavior.
+ * It sets up the initial state of the `$scope` object and adds behavior (methods) to it.
+ * The Controller links the Model to the View via the `$scope`. It doesn't manipulate the DOM directly (which is a key principle in AngularJS – keep controllers lean and focused on business logic and scope setup).
+
+* **$scope (Special Component/Glue):** While not strictly part of the classic MVC, `$scope` in AngularJS is crucial. It acts as the "glue" between the Controller and the View. The View "watches" for changes on the `$scope` properties to update itself, and directives in the View can update `$scope` properties (e.g., `ng-model`).
+
+AngularJS's implementation of MVC (often referred to as MVVM - Model-View-ViewModel or MVW - Model-View-Whatever) facilitates a separation of concerns, making the application more organized, testable, and maintainable.
+
+**b) Write code using AngularJS to perform arithmetic operations (Addition, subtraction, multiplication and division). Create a required HTML form to accept the two numbers and display the results in the paragraph elements.** (6 Marks)
+
+**Answer:**
+```html
+
+
+
+
AngularJS Arithmetic Operations
+
+
+
+
+
AngularJS Arithmetic Calculator
+
+
+
Results:
+
Number 1: {{num1}}
+
Number 2: {{num2}}
+
Addition ({{num1}} + {{num2}}): {{additionResult}}
+
Subtraction ({{num1}} - {{num2}}): {{subtractionResult}}
+
Multiplication ({{num1}} * {{num2}}): {{multiplicationResult}}
+
Division ({{num1}} / {{num2}}): {{divisionResult}} {{divisionError}}
+
+
+```
+
+---
+
+**Que. 6**
+**OR (Alternative to Q.5)**
+
+**a) What is use of filters in AngularJS? Explain lowercase and uppercase filter with the help of suitable code.** (4 Marks)
+
+**Answer:**
+**Use of Filters in AngularJS:**
+Filters in AngularJS are used to format data displayed to the user in the view. They can be applied to expressions within templates (HTML) to transform data before it is rendered. Filters do not change the original data in the model, only its presentation. They are invoked using the pipe `|` character within an expression.
+
+**Common uses include:**
+* Formatting dates, numbers, and currency.
+* Converting text case (e.g., uppercase, lowercase).
+* Filtering arrays to display a subset of items.
+* Ordering items in an array.
+* Creating custom formatting logic.
+
+**Lowercase and Uppercase Filters:**
+
+1. **`lowercase` filter:** Converts a string to all lowercase.
+2. **`uppercase` filter:** Converts a string to all uppercase.
+
+**Suitable Code Example:**
+```html
+
+
+
+
AngularJS Case Filters
+
+
+
+
+
AngularJS Case Filters Example
+
+
Enter Text:
+
+
+
Original Greeting: {{ greeting }}
+
Greeting in Lowercase: {{ greeting | lowercase }}
+
Greeting in Uppercase: {{ greeting | uppercase }}
+
+
Username: {{ userName }}
+
Username in Lowercase: {{ userName | lowercase }}
+
Username in Uppercase: {{ userName | uppercase }}
+
+
Input Text Original: {{ inputText }}
+
Input Text Lowercase: {{ inputText | lowercase }}
+
Input Text Uppercase: {{ inputText | uppercase }}
+
+
+
+```
+
+**b) Explain the concept of two-way data binding in AngularJS. Use the ng-bind directive to bind a variable from the controller to an HTML element. Provide an example where changing the variable in the controller updates the view automatically.** (6 Marks)
+*(Note: The question asks to "Use the ng-bind directive... Provide an example where changing the variable in the controller updates the view automatically." `ng-bind` is for one-way binding from controller to view. For demonstrating automatic update from controller to view, `ng-bind` is suitable. If it meant to also show view-to-controller, `ng-model` would be the prime example for two-way binding. I will address two-way binding conceptually and then use `ng-bind` as requested, explaining its role in reflecting model changes.)*
+
+**Answer:**
+**Concept of Two-Way Data Binding in AngularJS:**
+Two-way data binding is a core feature of AngularJS that provides automatic synchronization of data between the Model (JavaScript objects in the controller's scope) and the View (HTML).
+
+* **Model to View:** When data in the Model changes, the View automatically updates to reflect these changes.
+* **View to Model:** When the user interacts with an input element in the View (e.g., types into a textbox), the corresponding data in the Model is automatically updated.
+
+This eliminates the need for developers to write boilerplate JavaScript code to manually update the View when the Model changes, or to listen for DOM events to update the Model when the user interacts with the View. AngularJS handles this synchronization seamlessly using directives like `ng-model` for input elements. The `$scope` object acts as the intermediary.
+
+**`ng-bind` Directive:**
+The `ng-bind` directive is primarily for **one-way data binding from the controller's scope (Model) to the View**. It binds the content of an HTML element to the value of an expression. If the value of the expression in the scope changes, the content of the HTML element updates automatically. It's generally preferred over `{{ }}` (interpolation) if the expression content might briefly show as raw template before AngularJS compiles.
+
+**Example (using `ng-bind` and showing controller update to view):**
+```html
+
+
+
+
AngularJS ng-bind Example
+
+
+
+
+
AngularJS Data Binding Example
+
+
Using ng-bind:
+
Using interpolation (for comparison): {{ message }}
+
+
Update Message Manually
+
+
+ The message above will first show "Initial message...". After 3 seconds, it will automatically change to "Message updated by controller automatically!". Clicking the button will also update it. This demonstrates how changes in the $scope.message variable in the controller automatically reflect in the view where ng-bind="message" is used.
+
+
+
+```
+**Explanation of the Example:**
+1. The `bindingCtrl` controller initializes `$scope.message`.
+2. The `
` element's content is bound to `$scope.message`.
+3. The `$timeout` service is used to simulate an asynchronous update to `$scope.message` in the controller after 3 seconds.
+4. When `$scope.message` is changed by the `$timeout` function or the `manualUpdate` function, the content of the `
` element (and the paragraph using interpolation) automatically updates in the View without any manual DOM manipulation. This demonstrates the Model-to-View part of data binding, for which `ng-bind` is suitable.
+
+*(For true two-way binding demonstration (View-to-Model and Model-to-View), `ng-model` on an input element would be used: `
+
Like/Dislike Counter
+
Like
+
Dislike
+
Likes: {likes}
+
Dislikes: {dislikes}
+
+//
+// );
+// }
+// export default App;
+```
+**Explanation:**
+* `useState` hook is used to manage `likes` and `dislikes` state variables, initialized to 0.
+* `handleLike` function increments the `likes` count.
+* `handleDislike` function increments the `dislikes` count.
+* The component renders two buttons and paragraphs to display the current counts.
+
+**b) How would you manage component communication between a parent and child component using props? Write suitable code to explain use of props.** (5 Marks)
+
+**Answer:**
+Component communication using props in React primarily flows in one direction: from parent to child.
+
+**Parent to Child Communication:**
+Parents pass data to child components via attributes in JSX, which become `props` (an object) in the child component.
+
+**Child to Parent Communication:**
+To send data or trigger actions from child to parent, the parent passes a callback function as a prop to the child. The child then calls this function when a specific event occurs, optionally passing data as arguments to the callback.
+
+**Suitable Code Example:**
+
+**1. Parent Component (`ParentComponent.js`):**
+```javascript
+// ParentComponent.js
+import React, { useState } from 'react';
+import ChildComponent from './ChildComponent';
+
+function ParentComponent() {
+ const [messageFromChild, setMessageFromChild] = useState("");
+ const parentData = "Hello from Parent!";
+
+ // Callback function to be passed to child
+ const handleChildData = (dataFromChild) => {
+ setMessageFromChild(dataFromChild);
+ console.log("Data received from child:", dataFromChild);
+ };
+
+ return (
+
+
Parent Component
+
Data to send to child: {parentData}
+
+ {messageFromChild &&
Message from child: {messageFromChild}
}
+
+
Child Component
+
Data received from parent: {dataReceived}
+
Send Data to Parent
+
+
{collegeName}
+
Departments Available:
+
+ {departments.map((dept, index) => (
+ {dept}
+ ))}
+
+
+//
+// );
+// }
+// export default App;
+```
+
+**b) Demonstrate how to handle events in a functional component. Create a simple button that increments a counter when clicked.** (5 Marks)
+
+**Answer:**
+```javascript
+// EventCounter.js
+import React, { useState } from 'react';
+
+function EventCounter() {
+ // useState hook to manage the counter state
+ const [count, setCount] = useState(0);
+
+ // Event handler function
+ const handleIncrement = () => {
+ setCount(prevCount => prevCount + 1); // Update state based on previous state
+ };
+
+ return (
+
+
Counter Example
+
Current Count: {count}
+ {/* Event handling: onClick calls handleIncrement */}
+
Increment Count
+
+//
+// );
+// }
+// export default App;
+```
+**Explanation:**
+1. **`useState` Hook:** Initializes a state variable `count` to `0` and provides a function `setCount` to update it.
+2. **Event Handler (`handleIncrement`):** This function is called when the button is clicked. It uses `setCount` to increment the `count`.
+3. **`onClick` Attribute:** The button element has an `onClick` attribute that is set to the `handleIncrement` function. This attaches the event listener. When the button is clicked, React calls `handleIncrement`.
+
+---
+
+**Que. 9**
+
+**a) Design HTML form for accepting username, password. Also design a Servlet which reads this form data.** (5 Marks)
+
+**Answer:**
+
+**1. HTML Form (`login.html`):**
+```html
+
+
+
+ Login Form
+
+ User Login
+
+
+
+```
+
+**2. Servlet (`LoginReaderServlet.java`):**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet; // Or use web.xml for mapping
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+@WebServlet("/LoginReaderServlet") // Servlet 3.0+ annotation for mapping
+public class LoginReaderServlet extends HttpServlet {
+ protected void doPost(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ // Read form data
+ String username = request.getParameter("username");
+ String password = request.getParameter("password"); // Be cautious with handling passwords
+
+ out.println("");
+ out.println("Login Data Received ");
+ out.println("Login Data Submitted: ");
+ out.println("Username: " + username + "
");
+ // For security, never display the password back to the client in a real application.
+ // This is just to demonstrate reading it.
+ out.println("Password (read but not displayed for security): [********]
");
+ out.println("Servlet has received username: " + username + "
");
+ out.println("");
+ out.close();
+ }
+}
+// If not using @WebServlet, configure in web.xml:
+/*
+
+
+ LoginReader
+ com.example.LoginReaderServlet
+
+
+ LoginReader
+ /LoginReaderServlet
+
+
+*/
+```
+
+**b) Explain Session management in Servlet. Write a Java Servlet that creates an HttpSession, stores a user's username in the session, and then retrieves and displays the username on a subsequent request.** (5 Marks)
+
+**Answer:**
+**Session Management in Servlets:**
+Session management refers to the process of tracking a user's interactions with a web application across multiple HTTP requests. Since HTTP is a stateless protocol, each request is independent. Sessions provide a way to maintain state (store user-specific data) for the duration of a user's visit.
+
+Servlets manage sessions using the `HttpSession` interface. Common mechanisms include:
+1. **Cookies:** The server sends a unique session ID as a cookie to the client's browser. The browser sends this cookie back with each subsequent request, allowing the server to identify the session.
+2. **URL Rewriting:** The session ID is appended to URLs if cookies are disabled.
+3. **Hidden Form Fields:** Session ID can be embedded in hidden fields in forms (less common for general session tracking).
+
+**Java Servlet Example:**
+
+**Servlet 1: Store Username in Session (`StoreInSessionServlet.java`)**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+
+@WebServlet("/storeSession")
+public class StoreInSessionServlet extends HttpServlet {
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ // Get username from request parameter (e.g., from a login form or URL)
+ String username = request.getParameter("username");
+ if (username == null || username.trim().isEmpty()) {
+ username = "GuestUser"; // Default if no username provided
+ }
+
+ // 1. Get the current session or create one if it doesn't exist
+ HttpSession session = request.getSession(true); // true: create if not exists
+
+ // 2. Store the username
+```
+---
+
+**Que. 9 (Continued)**
+
+**b) Explain Session management in Servlet. Write a Java Servlet that creates an HttpSession, stores a user's username in the session, and then retrieves and displays the username on a subsequent request.** (5 Marks)
+
+**Answer (Continued from previous response):**
+
+**Java Servlet Example:**
+
+**Servlet 1: Store Username in Session (`StoreInSessionServlet.java`)**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+
+@WebServlet("/storeSession")
+public class StoreInSessionServlet extends HttpServlet {
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ // Get username from request parameter (e.g., from a login form or URL)
+ String username = request.getParameter("username");
+ if (username == null || username.trim().isEmpty()) {
+ username = "GuestUser"; // Default if no username provided
+ }
+
+ // 1. Get the current session or create one if it doesn't exist
+ HttpSession session = request.getSession(true); // true: create if not exists
+
+ // 2. Store the username as an attribute in the session
+ session.setAttribute("loggedInUser", username);
+
+ out.println("Session Store ");
+ out.println("Username Stored in Session ");
+ out.println("Username '" + username + "' has been stored in your session.
");
+ out.println("Session ID: " + session.getId() + "
");
+ out.println("Click here to retrieve username on next request
");
+ out.println("");
+ out.close();
+ }
+}
+```
+
+**Servlet 2: Retrieve Username from Session (`RetrieveFromSessionServlet.java`)**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
+
+@WebServlet("/retrieveSession")
+public class RetrieveFromSessionServlet extends HttpServlet {
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ out.println("Session Retrieve ");
+ out.println("Retrieving Username from Session ");
+
+ // 1. Get the current session (do not create if it doesn't exist for retrieval)
+ HttpSession session = request.getSession(false); // false: do not create if not exists
+
+ if (session != null) {
+ // 2. Retrieve the username attribute from the session
+ String username = (String) session.getAttribute("loggedInUser");
+
+ if (username != null) {
+ out.println("Welcome back, " + username + "!
");
+ out.println("Your username was retrieved from the session.
");
+ } else {
+ out.println("No username found in the session. Perhaps it was not set or has expired.
");
+ }
+ out.println("Session ID: " + session.getId() + "
");
+ } else {
+ out.println("No active session found. Please visit the store page first.
");
+ }
+ out.println("");
+ out.close();
+ }
+}
+```
+**Explanation:**
+1. **`StoreInSessionServlet`**:
+ * Accepts a `username` request parameter (e.g., `/storeSession?username=JohnDoe`).
+ * `request.getSession(true)` gets the current `HttpSession` or creates a new one if none exists.
+ * `session.setAttribute("loggedInUser", username)` stores the username in the session object.
+2. **`RetrieveFromSessionServlet`**:
+ * `request.getSession(false)` gets the current `HttpSession` only if one already exists. It returns `null` if no session is associated with the request.
+ * `session.getAttribute("loggedInUser")` retrieves the stored username.
+ * This demonstrates that data stored in one request can be accessed in subsequent requests from the same user (browser).
+
+---
+**OR (Alternative to Q.9)**
+
+**Que. 10**
+
+**a) Develop a Servlet to print "Hello World" on the web page. Explain the class, method, objects used in this Servlet code.** (5 Marks)
+
+**Answer:**
+
+**Servlet Code (`HelloWorldServlet.java`):**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException; // For I/O exceptions
+import java.io.PrintWriter; // To send text output to the client
+
+import javax.servlet.ServletException; // For servlet-specific exceptions
+import javax.servlet.annotation.WebServlet; // For URL mapping (Servlet 3.0+)
+import javax.servlet.http.HttpServlet; // Base class for HTTP servlets
+import javax.servlet.http.HttpServletRequest; // Represents the client's request
+import javax.servlet.http.HttpServletResponse; // Represents the server's response
+
+@WebServlet("/hello") // Maps this servlet to the URL /hello
+public class HelloWorldServlet extends HttpServlet {
+
+ // Overriding the doGet method to handle GET requests
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+
+ // 1. Set the content type of the response
+ response.setContentType("text/html;charset=UTF-8");
+
+ // 2. Get a PrintWriter object to send text data to the client
+ PrintWriter out = response.getWriter();
+
+ // 3. Write the HTML response
+ try {
+ out.println("");
+ out.println("");
+ out.println("");
+ out.println("Hello World Servlet ");
+ out.println("");
+ out.println("");
+ out.println("Hello World! "); // The main message
+ out.println("This message is generated by a Java Servlet.
");
+ out.println("");
+ out.println("");
+ } finally {
+ // 4. Close the PrintWriter (important to ensure data is sent)
+ if (out != null) {
+ out.close();
+ }
+ }
+ }
+}
+```
+
+**Explanation of Class, Methods, and Objects:**
+
+* **Class:**
+ * `HelloWorldServlet`: This is our custom servlet class.
+ * `extends HttpServlet`: It inherits from `javax.servlet.http.HttpServlet`. This base class provides the framework for handling HTTP-specific requests (like GET, POST).
+
+* **Methods:**
+ * `doGet(HttpServletRequest request, HttpServletResponse response)`:
+ * This method is overridden from the `HttpServlet` class.
+ * It is called by the servlet container (e.g., Tomcat) when the servlet receives an HTTP GET request that matches its URL mapping (`/hello`).
+ * `throws ServletException, IOException`: Indicates that the method can throw these exceptions, which the container will handle.
+ * `response.setContentType("text/html;charset=UTF-8")`:
+ * A method of the `HttpServletResponse` object.
+ * Sets the MIME type of the response being sent to the client, indicating it's an HTML document using UTF-8 character encoding.
+ * `response.getWriter()`:
+ * A method of the `HttpServletResponse` object.
+ * Returns a `PrintWriter` object that can be used to send character text (like HTML) to the client.
+ * `out.println(...)`:
+ * A method of the `PrintWriter` object (`out`).
+ * Writes a string of text to the output stream, followed by a newline character (though for HTML, the newline often doesn't affect rendering significantly).
+ * `out.close()`:
+ * A method of the `PrintWriter` object.
+ * Closes the print stream and flushes any buffered output to the client. It's crucial to close the writer.
+
+* **Objects:**
+ * `request`: An instance of `javax.servlet.http.HttpServletRequest`.
+ * It represents the HTTP request made by the client (browser).
+ * It contains information about the request, such as parameters, headers, and the client's IP address. (Not heavily used in this simple "Hello World" example, but essential for more complex servlets).
+ * `response`: An instance of `javax.servlet.http.HttpServletResponse`.
+ * It represents the HTTP response that the servlet will send back to the client.
+ * The servlet uses this object to set response headers (like content type) and to get the output stream for sending the response body.
+ * `out`: An instance of `java.io.PrintWriter`.
+ * Obtained from `response.getWriter()`.
+ * This object is used as a conduit to write the HTML content of the web page back to the client.
+
+* **Annotation:**
+ * `@WebServlet("/hello")`: This is a Servlet 3.0+ annotation that provides a convenient way to declare a servlet and map it to a URL pattern without needing to configure it in the `web.xml` deployment descriptor.
+
+**b) Design a Servlet that accepts student information (id, name, and marks) through an HTML form. Write Servlet code using JDBC to insert data into a database. Assume that the Servlet HTML form is already designed, and write only the Servlet code for processing the form data and inserting it into the database using JDBC.** (5 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* An HTML form exists that `POST`s data to this servlet with fields named `studentId`, `studentName`, and `studentMarks`.
+* A MySQL database named `schooldb` exists.
+* A table named `students` exists with columns: `id` (VARCHAR or INT), `name` (VARCHAR), `marks` (INT or DECIMAL).
+* MySQL JDBC driver JAR is in the web application's `WEB-INF/lib` folder.
+
+**Servlet Code (`AddStudentServlet.java`):**
+```java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.sql.Connection;
+import java.sql.DriverManager;
+import java.sql.PreparedStatement;
+import java.sql.SQLException;
+
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+@WebServlet("/addStudent")
+public class AddStudentServlet extends HttpServlet {
+
+ // Database connection details (Consider externalizing these in a real app)
+ private static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
+ private static final String DB_URL = "jdbc:mysql://localhost:3306/schooldb?useSSL=false&serverTimezone=UTC";
+ private static final String DB_USER = "your_db_user"; // Replace with your DB username
+ private static final String DB_PASSWORD = "your_db_password"; // Replace with your DB password
+
+ @Override
+ public void init() throws ServletException {
+ try {
+ // Load the JDBC driver once when the servlet is initialized
+ Class.forName(JDBC_DRIVER);
+ } catch (ClassNotFoundException e) {
+ throw new ServletException("JDBC Driver not found", e);
+ }
+ }
+
+ protected void doPost(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ // 1. Get student information from the request (form data)
+ String studentId = request.getParameter("studentId");
+ String studentName = request.getParameter("studentName");
+ String marksStr = request.getParameter("studentMarks");
+ int studentMarks = 0;
+
+ // Basic validation and conversion for marks
+ if (marksStr != null && !marksStr.trim().isEmpty()) {
+ try {
+ studentMarks = Integer.parseInt(marksStr);
+ } catch (NumberFormatException e) {
+ out.println("Error: Invalid marks format. Please enter a number. ");
+ out.println("Go Back "); // Assume form is add_student_form.html
+ return;
+ }
+ } else {
+ out.println("Error: Marks cannot be empty. ");
+ out.println("Go Back ");
+ return;
+ }
+
+ Connection conn = null;
+ PreparedStatement pstmt = null;
+
+ out.println("Add Student Result ");
+
+ try {
+ // 2. Establish database connection
+ conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
+ conn.setAutoCommit(false); // Optional: for transaction management
+
+ // 3. Create SQL INSERT statement using PreparedStatement
+ String sql = "INSERT INTO students (id, name, marks) VALUES (?, ?, ?)";
+ pstmt = conn.prepareStatement(sql);
+
+ // 4. Set the parameter values
+ pstmt.setString(1, studentId);
+ pstmt.setString(2, studentName);
+ pstmt.setInt(3, studentMarks);
+
+ // 5. Execute the update
+ int rowsAffected = pstmt.executeUpdate();
+
+ if (rowsAffected > 0) {
+ conn.commit(); // Commit transaction if autoCommit is false
+ out.println("Student Data Inserted Successfully! ");
+ out.println("ID: " + studentId + "
");
+ out.println("Name: " + studentName + "
");
+ out.println("Marks: " + studentMarks + "
");
+ } else {
+ conn.rollback(); // Rollback if something went wrong and autoCommit is false
+ out.println("Error: Failed to insert student data. No rows affected. ");
+ }
+
+ } catch (SQLException se) {
+ // Handle errors for JDBC
+ out.println("Database Error: ");
+ out.println("" + se.getMessage() + "
");
+ se.printStackTrace(out); // For debugging - prints stack trace to browser
+ if (conn != null) {
+ try {
+ conn.rollback(); // Rollback on error
+ } catch (SQLException sqlEx) {
+ sqlEx.printStackTrace(out);
+ }
+ }
+ } catch (Exception e) {
+ // Handle other errors
+ out.println("An unexpected error occurred: ");
+ out.println("" + e.getMessage() + "
");
+ e.printStackTrace(out);
+ } finally {
+ // 6. Close resources in a finally block
+ try {
+ if (pstmt != null) pstmt.close();
+ } catch (SQLException se2) { /* ignored */ }
+ try {
+ if (conn != null) conn.close();
+ } catch (SQLException se) {
+ se.printStackTrace(out);
+ }
+ out.println("Add Another Student "); // Link back to form
+ out.println("");
+ out.close();
+ }
+ }
+}
+```
+**Note:**
+* Replace `your_db_user` and `your_db_password` with actual database credentials.
+* The HTML form should have input fields named `studentId`, `studentName`, and `studentMarks` and its action should point to `/addStudent`.
+* Error handling and resource closing are important.
+* Using `PreparedStatement` helps prevent SQL injection vulnerabilities.
+* The `init()` method is used to load the JDBC driver once.
+
+---
+
+**Que. 11**
+
+**a) Explain the significance of Spring boot starter.** (4 Marks)
+
+**Answer:**
+**Significance of Spring Boot Starters:**
+
+Spring Boot Starters are a set of convenient dependency descriptors that you can include in your application. The main significance of starters is to **simplify dependency management and auto-configuration** for Spring applications.
+
+1. **Simplified Dependency Management:**
+ * Starters bundle a collection of related dependencies (JARs) that are commonly used together for a specific functionality (e.g., web development, data JPA, security).
+ * Instead of manually adding multiple individual dependencies and worrying about version compatibility, you just include a single starter POM (e.g., `spring-boot-starter-web`).
+ * This reduces the `pom.xml` (for Maven) or `build.gradle` (for Gradle) file size and complexity.
+
+2. **Auto-Configuration:**
+ * Spring Boot uses starters to trigger auto-configuration. When a starter is present on the classpath, Spring Boot automatically configures the beans and settings required for that functionality.
+ * For example, if `spring-boot-starter-web` is included, Spring Boot auto-configures an embedded web server (like Tomcat), Spring MVC, Jackson for JSON processing, etc., with sensible defaults.
+ * This "opinionated default configuration" drastically reduces the amount of boilerplate configuration code developers need to write.
+
+3. **Production-Ready Features:**
+ * Starters often bring in dependencies that provide production-ready features like health checks, metrics, and externalized configuration, which are available through other starters like `spring-boot-starter-actuator`.
+
+4. **Opinionated but Overridable:**
+ * While starters provide opinionated defaults, Spring Boot allows developers to easily override these defaults if specific customizations are needed.
+
+5. **Reduced Development Time:**
+ * By handling dependency management and auto-configuration, starters allow developers to get started quickly and focus more on writing business logic rather than application setup and configuration.
+
+**Examples of common starters:**
+* `spring-boot-starter-web`: For building web applications, including RESTful APIs using Spring MVC.
+* `spring-boot-starter-data-jpa`: For using Spring Data JPA with Hibernate.
+* `spring-boot-starter-security`: For adding Spring Security.
+* `spring-boot-starter-test`: For testing Spring Boot applications.
+* `spring-boot-starter-thymeleaf`: For using Thymeleaf templating engine.
+
+In essence, Spring Boot Starters make it significantly easier and faster to build robust, production-grade Spring applications.
+
+**b) Design a Spring Boot application that enables the creation of "Product" entities by accepting product details such as product ID and product name from the front end and storing them in a database. Provide relevant code snippets to showcase the implementation (excluding frontend code).** (6 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* Using Spring Data JPA with an H2 in-memory database for simplicity (can be changed to MySQL, PostgreSQL, etc. with configuration).
+* REST controller to accept product details.
+
+**1. `pom.xml` (Maven Dependencies - relevant parts):**
+```xml
+
+
+ org.springframework.boot
+ spring-boot-starter-web
+
+
+ org.springframework.boot
+ spring-boot-starter-data-jpa
+
+
+ com.h2database
+ h2
+ runtime
+
+
+
+ org.projectlombok
+ lombok
+ true
+
+
+```
+
+**2. `application.properties` (src/main/resources/):**
+```properties
+# Spring Datasource (H2 in-memory example)
+spring.datasource.url=jdbc:h2:mem:productdb
+spring.datasource.driverClassName=org.h2.Driver
+spring.datasource.username=sa
+spring.datasource.password=password
+spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
+
+# JPA/Hibernate settings
+spring.jpa.hibernate.ddl-auto=update # Creates/updates schema on startup
+spring.jpa.show-sql=true # Show SQL queries in console (for debugging)
+
+# To enable H2 console (optional for viewing DB)
+spring.h2.console.enabled=true
+spring.h2.console.path=/h2-console
+```
+
+**3. Product Entity (`Product.java`):**```java
+package com.example.productapp.entity;
+
+import javax.persistence.Entity;
+import javax.persistence.Id;
+// import javax.persistence.GeneratedValue; // If ID is auto-generated
+// import javax.persistence.GenerationType;
+import lombok.Data; // From Lombok (optional)
+import lombok.NoArgsConstructor;
+import lombok.AllArgsConstructor;
+
+@Entity
+@Data // Lombok: Generates getters, setters, toString, equals, hashCode
+@NoArgsConstructor
+@AllArgsConstructor
+public class Product {
+
+ @Id
+ // If product ID is manually provided from frontend:
+ private String productId;
+
+ // If productId should be auto-generated by database:
+ // @Id
+ // @GeneratedValue(strategy = GenerationType.IDENTITY) // or AUTO, SEQUENCE
+ // private Long id;
+ // private String externalProductId; // If you still need a business ID
+
+ private String productName;
+
+ // Constructors, getters, setters would be here if not using Lombok
+}
+```
+
+**4. Product Repository (`ProductRepository.java`):**
+```java
+package com.example.productapp.repository;
+
+import com.example.productapp.entity.Product;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public interface ProductRepository extends JpaRepository { // String is the type of @Id
+ // JpaRepository provides CRUD methods like save(), findById(), findAll(), deleteById() etc.
+ // Custom query methods can be added here if needed.
+}
+```
+
+**5. Product Service (Optional, but good practice - `ProductService.java`):**
+```java
+package com.example.productapp.service;
+
+import com.example.productapp.entity.Product;
+import com.example.productapp.repository.ProductRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+@Service
+public class ProductService {
+
+ @Autowired
+ private ProductRepository productRepository;
+
+ public Product createProduct(Product product) {
+ // Additional business logic can go here before saving
+ return productRepository.save(product);
+ }
+
+ // Other service methods like getProductById, getAllProducts, etc.
+}
+```
+
+**6. Product REST Controller (`ProductController.java`):**
+```java
+package com.example.productapp.controller;
+
+import com.example.productapp.entity.Product;
+import com.example.productapp.service.ProductService; // Using the service
+// import com.example.productapp.repository.ProductRepository; // Or directly use repository for simpler cases
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/api/products") // Base path for product-related endpoints
+public class ProductController {
+
+ @Autowired
+ private ProductService productService;
+
+ // Using repository directly (alternative for simple cases, less recommended for complex apps)
+ // @Autowired
+ // private ProductRepository productRepository;
+
+ // Endpoint to create a new product
+ // Expects a JSON body like: {"productId": "P101", "productName": "Laptop"}
+ @PostMapping
+ public ResponseEntity createProduct(@RequestBody Product product) {
+ try {
+ Product createdProduct = productService.createProduct(product);
+ // Product createdProduct = productRepository.save(product); // If using repository directly
+ return new ResponseEntity<>(createdProduct, HttpStatus.CREATED);
+ } catch (Exception e) {
+ // Basic error handling
+ return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
+ }
+ }
+
+ // Other endpoints like GET /api/products, GET /api/products/{id}, PUT, DELETE can be added here.
+}
+```
+
+**7. Main Application Class (`ProductappApplication.java`):**
+```java
+package com.example.productapp;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication // Combines @Configuration, @EnableAutoConfiguration, @ComponentScan
+public class ProductappApplication {
+
+ public static void main(String[] args) {
+ SpringApplication.run(ProductappApplication.class, args);
+ }
+}
+```
+**To test (e.g., using Postman or curl):**
+* Run the Spring Boot application.
+* Send a `POST` request to `http://localhost:8080/api/products` with a JSON body:
+ ```json
+ {
+ "productId": "P001",
+ "productName": "Awesome Gadget"
+ }
+ ```
+* The response should be the created product with HTTP status 201 CREATED. The data will be stored in the H2 database.
+
+---
+**OR (Alternative to Q.11)**
+
+**Que. 12**
+
+**a) Discuss the benefits of using Spring Boot's dependency management system and how it simplifies the management of project dependencies.** (4 Marks)
+
+**Answer:**
+Spring Boot's dependency management system, primarily leveraged through its "starters" and the `spring-boot-dependencies` Bill of Materials (BOM), offers significant benefits:
+
+1. **Simplified Dependency Declaration:**
+ * Instead of declaring numerous individual Spring module dependencies (and their transitive dependencies) with specific versions, developers declare high-level "starters" (e.g., `spring-boot-starter-web`).
+ * This drastically reduces the size and complexity of the `pom.xml` (Maven) or `build.gradle` (Gradle) file.
+
+2. **Managed and Compatible Versions:**
+ * The `spring-boot-dependencies` BOM (Bill of Materials) is implicitly or explicitly imported. This BOM defines a curated list of dependencies and their compatible versions that are known to work well together.
+ * Spring Boot manages the versions of these dependencies. Developers generally don't need to specify versions for most Spring libraries and many common third-party libraries, reducing the risk of version conflicts.
+
+3. **Transitive Dependency Resolution:**
+ * Starters pull in necessary transitive dependencies. For example, `spring-boot-starter-web` brings in Spring MVC, an embedded server (like Tomcat), Jackson (for JSON), validation libraries, etc., all with compatible versions. Developers don't need to track these down individually.
+
+4. **Reduced Risk of Version Conflicts:**
+ * By relying on Spring Boot's managed versions, the likelihood of encountering `NoSuchMethodError`, `ClassNotFoundException`, or other linkage errors due to incompatible library versions is significantly minimized.
+
+5. **Easy Upgrades:**
+ * Upgrading the Spring Boot version (e.g., by changing the parent POM version or the BOM version) often upgrades the entire stack of managed dependencies to new, compatible versions. This simplifies the process of keeping the application up-to-date.
+
+6. **Convention over Configuration:**
+ * The dependency management system works hand-in-hand with Spring Boot's auto-configuration. The presence of certain dependencies (brought in by starters) triggers specific auto-configurations, reducing manual setup.
+
+7. **Flexibility to Override:**
+ * While Spring Boot manages versions, developers still have the flexibility to override a specific dependency's version if needed, by explicitly declaring it in their project's build file.
+
+**How it simplifies:**
+Essentially, developers can focus on *what* functionality they need (e.g., "I need to build a web application") by including the appropriate starter, rather than worrying about *how* to assemble the correct set of underlying libraries and their compatible versions. Spring Boot takes on the burden of curating and managing these dependencies, leading to faster project setup, more stable builds, and easier maintenance.
+
+**b) Design suitable request handling methods in Rest-controller class to illustrate the use of @GetMapping and @PostMapping annotations.** (6 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* A simple `Item` class for data representation.
+* The controller manages a list of items in memory for demonstration (in a real app, this would interact with a service/repository).
+
+**1. Item Data Class (`Item.java`):**
+```java
+package com.example.demorest.model;
+
+import lombok.Data; // Optional: from Lombok
+import lombok.AllArgsConstructor;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class Item {
+ private long id;
+ private String name;
+ private String description;
+}
+```
+
+**2. Rest Controller (`ItemController.java`):**
+```java
+package com.example.demorest.controller;
+
+import com.example.demorest.model.Item;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
+import java.util.concurrent.atomic.AtomicLong;
+import java.util.stream.Collectors;
+
+@RestController
+@RequestMapping("/api/items") // Base path for all requests to this controller
+public class ItemController {
+
+ // In-memory list to store items for demonstration purposes
+ private final List- itemList = new ArrayList<>();
+ private final AtomicLong counter = new AtomicLong(); // For generating unique IDs
+
+ public ItemController() {
+ // Pre-populate with some data for GET examples
+ itemList.add(new Item(counter.incrementAndGet(), "Laptop", "High-performance laptop"));
+ itemList.add(new Item(counter.incrementAndGet(), "Mouse", "Wireless optical mouse"));
+ }
+
+ /**
+ * Illustrates @GetMapping to retrieve all items.
+ * Handles HTTP GET requests to /api/items
+ *
+ * @return A list of all items.
+ */
+ @GetMapping
+ public ResponseEntity
> getAllItems() {
+ if (itemList.isEmpty()) {
+ return new ResponseEntity<>(HttpStatus.NO_CONTENT); // Or return an empty list
+ }
+ return new ResponseEntity<>(itemList, HttpStatus.OK);
+ }
+
+ /**
+ * Illustrates @GetMapping with a path variable to retrieve a specific item by ID.
+ * Handles HTTP GET requests to /api/items/{id}
+ * e.g., /api/items/1
+ *
+ * @param id The ID of the item to retrieve.
+ * @return The item if found, or 404 Not Found.
+ */
+ @GetMapping("/{id}")
+ public ResponseEntity- getItemById(@PathVariable("id") long id) {
+ Optional
- itemData = itemList.stream()
+ .filter(item -> item.getId() == id)
+ .findFirst();
+
+ // Using functional style for ResponseEntity
+ return itemData.map(item -> new ResponseEntity<>(item, HttpStatus.OK))
+ .orElseGet(() -> new ResponseEntity<>(HttpStatus.NOT_FOUND));
+ }
+
+ /**
+ * Illustrates @GetMapping with request parameters for filtering items.
+ * Handles HTTP GET requests to /api/items/search?name=Laptop
+ *
+ * @param name The name to filter items by (optional).
+ * @return A list of items matching the filter criteria.
+ */
+ @GetMapping("/search")
+ public ResponseEntity
> searchItemsByName(@RequestParam(required = false) String name) {
+ if (name == null || name.trim().isEmpty()) {
+ return new ResponseEntity<>(itemList, HttpStatus.OK); // Return all if no name query
+ }
+ List- filteredItems = itemList.stream()
+ .filter(item -> item.getName().toLowerCase().contains(name.toLowerCase()))
+ .collect(Collectors.toList());
+
+ if (filteredItems.isEmpty()) {
+ return new ResponseEntity<>(HttpStatus.NO_CONTENT);
+ }
+ return new ResponseEntity<>(filteredItems, HttpStatus.OK);
+ }
+
+
+ /**
+ * Illustrates @PostMapping to create a new item.
+ * Handles HTTP POST requests to /api/items
+ * Expects an Item object in the request body (JSON).
+ *
+ * @param item The item object from the request body.
+ * @return The created item with an assigned ID and HTTP status 201 Created.
+ */
+ @PostMapping
+ public ResponseEntity
- createItem(@RequestBody Item item) {
+ try {
+ // In a real app, ID might be auto-generated by the database
+ // For this example, we assign a new ID.
+ Item newItem = new Item(
+ counter.incrementAndGet(),
+ item.getName(),
+ item.getDescription()
+ );
+ itemList.add(newItem);
+ return new ResponseEntity<>(newItem, HttpStatus.CREATED);
+ } catch (Exception e) {
+ return new ResponseEntity<>(null, HttpStatus.INTERNAL_SERVER_ERROR);
+ }
+ }
+}
+```
+**Explanation:**
+
+* **`@RestController`**: Marks this class as a REST controller where every method returns a domain object instead of a view. It's a convenience annotation that combines `@Controller` and `@ResponseBody`.
+* **`@RequestMapping("/api/items")`**: Maps HTTP requests with the base path `/api/items` to handler methods in this controller.
+
+* **`@GetMapping`**:
+ * `@GetMapping` (without a path): Mapped to `GET /api/items`. `getAllItems()` retrieves all items.
+ * `@GetMapping("/{id}")`: Mapped to `GET /api/items/{itemId}` (e.g., `/api/items/1`). `getItemById()` uses `@PathVariable` to extract `id` from the URL.
+ * `@GetMapping("/search")`: Mapped to `GET /api/items/search`. `searchItemsByName()` uses `@RequestParam` to get the `name` query parameter (e.g., `/api/items/search?name=Laptop`).
+
+* **`@PostMapping`**:
+ * Mapped to `POST /api/items`. `createItem()` handles the creation of a new item.
+ * `@RequestBody`: Indicates that the method parameter `item` should be populated with the value of the HTTP request body (typically JSON or XML converted to an `Item` object).
+
+* **`ResponseEntity
`**:
+ * Used to represent the entire HTTP response. It allows you to control the status code, headers, and the body of the response.
+ * Examples: `HttpStatus.OK` (200), `HttpStatus.CREATED` (201), `HttpStatus.NOT_FOUND` (404), `HttpStatus.NO_CONTENT` (204).
+
+**To Test:**
+* **GET All:** Send GET to `http://localhost:8080/api/items`
+* **GET by ID:** Send GET to `http://localhost:8080/api/items/1`
+* **GET Search by Name:** Send GET to `http://localhost:8080/api/items/search?name=Laptop`
+* **POST Create:** Send POST to `http://localhost:8080/api/items` with JSON body:
+ ```json
+ {
+ "name": "Keyboard",
+ "description": "Mechanical gaming keyboard"
+ }
+ ```
+
+---
+This completes the model answers for all questions from Q1 to Q12.
diff --git a/Cia1.md b/Cia1.md
new file mode 100644
index 0000000..91a8eaf
--- /dev/null
+++ b/Cia1.md
@@ -0,0 +1,422 @@
+
+**Exam Type: CIA-1**
+**Course: Web Technology (IT313)**
+**Answer Sheet**
+
+---
+
+**Q.1 Attempt All**
+
+**A. What is Search Engine? Explain the different components of Search Engine.** (5 Marks)
+
+**Answer:**
+
+**Search Engine:**
+A search engine is a software system designed to search for information on the World Wide Web. It allows users to enter keywords or phrases, and it returns a list of results (web pages, images, videos, etc.) that are relevant to the query.
+
+**Different Components of a Search Engine:**
+
+1. **Web Crawler (Spider or Bot):**
+ * **Function:** This component systematically browses the World Wide Web, discovering and downloading web pages. It follows hyperlinks from one page to another to find new and updated content.
+ * **Application:** It gathers data from websites to be indexed.
+
+2. **Indexer (Indexing System):**
+ * **Function:** After web pages are crawled, the indexer processes and stores the information in a massive database called an index. It analyzes the content of each page (text, metadata, etc.) and organizes it in a way that allows for fast and efficient retrieval. Keywords, their locations, and other attributes are stored.
+ * **Application:** Creates a searchable data structure, making it quick to find pages relevant to user queries.
+
+3. **Search Algorithm (Query Processor & Ranking Algorithm):**
+ * **Function:** This is the core logic that handles user queries.
+ * **Query Processor:** It interprets the user's search query, understanding intent, correcting spelling, and expanding synonyms if necessary.
+ * **Ranking Algorithm:** It compares the processed query to the indexed documents and ranks the results based on relevance, authority, user location, and hundreds of other factors (e.g., PageRank).
+ * **Application:** Provides the most relevant and ordered list of search results to the user.
+
+4. **User Interface (Search Box & Results Page):**
+ * **Function:** This is the component the user interacts with. It includes the search box where users type their queries and the Search Engine Results Page (SERP) where the ranked list of results is displayed.
+ * **Application:** Allows users to input queries and view the output generated by the search engine.
+
+*(A neat sketch might show these components interacting: Crawler -> Indexer -> (User Query -> Query Processor -> Ranking Algorithm -> Results on UI))*
+
+---
+
+**B. Explain with example different types of web applications.** (5 Marks)
+
+**Answer:**
+
+Web applications are programs that run on a web server and are accessed by users through a web browser over a network (like the internet or an intranet).
+
+**Different Types of Web Applications with Examples:**
+
+1. **Static Web Applications:**
+ * **Explanation:** Deliver content as stored on the server without any server-side processing or database interaction for the content itself. The content is fixed and the same for every user. Primarily built using HTML, CSS, and sometimes client-side JavaScript for minor interactivity.
+ * **Example:** A simple informational website for a small business with fixed content like "About Us," "Contact," and basic service descriptions. A personal portfolio site displaying unchanging project details.
+
+2. **Dynamic Web Applications:**
+ * **Explanation:** Generate content in real-time based on user interactions, data from databases, or other factors. They involve server-side scripting (e.g., PHP, Python, Java Servlets, Node.js) and often database interaction. Content can be personalized.
+ * **Example:**
+ * **E-commerce sites (e.g., Amazon):** Product listings change based on inventory, user searches, and recommendations.
+ * **Social Media platforms (e.g., Facebook):** Feeds are personalized and constantly updated.
+ * **Content Management Systems (e.g., WordPress blogs):** Content is dynamically pulled from a database and displayed based on templates.
+
+3. **Single-Page Applications (SPAs):**
+ * **Explanation:** Load a single HTML page and dynamically update content as the user interacts with the app. They provide a more fluid, desktop-like experience by rewriting the current page rather than loading entire new pages from the server. Often built using JavaScript frameworks like React, Angular, or Vue.js.
+ * **Example:** Gmail, Google Maps, Trello. When you click on an email in Gmail, only the content area updates, not the entire page.
+
+4. **Progressive Web Applications (PWAs):**
+ * **Explanation:** Web applications that use modern web capabilities to deliver an app-like experience to users. They can work offline (using service workers), be installed on the user's home screen, and send push notifications. They aim to combine the best of web and native mobile apps.
+ * **Example:** Twitter Lite, Pinterest PWA. These can be accessed via a browser but offer features traditionally associated with native apps.
+
+5. **Portal Web Applications:**
+ * **Explanation:** Provide a single point of access to a wide range of information and services, often personalized for specific user roles or groups. They aggregate content from different sources.
+ * **Example:** University portals for students (displaying courses, grades, announcements), internal employee portals (access to HR information, company news, tools).
+
+---
+
+**Q.2 Attempt All**
+
+**A. Write javascript program to store employee id, name and salary using javascript object.** (5 Marks)
+
+**Answer:**
+
+```html
+
+
+
+ Employee Object in JavaScript
+
+
+ Employee Details Stored in JavaScript Object
+
+
+
+
+
+```
+**Explanation of JavaScript Code:**
+* `let employee = {};` creates an empty object.
+* `employee.id = "EMP101";`, `employee.name = "John Doe";`, and `employee.salary = 60000;` assign values to the `id`, `name`, and `salary` properties of the `employee` object.
+* The code then retrieves these values and displays them in a paragraph element on the HTML page.
+
+---
+
+**B. Write a program in javascript to display current time in H:M:S format.** (5 Marks)
+
+**Answer:**
+
+```html
+
+
+
+ Current Time in H:M:S
+
+
+
+ Current Time (H:M:S)
+
+
+
+
+
+```
+**Explanation of JavaScript Code:**
+* The `displayCurrentTime` function is created.
+* `new Date()` creates a new Date object containing the current date and time.
+* `getHours()`, `getMinutes()`, and `getSeconds()` methods extract the respective time components.
+* Conditional (ternary) operators `(condition ? valueIfTrue : valueIfFalse)` are used to add a leading zero to hours, minutes, or seconds if they are less than 10.
+* The components are concatenated into the "H:M:S" format.
+* `document.getElementById("currentTime").textContent = timeString;` displays the formatted time in the HTML paragraph.
+* `setInterval(displayCurrentTime, 1000);` (optional) calls the function every 1000 milliseconds (1 second) to keep the displayed time updated.
+
+---
+
+**Q.3 Attempt All**
+
+**A. Write a program in PHP to create Login form and store the username and password in Session and retrive it on another form.** (5 Marks)
+
+**Answer:**
+
+**1. Login Form (`login.php`):**
+```php
+
+
+
+
+ Login Page
+
+
+ Login
+ ' . $error_message . '';
+ }
+ ?>
+
+
+
+```
+
+**2. Welcome Page (`welcome.php` - to retrieve session data):**
+```php
+
+
+
+
+ Welcome Page
+
+
+ Welcome, !
+ You have successfully logged in.
+ Your username stored in the session is:
+ Note: For security reasons, actual passwords are not typically stored directly in sessions after validation. Only a login status and user identifier (like username or user ID) are stored.
+ Logout
+
+
+```
+
+**3. Logout Page (Optional - `logout.php`):**
+```php
+
+```
+**Explanation:**
+* `session_start();` is crucial at the beginning of each PHP script that uses sessions.
+* In `login.php`, after successful validation (simulated here), `$_SESSION['loggedin_user']` stores the username and `$_SESSION['is_logged_in']` stores a boolean.
+* `header("Location: welcome.php");` redirects the user.
+* In `welcome.php`, it checks if `$_SESSION['is_logged_in']` is set and true. If so, it retrieves `$_SESSION['loggedin_user']` to display.
+* **Important Security Note:** Storing plain text passwords in sessions is highly discouraged. This example stores only the username and a login status flag.
+
+---
+
+**B. Apply PHP and MYSQL connectivity to store the book details like book_id, book_name, author, price and quantity into database table "ebookshop".** (5 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* MySQL server is running.
+* A database named (e.g.) `mydatabase` exists.
+* A table named `ebookshop` exists with columns:
+ * `book_id` (VARCHAR or INT, Primary Key)
+ * `book_name` (VARCHAR)
+ * `author` (VARCHAR)
+ * `price` (DECIMAL or FLOAT)
+ * `quantity` (INT)
+* PHP environment is set up with MySQLi or PDO extension enabled. This example uses MySQLi.
+
+**PHP Script (`add_book.php`):**
+```php
+
+
+
+ Add Book to Ebookshop
+
+
+ Add New Book
+
+ connect_error) {
+ die("Connection failed: " . $conn->connect_error);
+ }
+
+ // Get data from form (ensure to sanitize in a real application)
+ $book_id = $_POST['book_id'];
+ $book_name = $_POST['book_name'];
+ $author = $_POST['author'];
+ $price = $_POST['price'];
+ $quantity = $_POST['quantity'];
+
+ // Prepare SQL statement to prevent SQL injection (using prepared statements)
+ $stmt = $conn->prepare("INSERT INTO ebookshop (book_id, book_name, author, price, quantity) VALUES (?, ?, ?, ?, ?)");
+ // Bind parameters: s=string, d=double, i=integer
+ $stmt->bind_param("sssdi", $book_id, $book_name, $author, $price, $quantity);
+
+ // Execute the statement
+ if ($stmt->execute()) {
+ $message = "New book record created successfully!";
+ $message_type = "success";
+ } else {
+ $message = "Error: " . $stmt->error;
+ $message_type = "error";
+ }
+
+ // Close statement and connection
+ $stmt->close();
+ $conn->close();
+ }
+ ?>
+
+ ' . htmlspecialchars($message) . '';
+ }
+ ?>
+
+
+
+
+
+```
+**Explanation:**
+1. **Database Connection:** Establishes a connection to the MySQL database using `mysqli`.
+2. **Form Handling:** Checks if the request method is POST (form submitted).
+3. **Data Retrieval:** Gets `book_id`, `book_name`, `author`, `price`, and `quantity` from the `$_POST` array.
+4. **Prepared Statement:**
+ * `$conn->prepare(...)` creates a prepared statement. This is crucial for preventing SQL injection vulnerabilities.
+ * `$stmt->bind_param("sssdi", ...)` binds the PHP variables to the placeholders (`?`) in the SQL query. The "sssdi" string specifies the data types of the parameters (string, string, string, double, integer).
+5. **Execute Query:** `$stmt->execute()` runs the prepared SQL INSERT statement.
+6. **Feedback & Closing:** Provides a success or error message and closes the statement and database connection.
+7. **HTML Form:** A simple form is provided to input book details.
+
+**To run this:**
+1. Ensure your MySQL server is running and the database/table `ebookshop` is created.
+ ```sql
+ -- Example SQL to create the table:
+ -- CREATE DATABASE mydatabase;
+ -- USE mydatabase;
+ -- CREATE TABLE ebookshop (
+ -- book_id VARCHAR(20) PRIMARY KEY,
+ -- book_name VARCHAR(255) NOT NULL,
+ -- author VARCHAR(255),
+ -- price DECIMAL(10, 2) NOT NULL,
+ -- quantity INT NOT NULL
+ -- );
+ ```
+2. Save the PHP code as `add_book.php` in your web server's document root (e.g., htdocs for XAMPP).
+3. Access `add_book.php` through your browser.
+
+---
+**End of Answer Sheet**
diff --git a/QB.md b/QB.md
new file mode 100644
index 0000000..9e806c7
--- /dev/null
+++ b/QB.md
@@ -0,0 +1,579 @@
+Okay, Professor! Based on the syllabus documents provided (IT318 Web Technology Laboratory, including the assignment list, and the PowerPoint slides), I've prepared a new question bank with answers covering similar concepts but with different scenarios. This should help students prepare more broadly.
+
+The questions are framed keeping the "Apply" level (Bloom's Taxonomy Level 3) in mind.
+
+---
+
+**Web Technology Laboratory (IT318) - Additional Question Bank**
+
+---
+
+**Section 1: HTML, CSS & Client-Side Scripting (JavaScript, AngularJS)**
+
+**Q1. HTML & CSS Application**
+**(a) Design an HTML page for a simple blog post layout. The page should include:**
+ * A main heading for the blog post title.
+ * A paragraph for the author's name and publication date.
+ * Several paragraphs for the blog content.
+ * An image relevant to the blog post.
+ * A comments section with a heading and a simple form (name, comment textarea, submit button).
+**(b) Write External CSS to style the blog post page with the following specifications:**
+ * The main heading should be centered and have a specific font family (e.g., Arial).
+ * The author/date paragraph should be italicized and have a smaller font size.
+ * The blog content paragraphs should have a line height of 1.6.
+ * The image should be centered and have a maximum width of 80%.
+ * The comments section form inputs should have a light gray border.
+
+**Answer:**
+
+**(a) `blog_post.html`:**
+```html
+
+
+
+ My Awesome Blog Post
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+
+
+```
+
+**(b) `blog_style.css`:**
+```css
+body {
+ font-family: Georgia, serif;
+ margin: 20px;
+ color: #333;
+}
+
+article header h1 {
+ text-align: center;
+ font-family: Arial, sans-serif;
+ color: #2c3e50;
+}
+
+.author-info {
+ font-style: italic;
+ font-size: 0.9em;
+ text-align: center;
+ color: #7f8c8d;
+}
+
+article img {
+ display: block;
+ margin: 20px auto;
+ max-width: 80%;
+ height: auto;
+ border-radius: 5px;
+}
+
+.blog-content p {
+ line-height: 1.6;
+ text-align: justify;
+}
+
+.comments-section {
+ margin-top: 30px;
+ padding-top: 20px;
+ border-top: 1px solid #eee;
+}
+
+.comments-section h2 {
+ font-family: Arial, sans-serif;
+}
+
+.comments-section form div {
+ margin-bottom: 10px;
+}
+
+.comments-section input[type="text"],
+.comments-section textarea {
+ width: calc(100% - 22px); /* Adjust for padding and border */
+ padding: 10px;
+ border: 1px solid #ccc; /* Light gray border */
+ border-radius: 4px;
+}
+
+.comments-section button {
+ padding: 10px 15px;
+ background-color: #3498db;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.comments-section button:hover {
+ background-color: #2980b9;
+}
+```
+*(Note: `sample_image.jpg` should exist for the image to display).*
+
+---
+
+**Q2. JavaScript DOM Manipulation and Validation**
+**(a) Create an HTML page with an image and two buttons: "Increase Size" and "Decrease Size". Write JavaScript functions to increase and decrease the displayed image's width by 10 pixels respectively on each button click. Ensure the width does not go below 50px or above 500px.**
+**(b) Add a text input field for "Username" and a submit button. Write a JavaScript validation function that on submit, checks if the username field is empty or contains less than 5 characters. If it is, display an alert message and prevent form submission.**
+
+**Answer:**
+```html
+
+
+
+ JS Image and Form
+
+
+
+ Image Resizer
+ Increase Size
+ Decrease Size
+
+ Username Validation
+
+
+
+
+
+```*(Note: `sample_icon.png` should exist for the image to display).*
+
+---
+
+**Q3. AngularJS Application**
+**Create an AngularJS application that displays a list of tasks. The user should be able to add a new task to the list using an input field and a button. Also, allow users to remove a task by clicking on it.**
+
+**Answer:**```html
+
+
+
+ AngularJS To-Do List
+
+
+
+
+
+ My To-Do List
+
+
+
+ No tasks yet! Add one above.
+
+
+
+```
+
+---
+
+**Section 2: Server-Side Technologies (Servlets, JSP, PHP & MySQL)**
+
+**Q4. Servlet for Dynamic Content Generation**
+**Write a Servlet that generates a simple dynamic greeting message based on the time of day. If the current time is before 12 PM, it should say "Good Morning, [Username]!"; between 12 PM and 6 PM "Good Afternoon, [Username]!"; and after 6 PM "Good Evening, [Username]!". The username should be passed as a request parameter.**
+
+**Answer:**
+```java
+// GreetingServlet.java
+// Assuming package com.example;
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.Calendar;
+import javax.servlet.ServletException;
+import javax.servlet.annotation.WebServlet;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+@WebServlet("/greetUser")
+public class GreetingServlet extends HttpServlet {
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ String username = request.getParameter("username");
+ if (username == null || username.trim().isEmpty()) {
+ username = "Guest";
+ }
+
+ Calendar cal = Calendar.getInstance();
+ int hourOfDay = cal.get(Calendar.HOUR_OF_DAY);
+ String greeting;
+
+ if (hourOfDay < 12) {
+ greeting = "Good Morning";
+ } else if (hourOfDay < 18) {
+ greeting = "Good Afternoon";
+ } else {
+ greeting = "Good Evening";
+ }
+
+ out.println("");
+ out.println("Dynamic Greeting ");
+ out.println("" + greeting + ", " + username + "! ");
+ out.println("Current server time was used to determine the greeting.
");
+ out.println("");
+ out.close();
+ }
+}
+```
+**To test:** Access via URL like `/greetUser?username=YourName`
+
+---
+
+**Q5. JSP for Database Interaction**
+**Create a JSP page that connects to a MySQL database (assume a table `products` with columns `product_id` (INT), `product_name` (VARCHAR), `price` (DECIMAL)). The JSP should retrieve all products whose price is greater than a value entered by the user in an HTML form (on the same page or a preceding page) and display them in an HTML table.**
+
+**Answer:**
+```jsp
+<%-- products_by_price.jsp --%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ page import="java.sql.*, java.util.*" %>
+
+
+
+ Products by Price
+
+
+
+ Filter Products by Minimum Price
+
+ Invalid price entered.
");
+ return; // Stop further processing
+ }
+
+ Connection conn = null;
+ PreparedStatement pstmt = null;
+ ResultSet rs = null;
+
+ String jdbcUrl = "jdbc:mysql://localhost:3306/your_database_name"; // Replace with your DB name
+ String dbUser = "your_db_user"; // Replace
+ String dbPassword = "your_db_password"; // Replace
+
+ try {
+ Class.forName("com.mysql.cj.jdbc.Driver");
+ conn = DriverManager.getConnection(jdbcUrl, dbUser, dbPassword);
+
+ String sql = "SELECT product_id, product_name, price FROM products WHERE price > ?";
+ pstmt = conn.prepareStatement(sql);
+ pstmt.setDouble(1, minPrice);
+ rs = pstmt.executeQuery();
+
+ if (!rs.isBeforeFirst()) { // Check if ResultSet is empty
+ out.println("No products found above the price of $" + String.format("%.2f", minPrice) + ".
");
+ } else {
+%>
+ Products with Price > $<%= String.format("%.2f", minPrice) %>
+
+ Product ID Product Name Price
+ <%= rs.getInt("product_id") %>
+ <%= rs.getString("product_name") %>
+ <%= String.format("%.2f", rs.getDouble("price")) %>
+
+<%
+ }
+%>
+
+<%
+ } // End of else (ResultSet not empty)
+ } catch (Exception e) {
+ out.println("Database Error: " + e.getMessage() + "
");
+ e.printStackTrace(out);
+ } finally {
+ if (rs != null) try { rs.close(); } catch (SQLException ignore) {}
+ if (pstmt != null) try { pstmt.close(); } catch (SQLException ignore) {}
+ if (conn != null) try { conn.close(); } catch (SQLException ignore) {}
+ }
+ } // End of if (minPriceStr is not null)
+%>
+
+
+```
+
+---
+
+**Q6. PHP and MySQL for a Simple CRUD Operation (Delete)**
+**Assume you have a `users` table in MySQL (`user_id` INT PK, `username` VARCHAR, `email` VARCHAR). Write a PHP script that:**
+ * Displays all users from the `users` table in an HTML table.
+ * Each row should have a "Delete" link/button next to it.
+ * When the "Delete" link/button is clicked for a specific user, that user's record should be deleted from the database, and the page should refresh to show the updated list.
+
+**Answer:**
+```php
+connect_error) {
+ die("Connection failed: " . $conn->connect_error);
+}
+
+// Handle delete request
+if (isset($_GET['delete_id'])) {
+ $userIdToDelete = intval($_GET['delete_id']); // Sanitize input
+ $deleteSql = "DELETE FROM users WHERE user_id = ?";
+ $stmt = $conn->prepare($deleteSql);
+ $stmt->bind_param("i", $userIdToDelete);
+ if ($stmt->execute()) {
+ echo "User deleted successfully.
";
+ } else {
+ echo "Error deleting user: " . $stmt->error . "
";
+ }
+ $stmt->close();
+ // Redirect to the same page to refresh the list (optional, can also just re-fetch)
+ // header("Location: user_management.php");
+ // exit;
+}
+
+?>
+
+
+
+ User Management
+
+
+
+ User List
+
+
+ User ID
+ Username
+ Email
+ Action
+
+ query($sql);
+
+ if ($result->num_rows > 0) {
+ // Output data of each row
+ while($row = $result->fetch_assoc()) {
+ echo "";
+ echo "" . htmlspecialchars($row["user_id"]) . " ";
+ echo "" . htmlspecialchars($row["username"]) . " ";
+ echo "" . htmlspecialchars($row["email"]) . " ";
+ echo "Delete ";
+ }
+ } else {
+ echo "No users found
+ close(); ?>
+
+
+```
+
+---
+
+**Section 3: Frameworks & Advanced Concepts**
+
+**Q7. Struts Framework Concept**
+**Explain the role of the `ActionForm` bean and the `Action` class in the Struts 1.x framework. How do they interact to handle a user request? Provide a conceptual outline (no full code needed).**
+
+**Answer:**
+In the Struts 1.x framework:
+
+* **`ActionForm` Bean:**
+ * **Role:** An `ActionForm` bean (a JavaBean that extends `org.apache.struts.action.ActionForm`) is used to capture and validate user input from an HTML form.
+ * **Functionality:** When a user submits a form, Struts automatically populates an instance of the `ActionForm` associated with that form using the request parameters. The names of the form fields in HTML typically match the property names in the `ActionForm` bean.
+ * It often contains a `validate()` method that Struts calls to perform server-side validation of the form data. If validation fails, Struts can automatically forward the user back to the input page with error messages.
+ * It essentially acts as a data transfer object (DTO) between the View (HTML form) and the Controller (`Action` class).
+
+* **`Action` Class:**
+ * **Role:** An `Action` class (a class that extends `org.apache.struts.action.Action`) acts as the Controller component in the MVC pattern. It handles the user's request, interacts with the Model (business logic/backend services), and determines the next View to be displayed.
+ * **Functionality:** The Struts controller servlet (`ActionServlet`) receives the request, identifies the appropriate `Action` class to handle it based on `struts-config.xml` mappings, and then invokes the `execute()` method of that `Action` class.
+ * The `execute()` method receives the populated `ActionForm` bean as an argument, along with `HttpServletRequest`, `HttpServletResponse`, and an `ActionMapping` object.
+
+* **Interaction:**
+ 1. User submits an HTML form.
+ 2. The `ActionServlet` (Struts Controller) receives the request.
+ 3. Struts creates/reuses an instance of the `ActionForm` bean configured for this request and populates its properties with the submitted form data.
+ 4. Struts calls the `validate()` method of the `ActionForm` (if defined).
+ * If validation fails, Struts typically forwards the request back to the input page (as specified in `struts-config.xml`) to display error messages. The `ActionForm` bean, with its current data and errors, is made available to this page.
+ 5. If validation succeeds (or no validation is performed), Struts calls the `execute()` method of the corresponding `Action` class.
+ 6. The `Action` class's `execute()` method receives the populated and validated `ActionForm` bean. It can access the user's input data from this bean.
+ 7. The `Action` class performs business logic, potentially interacting with backend services or databases using the data from the `ActionForm`.
+ 8. Based on the outcome of the business logic, the `Action` class returns an `ActionForward` object. This object tells Struts which View (e.g., a JSP page) to display next. Data needed by the next View can be placed in request or session scope by the `Action` class.
+
+This separation ensures that form data handling and validation are encapsulated in the `ActionForm`, while request processing logic is in the `Action` class.
+
+---
+
+**Q8. WordPress: Theme Customization**
+**Explain two common ways a WordPress user can customize the appearance of their website theme without directly editing core theme PHP files. What is the purpose of a child theme in this context?**
+
+**Answer:**
+Two common ways to customize a WordPress theme's appearance without editing core theme PHP files are:
+
+1. **Using the WordPress Customizer:**
+ * **Explanation:** The WordPress Customizer (Appearance > Customize in the admin dashboard) provides a live preview interface for making changes to the theme's appearance. The options available depend on what the theme developer has enabled.
+ * **Common Customizations:**
+ * **Site Identity:** Changing the site title, tagline, logo, and site icon (favicon).
+ * **Colors:** Modifying header text color, background color, accent colors.
+ * **Typography:** Selecting different fonts and font sizes for headings and body text.
+ * **Header/Footer:** Customizing header image, layout, or footer widgets/copyright text.
+ * **Menus:** Creating and assigning navigation menus to theme locations.
+ * **Widgets:** Adding, removing, and configuring widgets in sidebars, footers, and other widgetized areas.
+ * **Homepage Settings:** Choosing whether the homepage displays latest posts or a static page.
+ * **Additional CSS:** Most themes offer a section in the Customizer to add custom CSS rules for fine-grained styling adjustments. These CSS changes are saved separately and override theme styles.
+
+2. **Using Theme Options Panel (if provided by the theme):**
+ * **Explanation:** Many premium themes, and some advanced free themes, come with their own dedicated "Theme Options" panel, usually found under "Appearance" or as a top-level menu item in the WordPress admin. This panel offers more extensive customization options specific to that theme, often beyond what's available in the standard Customizer.
+ * **Common Customizations:** These can be more extensive, such as specific layout controls for different page types, advanced color pickers for various elements, font selection from a wider range (e.g., Google Fonts integration), social media integration settings, custom script/code insertion areas, and more.
+
+**Purpose of a Child Theme:**
+A child theme in WordPress is a theme that inherits the functionality, features, and styling of another theme, called the parent theme. The primary purpose of a child theme in the context of customization is:
+
+* **Safe Updates:** It allows you to make modifications (like editing `style.css` or theme template files like `header.php`, `footer.php`, or adding custom functions in `functions.php`) without altering the parent theme's files directly. When the parent theme is updated, your customizations in the child theme are preserved and are not overwritten. If you modify the parent theme directly, any updates to that theme would wipe out your changes.
+* **Organized Customizations:** It keeps all your custom code (CSS, PHP, JavaScript) separate and organized in the child theme's folder, making it easier to manage and troubleshoot.
+* **Extend Functionality:** You can add new templates or modify existing ones from the parent theme by copying the respective file to the child theme and then editing it there. WordPress will use the child theme's version of the file.
+* **Learning & Development:** It's a good way to learn how themes work by starting with a solid parent theme and gradually modifying parts of it.
+
+Essentially, a child theme is the recommended way to make significant structural or code-based customizations to a WordPress theme while ensuring those customizations are maintainable and update-proof. For minor CSS changes, the "Additional CSS" section in the Customizer is often sufficient.
+
+---
+This covers some different scenarios while still aligning with the core topics of your syllabus.
diff --git a/README.md b/README.md
index a93a788..48f41ad 100644
--- a/README.md
+++ b/README.md
@@ -1,52 +1 @@
-# Timepiece Haven Website
-my first project wbsite:
-
-A responsive e-commerce website for a luxury watch store called "Timepiece Haven". This project showcases a modern UI design with gradient animations and interactive elements.
-
-## 📋 Project Overview
-
-Timepiece Haven is a fictional luxury watch retailer website featuring product displays, contact forms, and responsive design. The project demonstrates modern web development practices including fluid layouts, CSS animations, and mobile-responsive design.
-
-## 🚀 Technologies Used
-
-- HTML5
-- CSS3 (with animations, flexbox, and grid)
-- JavaScript (ES6)
-- Font Awesome icons
-
-## ✨ Features
-
-- Responsive design that works on mobile, tablet, and desktop
-- Interactive product cards with hover effects
-- Contact form with validation
-- Animated gradient backgrounds
-- Mobile navigation menu
-- Product filtering functionality
-
-## 📁 Project Structure
-clock-shop-website/ ├── src/ │ ├── css/ │ │ ├── navigation.css │ │ └── styles.css │ ├── js/ │ │ └── main.js │ └── pages/ │ ├── index.html │ ├── products.html │ └── contact.html └── README.md
-
-## 🖥️ Setup and Installation
-
-1. Clone the repository:
-
-git clone https://github.com/RADson2005official/Web_techlab.git
-
-2. Navigate to the project directory:
-
-cd Web_techlab/clock-shop-website
-
-3. Open any HTML file in your browser to view the website.
-
-## 📸 Screenshots
-
-
-
-
-## 👤 Author
-
-- [RADson2005official](https://github.com/RADson2005official)
-
-## 📝 License
-
-This project is open source and available under the [MIT License](LICENSE).
\ No newline at end of file
+quetion paper on WEB-technology Refference purpose only
diff --git a/cia2.md b/cia2.md
new file mode 100644
index 0000000..08f10f5
--- /dev/null
+++ b/cia2.md
@@ -0,0 +1,492 @@
+
+**MAHARASHTRA - Regular TY Exam May 2025**
+**Subject: Web Technology (IT313)**
+**exam type: CIA2
+**Answer Sheet**
+
+---
+
+**Q.1 Attempt All**
+
+**A. What is CMS? Explain the different advantages of CMS.** (4 Marks)
+
+**Answer:**
+
+**CMS (Content Management System):**
+A Content Management System (CMS) is a software application or a set of related programs used to create, manage, and modify digital content without requiring specialized technical knowledge. It typically provides a user-friendly interface for content creation, editing, and publishing.
+
+**Advantages of CMS:**
+1. **Ease of Use:** Allows non-technical users to manage website content easily through intuitive interfaces (e.g., WYSIWYG editors).
+2. **Collaboration:** Multiple users can work on content simultaneously with defined roles and permissions (e.g., author, editor, administrator).
+3. **SEO-Friendly Features:** Many CMS platforms offer built-in tools or plugins for search engine optimization, like managing meta tags, sitemaps, and URL structures.
+4. **Pre-designed Templates & Themes:** Offers a wide variety of templates and themes, enabling quick website design and customization.
+5. **Extensibility:** Functionality can be extended through plugins, modules, or extensions for features like e-commerce, forums, contact forms, etc.
+6. **Content Scheduling & Version Control:** Allows scheduling content publication and often includes version history to revert to previous versions.
+7. **Cost-Effective:** Many CMS options are open-source (e.g., WordPress, Joomla, Drupal), reducing initial development costs.
+
+---
+
+**B. Explain the different steps for the installation of Wordpress.** (4 Marks)
+
+**Answer:**
+
+**Steps for WordPress Installation:**
+
+1. **Download WordPress:**
+ * Go to the official WordPress website (wordpress.org) and download the latest version as a ZIP file.
+
+2. **Create a Database & User:**
+ * Access your web hosting control panel (e.g., cPanel) or use a tool like phpMyAdmin.
+ * Create a new MySQL/MariaDB database.
+ * Create a new database user and assign a strong password.
+ * Grant this user all privileges on the newly created database. Note down the database name, username, and password.
+
+3. **Upload WordPress Files:**
+ * Extract the downloaded WordPress ZIP file on your local computer.
+ * Upload the extracted WordPress files and folders to your web server's root directory (e.g., `public_html` or `htdocs`) or a subdirectory if installing there. This can be done using an FTP client (like FileZilla) or the File Manager in your hosting control panel.
+
+4. **Configure `wp-config.php`:**
+ * Navigate to the WordPress directory on your server.
+ * Locate `wp-config-sample.php`, rename it to `wp-config.php`.
+ * Open `wp-config.php` in a text editor and update the following database details:
+ * `DB_NAME`: Your database name.
+ * `DB_USER`: Your database username.
+ * `DB_PASSWORD`: Your database user password.
+ * `DB_HOST`: Usually `localhost`, but check with your host.
+ * You can also set unique security keys.
+
+5. **Run the Installation Script:**
+ * Open your web browser and navigate to your domain (or the subdirectory where you uploaded WordPress).
+ * The WordPress installation script will start automatically (e.g., `yourdomain.com/wp-admin/install.php`).
+
+6. **Provide Site Information:**
+ * Follow the on-screen prompts:
+ * **Site Title:** The name of your website.
+ * **Username:** Your desired admin username (avoid "admin").
+ * **Password:** A strong password for the admin account.
+ * **Your Email:** For admin notifications.
+ * **Search engine visibility:** Choose whether to discourage search engines from indexing (can be changed later).
+
+7. **Complete Installation & Login:**
+ * Click "Install WordPress."
+ * Once done, you'll see a success message. You can then log in to your WordPress admin dashboard using the username and password you created.
+
+---
+
+**Q.2 Attempt All**
+
+**A. Use HTML to design Registration form with name, mobile, email and address. Read and display name, mobile, email and address of html using Httpservlet.** (5 Marks)
+
+**Answer:**
+
+**1. HTML Registration Form (`register.html`):**
+```html
+
+
+
+ Registration Form
+
+
+ User Registration
+
+
+
+```
+
+**2. `web.xml` (Deployment Descriptor for Servlet Mapping):**
+```xml
+
+
+ RegisterServlet
+ com.example.RegisterServlet
+
+
+ RegisterServlet
+ /RegisterServlet
+
+
+```
+*(Place in `WEB-INF` folder)*
+
+**3. `RegisterServlet.java` (HTTPServlet):**
+```java
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+public class RegisterServlet extends HttpServlet {
+ protected void doPost(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ // Read form parameters
+ String name = request.getParameter("userName");
+ String mobile = request.getParameter("userMobile");
+ String email = request.getParameter("userEmail");
+ String address = request.getParameter("userAddress");
+
+ // Display received data
+ out.println("");
+ out.println("");
+ out.println("");
+ out.println("Registration Details ");
+ out.println("");
+ out.println("");
+ out.println("Registered User Details: ");
+ out.println("Name: " + name + "
");
+ out.println("Mobile: " + mobile + "
");
+ out.println("Email: " + email + "
");
+ out.println("Address: " + address + "
");
+ out.println("");
+ out.println("");
+ out.close();
+ }
+}
+```
+*(Compile and place `RegisterServlet.class` in `WEB-INF/classes/com/example/` folder)*
+
+---
+
+**B. Use JDBC to display the employee details like emp_id, emp_name and emp_salary from MySQL database using Httpservlet.** (5 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* MySQL database named `companydb`.
+* Table named `employees` with columns `emp_id` (INT), `emp_name` (VARCHAR), `emp_salary` (DECIMAL).
+* MySQL JDBC driver JAR is in `WEB-INF/lib`.
+
+**1. `web.xml` (Deployment Descriptor for Servlet Mapping):**
+```xml
+
+
+ EmployeeServlet
+ com.example.EmployeeServlet
+
+
+ EmployeeServlet
+ /ViewEmployees
+
+
+```
+*(Place in `WEB-INF` folder)*
+
+**2. `EmployeeServlet.java` (HTTPServlet):**
+```java
+package com.example;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.sql.Connection;
+import java.sql.DriverManager;
+import java.sql.ResultSet;
+import java.sql.Statement;
+import javax.servlet.ServletException;
+import javax.servlet.http.HttpServlet;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+
+public class EmployeeServlet extends HttpServlet {
+ protected void doGet(HttpServletRequest request, HttpServletResponse response)
+ throws ServletException, IOException {
+ response.setContentType("text/html;charset=UTF-8");
+ PrintWriter out = response.getWriter();
+
+ String jdbcUrl = "jdbc:mysql://localhost:3306/companydb";
+ String dbUser = "root"; // Replace with your DB username
+ String dbPassword = "password"; // Replace with your DB password
+ Connection conn = null;
+ Statement stmt = null;
+ ResultSet rs = null;
+
+ out.println("Employee Details ");
+ out.println("Employee Details: ");
+ out.println("ID Name Salary " + id + " " + name + " " + salary + " Error: " + e.getMessage() + "
");
+ try { if (rs != null) rs.close(); } catch (Exception e) {}
+ try { if (stmt != null) stmt.close(); } catch (Exception e) {}
+ try { if (conn != null) conn.close(); } catch (Exception e) {}
+ out.close();
+ }
+ }
+}
+```
+*(Compile and place `EmployeeServlet.class` in `WEB-INF/classes/com/example/` folder. Access via `/ViewEmployees` URL)*
+
+---
+
+**Q.3 Attempt All (As per Image 2)**
+
+**A. Design a program in JSP to perform multiplication of two numbers using JSP declarative tag. Write the directory structure of JSP program.** (6 Marks)
+
+**Answer:**
+
+**1. `multiply.jsp`:**
+```jsp
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+
+
+
+ JSP Multiplication
+
+
+ Multiplication of Two Numbers using JSP Declarative Tag
+
+ <%!
+ // JSP Declarative Tag to define a method
+ public int multiplyNumbers(int num1, int num2) {
+ return num1 * num2;
+ }
+ %>
+
+
+
+ <%
+ String strNum1 = request.getParameter("num1");
+ String strNum2 = request.getParameter("num2");
+
+ if (strNum1 != null && strNum2 != null && !strNum1.isEmpty() && !strNum2.isEmpty()) {
+ try {
+ int number1 = Integer.parseInt(strNum1);
+ int number2 = Integer.parseInt(strNum2);
+ int result = multiplyNumbers(number1, number2); // Calling the declared method
+ %>
+ Result: <%= number1 %> * <%= number2 %> = <%= result %>
+ <%
+ } catch (NumberFormatException e) {
+ %>
+ Please enter valid integer numbers.
+ <%
+ }
+ }
+ %>
+
+
+```
+
+**2. Directory Structure of JSP Program:**
+A typical directory structure for a web application containing this JSP would be:
+
+```
+WebAppName/
+|-- multiply.jsp
+|-- WEB-INF/
+| |-- web.xml (Deployment Descriptor - can be minimal or auto-generated for simple JSPs)
+| |-- classes/ (For compiled Java classes, if any servlets are used)
+| |-- lib/ (For JAR files like database drivers, etc.)
+|-- index.html (Optional: an entry page that might link to multiply.jsp)
+```
+For this specific problem, `multiply.jsp` is the core. `web.xml` is generally present but might not need specific configuration for a standalone JSP unless advanced features or servlet interactions are involved.
+
+---
+
+**B. Use struts MVC to display product_id, product_name and product_price provided by the input page.** (6 Marks)
+
+**Answer:**
+
+**Assumptions:** Struts 1.x framework.
+
+**1. Input JSP (`inputProduct.jsp`):**
+```jsp
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
+
+
+Input Product Details
+
+ Enter Product Details
+
+ Product ID:
+
+
+```
+
+**2. ActionForm Bean (`ProductForm.java`):**
+(Place in `src/com/example/form/` or similar, then compiled to `WEB-INF/classes/com/example/form/`)
+```java
+package com.example.form;
+
+import org.apache.struts.action.ActionForm;
+// import org.apache.struts.action.ActionMapping; // For validate()
+// import javax.servlet.http.HttpServletRequest; // For validate()
+
+public class ProductForm extends ActionForm {
+ private String productId;
+ private String productName;
+ private double productPrice;
+
+ // Getters and Setters
+ public String getProductId() { return productId; }
+ public void setProductId(String productId) { this.productId = productId; }
+ public String getProductName() { return productName; }
+ public void setProductName(String productName) { this.productName = productName; }
+ public double getProductPrice() { return productPrice; }
+ public void setProductPrice(double productPrice) { this.productPrice = productPrice; }
+
+ // Optional: public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) { ... }
+}
+```
+
+**3. Action Class (`DisplayProductAction.java`):**
+(Place in `src/com/example/action/` or similar, then compiled to `WEB-INF/classes/com/example/action/`)
+```java
+package com.example.action;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import org.apache.struts.action.Action;
+import org.apache.struts.action.ActionForm;
+import org.apache.struts.action.ActionForward;
+import org.apache.struts.action.ActionMapping;
+import com.example.form.ProductForm;
+
+public class DisplayProductAction extends Action {
+ public ActionForward execute(ActionMapping mapping, ActionForm form,
+ HttpServletRequest request, HttpServletResponse response)
+ throws Exception {
+
+ ProductForm productForm = (ProductForm) form;
+
+ // Data is already in productForm from the input page.
+ // For a real app, you might do business logic here.
+ // Here, we just forward to the display page.
+ // The form bean will be available in the request scope for the display JSP.
+
+ return mapping.findForward("success");
+ }
+}
+```
+
+**4. Display JSP (`displayProduct.jsp`):**
+```jsp
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
+<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %> <%-- Optional, if using html tags --%>
+
+
+Product Details
+
+ Displayed Product Details
+ Product ID:
+ Product Name:
+ Product Price:
+
+ Enter Another Product
+
+
+```
+
+**5. Struts Configuration (`struts-config.xml`):**
+(Place in `WEB-INF` folder)
+```xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Directory Structure for Struts Application:**
+```
+WebAppName/
+|-- inputProduct.jsp
+|-- displayProduct.jsp
+|-- WEB-INF/
+| |-- classes/
+| | |-- com/
+| | | |-- example/
+| | | | |-- action/
+| | | | | |-- DisplayProductAction.class
+| | | | |-- form/
+| | | | | |-- ProductForm.class
+| |-- lib/ (Contains struts.jar and other dependency JARs)
+| |-- struts-config.xml
+| |-- web.xml (Configured with ActionServlet)
+```
+**`web.xml` also needs to be configured for Struts ActionServlet:**
+```xml
+
+
+ action
+ org.apache.struts.action.ActionServlet
+
+ config
+ /WEB-INF/struts-config.xml
+
+ 1
+
+
+ action
+ *.do
+
+
+
+```
+*(Note: If using `*.do` mapping, form action in `inputProduct.jsp` would be `/displayProduct.do`)*
+
+---
+**End of Answer Sheet**
diff --git a/re-cia1.md b/re-cia1.md
new file mode 100644
index 0000000..682053c
--- /dev/null
+++ b/re-cia1.md
@@ -0,0 +1,377 @@
+Okay, Professor! Here is the model answer sheet for the third question paper image you've provided. I'll ensure the answers align with the specified Bloom's Taxonomy levels (Understand and Apply) and maintain a concise format suitable for a written exam.
+
+---
+**Answer Sheet**
+**Exam Type: Re-CIA1
+**Course: Web Technology**
+
+---
+
+**Q.1 Attempt All (Blooms Taxonomy: Understand)**
+
+**A. What is web architecture? Explain the phases of website development.** (5 Marks)
+
+**Answer:**
+
+**Web Architecture:**
+Web architecture refers to the conceptual structure and logical organization of a website or web application. It defines how different components such as the client (browser), server (web server, application server, database server), network, and data interact with each other to deliver content and functionality to users. It encompasses the selection of technologies, protocols, and patterns used to build and operate the web system, focusing on aspects like performance, scalability, security, and maintainability.
+
+**Phases of Website Development (Website Development Life Cycle - WDLC):**
+
+1. **Planning & Information Gathering:**
+ * **Activities:** Understanding client requirements, defining website goals and target audience, scope definition, budget estimation, creating a sitemap, and technology stack consideration.
+ * **Outcome:** A clear project plan, functional specifications, and sitemap.
+
+2. **Design (UI/UX):**
+ * **Activities:** Creating wireframes, mockups, and prototypes. Designing the visual layout, user interface (UI), and user experience (UX). Defining branding elements like color schemes and typography.
+ * **Outcome:** Approved design mockups and style guides.
+
+3. **Development (Coding):**
+ * **Activities:** Writing the actual code for the website.
+ * **Front-end development:** Creating the client-side interface using HTML, CSS, and JavaScript.
+ * **Back-end development:** Building server-side logic, database interactions, and APIs using languages like PHP, Python, Java, Node.js, etc., and integrating with databases (e.g., MySQL).
+ * **Content Management System (CMS) setup/customization** if applicable.
+ * **Outcome:** A functional website according to the design and specifications.
+
+4. **Testing & Quality Assurance (QA):**
+ * **Activities:** Testing for functionality, usability, compatibility (across browsers and devices), performance, and security. Identifying and fixing bugs.
+ * **Outcome:** A stable, bug-free website ready for deployment.
+
+5. **Deployment:**
+ * **Activities:** Transferring the website files to a live web server. Configuring the server environment, domain name, and database connections. Performing final checks.
+ * **Outcome:** The website is live and accessible to users on the internet.
+
+6. **Maintenance & Updates:**
+ * **Activities:** Ongoing support, monitoring website performance, updating content, applying security patches, fixing new bugs, and adding new features based on user feedback or evolving requirements.
+ * **Outcome:** A secure, up-to-date, and well-performing website.
+
+---
+
+**B. What is Website? Explain the Web Architecture with client side and server side technologies.** (5 Marks)
+
+**Answer:**
+
+**Website:**
+A website is a collection of interlinked web pages and related content (such as images, videos, and other digital assets) that is identified by a common domain name and published on at least one web server. Websites are typically accessed via a network, such as the Internet or a private local area network, through a web browser. They can serve various purposes, such as providing information, offering services, facilitating e-commerce, or enabling social interaction.
+
+**Web Architecture with Client-Side and Server-Side Technologies:**
+
+Web architecture typically follows a multi-tier model, commonly a client-server model.
+
+1. **Client-Side (Presentation Tier):**
+ * **Role:** This is what the user interacts with directly in their web browser. It's responsible for presenting data to the user and collecting user input.
+ * **Technologies:**
+ * **HTML (HyperText Markup Language):** Defines the structure and content of web pages.
+ * **CSS (Cascading Style Sheets):** Controls the presentation, layout, and styling of HTML content.
+ * **JavaScript:** Enables dynamic content, interactivity, client-side validation, and manipulation of the HTML DOM (Document Object Model).
+ * **Frameworks/Libraries (e.g., React, Angular, Vue.js, jQuery):** Provide pre-written code and tools to simplify and accelerate client-side development.
+ * **Interaction:** The client (browser) sends requests to the server for web pages or data, and then renders the server's response.
+
+2. **Server-Side (Application Logic & Data Tier):**
+ * **Role:** This resides on the web server(s) and is responsible for processing client requests, executing business logic, interacting with databases, and generating responses (often dynamic HTML, XML, or JSON) to be sent back to the client.
+ * **Technologies:**
+ * **Web Server Software (e.g., Apache, Nginx, IIS):** Manages HTTP requests from clients and serves static files or passes dynamic requests to application servers.
+ * **Server-Side Programming Languages (e.g., PHP, Python (Django/Flask), Java (Spring), Ruby (Rails), Node.js (Express.js), C# (.NET)):** Used to write the application logic, handle data processing, and interact with databases.
+ * **Databases (e.g., MySQL, PostgreSQL, MongoDB, SQL Server, Oracle):** Store and manage the application's data.
+ * **APIs (Application Programming Interfaces):** Allow different software components (e.g., client and server, or different microservices) to communicate.
+ * **Application Servers (e.g., Tomcat for Java, Gunicorn for Python):** Provide the runtime environment for server-side applications.
+ * **Interaction:** Receives requests from the client, processes them (e.g., queries a database, performs calculations), and sends back a response.
+
+*(A simple diagram could show: User -> Browser (Client-Side: HTML, CSS, JS) -> Internet -> Web Server (Server-Side: PHP/Python/Java, Database) -> Internet -> Browser)*
+
+---
+
+**Q.2 Attempt All (Blooms Taxonomy: Apply)**
+
+**A. Write a program in HTML and javascript to display cube of a given number.** (5 Marks)
+
+**Answer:**
+
+```html
+
+
+
+ Calculate Cube
+
+
+
+ Calculate Cube of a Number
+ Enter a number:
+ Calculate Cube
+
+
+
+```
+**Explanation:**
+1. **HTML Structure:** An input field (`numberInput`) for the user to enter a number, a button to trigger the calculation, and a paragraph (`result`) to display the output.
+2. **JavaScript Function `calculateCube()`:**
+ * Retrieves the value from the `numberInput` field.
+ * Uses `parseFloat()` to convert the input string to a floating-point number.
+ * `isNaN()` checks if the conversion resulted in a valid number.
+ * Calculates the cube by multiplying the number by itself twice (or using `Math.pow(number, 3)`).
+ * Updates the `innerHTML` of the `result` paragraph to display the calculated cube or an error message.
+
+---
+
+**B. Write a program to accept two numbers from user and display addition using AngularJS.** (5 Marks)
+
+**Answer:**
+
+```html
+
+
+
+ AngularJS Addition
+
+
+
+
+ Addition of Two Numbers using AngularJS
+
+
+ Enter Number 1:
+
+
+ Enter Number 2:
+
+
+
Sum: {{ sum }}
+
+
+
+
+
+
+
+```
+**Explanation:**
+1. **`ng-app="additionApp"`:** Initializes an AngularJS application named `additionApp`.
+2. **AngularJS Script:**
+ * The AngularJS library is included from a CDN.
+ * `angular.module("additionApp", [])` defines the application module.
+ * `app.controller("additionController", ...)` defines a controller.
+ * `$scope.num1`, `$scope.num2`, and `$scope.sum` are model variables bound to the view.
+ * `$scope.calculateSum` is a function that calculates the sum of `num1` and `num2` and stores it in `$scope.sum`.
+3. **`ng-controller="additionController"`:** Attaches the controller to the `` element.
+4. **`ng-model="num1"` and `ng-model="num2"`:** Two-way data binding between the input fields and the `$scope.num1` and `$scope.num2` variables.
+5. **`ng-change="calculateSum()"`:** Calls the `calculateSum` function whenever the value in the input fields changes.
+6. **`{{ sum }}`:** An AngularJS expression that displays the value of `$scope.sum`.
+
+---
+
+**Q.3 Attempt All (Blooms Taxonomy: Apply)**
+
+**A. Write a program in PHP using MYSQL to display student record like roll_no, name, mobile, email and address in tabular form.** (5 Marks)
+
+**Answer:**
+
+**Assumptions:**
+* MySQL database named (e.g.) `schooldb`.
+* Table named `students` with columns: `roll_no` (INT/VARCHAR, Primary Key), `name` (VARCHAR), `mobile` (VARCHAR), `email` (VARCHAR), `address` (TEXT).
+* This example uses MySQLi.
+
+```php
+
+
+
+ Student Records
+
+
+
+ Student Records
+
+ connect_error) {
+ die("Connection failed: " . $conn->connect_error . "
");
+ }
+
+ $sql = "SELECT roll_no, name, mobile, email, address FROM students";
+ $result = $conn->query($sql);
+
+ if ($result === false) {
+ echo "Error executing query: " . htmlspecialchars($conn->error) . "
";
+ } elseif ($result->num_rows > 0) {
+ echo "";
+ echo "Roll No Name Mobile Email Address ";
+ echo "" . htmlspecialchars($row["roll_no"]) . " ";
+ echo "" . htmlspecialchars($row["name"]) . " ";
+ echo "" . htmlspecialchars($row["mobile"]) . " ";
+ echo "" . htmlspecialchars($row["email"]) . " ";
+ echo "" . htmlspecialchars($row["address"]) . " ";
+ echo " ";
+ }
+ echo "
";
+ } else {
+ echo "No student records found.
";
+ }
+
+ // Close connection
+ $conn->close();
+ ?>
+
+
+```
+**Explanation:**
+1. **Database Connection:** Establishes connection to MySQL using `mysqli`.
+2. **SQL Query:** A `SELECT` query fetches `roll_no`, `name`, `mobile`, `email`, and `address` from the `students` table.
+3. **Execute Query & Fetch Results:**
+ * `$conn->query($sql)` executes the query.
+ * `$result->num_rows > 0` checks if any records were returned.
+ * `$result->fetch_assoc()` fetches one row at a time as an associative array.
+4. **Display in Table:** The data is formatted into an HTML table. `htmlspecialchars()` is used to prevent XSS vulnerabilities when displaying data.
+5. **Error Handling & Closing:** Basic error checking for connection and query execution. The connection is closed.
+
+---
+
+**B. Sort the given numbers using inbuilt sorting functions of PHP in ascending, decending and without changing indices. 7, 3, 9, 1, 8** (5 Marks)
+
+**Answer:**
+
+```php
+ 7
+// [1] => 3
+// [2] => 9
+// [3] => 1
+// [4] => 8
+
+echo "\n--- Sorting while attempting to maintain key-value association ---\n";
+$numbers_assoc_asc = $numbers; // Create a copy
+asort($numbers_assoc_asc); // Sorts array by values, maintaining key association
+echo "\nSorted in Ascending Order by value, maintaining keys (asort()):\n";
+print_r($numbers_assoc_asc);
+// Output will be:
+// Array
+// (
+// [3] => 1
+// [1] => 3
+// [0] => 7
+// [4] => 8
+// [2] => 9
+// )
+
+$numbers_assoc_desc = $numbers; // Create a copy
+arsort($numbers_assoc_desc); // Sorts array in reverse order by values, maintaining key association
+echo "\nSorted in Descending Order by value, maintaining keys (arsort()):\n";
+print_r($numbers_assoc_desc);
+// Output will be:
+// Array
+// (
+// [2] => 9
+// [4] => 8
+// [0] => 7
+// [1] => 3
+// [3] => 1
+// )
+
+echo "\nNote: For a simple numerically indexed array, 'without changing indices' typically refers to using functions like asort() or arsort(), which preserve the original key associated with each value after sorting based on values. If the keys were meaningful (e.g., associative array keys), this becomes more apparent. For simple numeric arrays like [7,3,9,1,8], the keys are 0,1,2,3,4.\n";
+
+?>
+```
+**Explanation:**
+* **`$numbers =;`**: The initial array of numbers.
+* **Ascending Sort (`sort()`):**
+ * `sort($asc_numbers);` sorts the array elements from lowest to highest.
+ * **Important:** `sort()` re-indexes the array, so the keys will be 0, 1, 2, 3, 4 regardless of their original positions.
+* **Descending Sort (`rsort()`):**
+ * `rsort($desc_numbers);` sorts the array elements from highest to lowest.
+ * **Important:** `rsort()` also re-indexes the array.
+* **Sorting "Without Changing Indices" (Maintaining Key-Value Association):**
+ * This phrase is most meaningful for associative arrays where keys are explicit strings or numbers. For simple numerically indexed arrays, it means the value at original index `i` moves, but its association with that original index `i` is preserved if we use functions like `asort()` or `arsort()`.
+ * **`asort($numbers_assoc_asc);`**: Sorts an array by its **values** in ascending order, maintaining the original **key-value** associations. The output shows the original keys `(3, 1, 0, 4, 2)` associated with their sorted values.
+ * **`arsort($numbers_assoc_desc);`**: Sorts an array by its **values** in descending order, maintaining the original **key-value** associations.
+
+For the given simple numeric array, `sort()` and `rsort()` are the direct answers for ascending/descending. `asort()` and `arsort()` demonstrate how PHP handles sorting while preserving key associations, which addresses the "without changing indices" part by showing how values are sorted while their original keys follow them.
+
+---
+**End of Answer Sheet**
diff --git a/screenshots/home-aboutus.png b/screenshots/home-aboutus.png
deleted file mode 100644
index 4fe9f29..0000000
Binary files a/screenshots/home-aboutus.png and /dev/null differ
diff --git a/screenshots/home-cards.png b/screenshots/home-cards.png
deleted file mode 100644
index 7cc2917..0000000
Binary files a/screenshots/home-cards.png and /dev/null differ
diff --git a/screenshots/home-footer.png b/screenshots/home-footer.png
deleted file mode 100644
index a7a21f5..0000000
Binary files a/screenshots/home-footer.png and /dev/null differ
diff --git a/screenshots/home-nav.png b/screenshots/home-nav.png
deleted file mode 100644
index 4d401ca..0000000
Binary files a/screenshots/home-nav.png and /dev/null differ
diff --git a/src/css/navigation.css b/src/css/navigation.css
deleted file mode 100644
index 1ec75e4..0000000
--- a/src/css/navigation.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* Navigation styles */
-.navbar {
- background-color: #2c3e50;
- padding: 1rem 0;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.nav-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 90%;
- max-width: 1200px;
- margin: 0 auto;
- padding: 0 20px;
-}
-
-.logo {
- color: white;
- font-size: 1.5rem;
- font-weight: bold;
- text-decoration: none;
-}
-
-.nav-menu {
- display: flex;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.nav-item {
- margin: 0 1rem;
-}
-
-.nav-link {
- color: white;
- text-decoration: none;
- font-size: 1rem;
- transition: color 0.3s ease;
-}
-
-.nav-link:hover {
- color: #3498db;
-}
-
-.nav-toggle {
- display: none;
- flex-direction: column;
- cursor: pointer;
-}
-
-.nav-toggle span {
- display: block;
- width: 25px;
- height: 3px;
- margin: 2px 0;
- background-color: white;
-}
-
-/* Responsive navigation */
-@media screen and (max-width: 768px) {
- .nav-menu {
- position: fixed;
- top: 70px;
- left: -100%;
- flex-direction: column;
- background-color: #2c3e50;
- width: 100%;
- text-align: center;
- transition: 0.3s;
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
- }
-
- .nav-menu.active {
- left: 0;
- }
-
- .nav-item {
- margin: 1.5rem 0;
- }
-
- .nav-toggle {
- display: flex;
- }
-}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/css/styles.css b/src/css/styles.css
deleted file mode 100644
index 1a7a30b..0000000
--- a/src/css/styles.css
+++ /dev/null
@@ -1,288 +0,0 @@
-/* General styles */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Arial', sans-serif;
-}
-
-body {
- background-color: #f8f8f8;
- color: #333;
- line-height: 1.6;
-}
-
-.container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
-}
-
-h1, h2, h3 {
- margin-bottom: 20px;
-}
-
-/* Contact form styles */
-.contact-form {
- background-color: #fff;
- max-width: 600px;
- margin: 40px auto;
- padding: 30px;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.form-group {
- margin-bottom: 20px;
-}
-
-.form-label {
- display: block;
- margin-bottom: 8px;
- font-weight: bold;
-}
-
-.form-control {
- width: 100%;
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 16px;
-}
-
-.form-control:focus {
- outline: none;
- border-color: #4a90e2;
- box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
-}
-
-textarea.form-control {
- height: 150px;
- resize: vertical;
-}
-
-.btn {
- display: inline-block;
- background-color: #4a90e2;
- color: #fff;
- padding: 10px 20px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 16px;
- transition: background-color 0.3s ease;
-}
-
-.btn:hover {
- background-color: #3a7bc8;
-}
-
-body {
- font-family: Arial, sans-serif;
- line-height: 1.6;
- color: #333;
-}
-
-.container {
- width: 90%;
- max-width: 1200px;
- margin: 0 auto;
- padding: 1rem;
-}
-
-h1 {
- font-size: 2.5rem;
- margin: 2rem 0 1rem;
- color: #2c3e50;
-}
-
-h2 {
- font-size: 2rem;
- margin: 1.5rem 0;
- color: #2c3e50;
-}
-
-p {
- margin-bottom: 1rem;
-}
-
-/* Featured Products Section */
-.featured-products {
- margin: 3rem 0;
-}
-
-.product-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 2rem;
-}
-
-.product-card {
- border: 1px solid #e1e1e1;
- border-radius: 5px;
- overflow: hidden;
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.product-card:hover {
- transform: translateY(-5px);
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-}
-
-.product-image img {
- width: 100%;
- height: 200px;
- object-fit: cover;
-}
-
-.product-details {
- padding: 1rem;
-}
-
-.price {
- font-weight: bold;
- color: #2c3e50;
- margin: 0.5rem 0;
-}
-
-.view-btn {
- display: inline-block;
- background: #3498db;
- color: white;
- padding: 0.5rem 1rem;
- text-decoration: none;
- border-radius: 4px;
- margin-top: 0.5rem;
-}
-
-/* About Section */
-.about-section {
- margin: 3rem 0;
- padding: 2rem;
- background-color: #f8f9fa;
- border-radius: 5px;
-}
-
-/* Footer */
-footer {
- background-color: #2c3e50;
- color: white;
- padding: 1rem 0;
- margin-top: 2rem;
- text-align: center;
-}
-
-/* Base styles */
-body {
- font-family: 'Arial', sans-serif;
- line-height: 1.6;
- color: #333;
- margin: 0;
- padding: 0;
- background-color: #f9f9f9;
-}
-
-/* Container styling */
-.container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 1rem;
-}
-
-/* Gradient elements */
-.gradient-bg {
- background: linear-gradient(-45deg, #525cee, #c1ebff, #23a6d5, #23d5ab);
- background-size: 400% 400%;
- animation: gradient 15s ease infinite;
-}
-
-/* Button styling */
-.btn {
- display: inline-block;
- background: linear-gradient(45deg, #23a6d5, #23d5ab);
- color: white;
- border: none;
- border-radius: 30px;
- padding: 0.75rem 1.5rem;
- cursor: pointer;
- font-weight: 600;
- text-transform: uppercase;
- font-size: 0.9rem;
- transition: all 0.3s ease;
-}
-
-.btn:hover {
- transform: translateY(-3px);
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-}
-
-/* Card styling */
-.card {
- background: white;
- border-radius: 20px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
- padding: 1.5rem;
- transition: all 0.3s ease;
-}
-
-.card:hover {
- transform: translateY(-5px);
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-}
-
-/* Form styling - general */
-.form-group {
- margin-bottom: 1.5rem;
-}
-
-.form-label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 600;
-}
-
-.form-control {
- width: 100%;
- padding: 0.75rem;
- border: 1px solid #ddd;
- border-radius: 8px;
- transition: border 0.3s;
- font-size: 1rem;
-}
-
-.form-control:focus {
- outline: none;
- border-color: #23a6d5;
- box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-/* Utility classes */
-.text-center {
- text-align: center;
-}
-
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.mt-3 { margin-top: 1.5rem; }
-.mt-4 { margin-top: 2rem; }
-.mt-5 { margin-top: 3rem; }
-
-.mb-1 { margin-bottom: 0.5rem; }
-.mb-2 { margin-bottom: 1rem; }
-.mb-3 { margin-bottom: 1.5rem; }
-.mb-4 { margin-bottom: 2rem; }
-.mb-5 { margin-bottom: 3rem; }
-
-/* Animation keyframes */
-@keyframes gradient {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
- .container {
- padding: 1rem;
- }
-}
diff --git a/src/js/main.js b/src/js/main.js
deleted file mode 100644
index 1695466..0000000
--- a/src/js/main.js
+++ /dev/null
@@ -1,66 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
- // Mobile menu toggle
- const navToggle = document.querySelector('.nav-toggle');
- const navMenu = document.querySelector('.nav-menu');
-
- if (navToggle && navMenu) {
- navToggle.addEventListener('click', function() {
- navMenu.classList.toggle('active');
- });
- }
-
- // Close mobile menu when clicking a nav link
- const navLinks = document.querySelectorAll('.nav-link');
- navLinks.forEach(link => {
- link.addEventListener('click', function() {
- if (navMenu.classList.contains('active')) {
- navMenu.classList.remove('active');
- }
- });
- });
-
- // Form validation (for contact form)
- const contactForm = document.querySelector('.contact-form');
-
- if (contactForm) {
- contactForm.addEventListener('submit', function(event) {
- event.preventDefault();
-
- // Basic validation
- const name = document.getElementById('name');
- const email = document.getElementById('email');
- const message = document.getElementById('message');
-
- let isValid = true;
-
- if (!name.value.trim()) {
- isValid = false;
- alert('Please enter your name');
- }
-
- if (!email.value.trim()) {
- isValid = false;
- alert('Please enter your email');
- } else if (!isValidEmail(email.value)) {
- isValid = false;
- alert('Please enter a valid email address');
- }
-
- if (!message.value.trim()) {
- isValid = false;
- alert('Please enter your message');
- }
-
- if (isValid) {
- // Here you would typically send the form data to a server
- alert('Thank you for your message! We will get back to you soon.');
- contactForm.reset();
- }
- });
- }
-
- function isValidEmail(email) {
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
- return emailRegex.test(email);
- }
-});
diff --git a/src/pages/about.html b/src/pages/about.html
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/contact.html b/src/pages/contact.html
deleted file mode 100644
index 47add74..0000000
--- a/src/pages/contact.html
+++ /dev/null
@@ -1,299 +0,0 @@
-
-
-
- Timepiece Haven - Contact Us
- Timepiece Haven - Luxury Watches
-
-
-
Discover Timeless Elegance
-
Explore our collection of premium watches crafted with precision and designed for those who appreciate the artistry of time.
-
Browse Collection
-
-
-
-
- Featured Timepieces
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Our Craftsmanship
-
At Timepiece Haven, we believe in the art of watchmaking. Each timepiece in our collection represents decades of tradition combined with innovative technology.
-
Our master craftsmen dedicate themselves to creating watches that not only tell time but tell a story. A story of precision, elegance, and timeless design.
-
Learn More
-
-
-
Timepiece Haven - Our Collection
-
-
Our Collection
-
-
- Filter by Category
-
- All
- Luxury
- Sport
- Classic
- Smart
-
-
-
-
-
-
-
-
New
-
-
-
Chronograph Excellence
-
Precision engineering with Swiss movement and sapphire crystal.
-
$1,299.99
-
Add to Cart
-
-
-
-
-
New
-
-
-
Chronograph Excellence
-
Precision engineering with Swiss movement and sapphire crystal.
-
$1,299.99
-
Add to Cart
-
-
-
Welcome Message
+
+
+
+ Welcome Page
+ Click for Welcome Message
+
+
+
+```
+
+**script.js:**
+```javascript
+function showWelcome() {
+ document.getElementById("message").innerHTML =
+ "Welcome to Our Website! ";
+}
+```
+
+**b) Use JavaScript Object to store employee id, name, salary and display it on webpage.**
+
+```html
+
+
+
+ Employee Details
+
+
+ Employee Information
+ Show Employee Details
+
+
+
+
+
+```
+
+### Question 4
+**a) Write a program in JavaScript and HTML to accept two numbers from user and display multiplication of it using alert window.**
+
+```html
+
+
+
+ Multiplication Calculator
+
+
+ Multiplication Calculator
+ Calculate
+
+
+
+
+```
+
+**b) Use jQuery to hide the paragraph on HTML using button.**
+
+```html
+
+
+
+ Hide Paragraph with jQuery
+
+
+
+ jQuery Hide Example
+ This paragraph will be hidden when you click the button below.
+ Hide Paragraph
+ Show Paragraph
+
+
+
+
+```
+
+### Question 5
+**a) Write a program in PHP to create login form and store the username and password in session and retrieve it on other form.**
+
+**login.php:**
+```php
+
+
+
+
+Login Form
+
+ Login Form
+
+
+
+```
+
+**welcome.php:**
+```php
+
+
+
+
+Welcome Page
+
+ Welcome Page
+ Username:
+ Password:
+ Logout
+
+
+```
+
+**logout.php:**
+```php
+
+```
+
+**b) Use PHP and MySQL connectivity to store the book details like book_id, book_name, author, price and quantity into database table ebookshop.**
+
+```php
+Book details stored successfully!";
+ } else {
+ echo "Error: " . mysqli_error($conn) . "
";
+ }
+}
+
+mysqli_close($conn);
+?>
+
+
+
+Book Entry Form
+
+ Add Book Details
+
+
+
+```
+
+**Database Table Creation:**
+```sql
+CREATE TABLE books (
+ book_id VARCHAR(10) PRIMARY KEY,
+ book_name VARCHAR(100) NOT NULL,
+ author VARCHAR(50) NOT NULL,
+ price DECIMAL(10,2) NOT NULL,
+ quantity INT NOT NULL
+);
+```
+
+### Question 6
+**a) Write a program in PHP using MySQL to update the student's details like roll_no, name, email and marks into the database table student_details.**
+
+```php
+Student details updated successfully!";
+ } else {
+ echo "Error: " . mysqli_error($conn) . "
";
+ }
+}
+
+mysqli_close($conn);
+?>
+
+
+
+Update Student Details
+
+ Update Student Information
+
+
+
+ All Students:
+ ";
+ echo "Roll No Name Email Marks Action ";
+ echo "" . $row['roll_no'] . " ";
+ echo "" . $row['name'] . " ";
+ echo "" . $row['email'] . " ";
+ echo "" . $row['marks'] . " ";
+ echo "Edit ";
+ }
+ echo "";
+
+ mysqli_close($conn);
+ ?>
+
+
+```
+
+**Database Table Creation:**
+```sql
+CREATE TABLE student_details (
+ roll_no VARCHAR(10) PRIMARY KEY,
+ name VARCHAR(50) NOT NULL,
+ email VARCHAR(100) NOT NULL,
+ marks INT NOT NULL
+);
+```
+
+---
+**Note:** All answers are designed for BTL 3 Apply level, focusing on practical implementation with minimal yet complete code examples suitable for written examination.
+
+### Question 6
+**b) Use multidimensional array in PHP to store book title, editor and author of three different books and display it using for loop.**
+
+```php
+";
+ echo "Title: " . $books[$i][0] . "Hello Servlet ");
+ }
+
+ public void destroy() {}
+ public ServletConfig getServletConfig() { return config; }
+ public String getServletInfo() { return "Hello Servlet"; }
+}
+```
+
+**web.xml:**
+```xml
+
+
+
+ HelloServlet
+ HelloServlet
+
+
+ HelloServlet
+ /hello
+
+
+```
+
+**b) Use JDBC to display book details like book_id, book_name and book_author from MySQL database using HttpServlet.**
+
+```java
+import java.io.*;
+import javax.servlet.http.*;
+import java.sql.*;
+
+public class BookServlet extends HttpServlet {
+ public void doGet(HttpServletRequest req, HttpServletResponse res)
+ throws ServletException, IOException {
+ res.setContentType("text/html");
+ PrintWriter out = res.getWriter();
+
+ try {
+ Class.forName("com.mysql.jdbc.Driver");
+ Connection con = DriverManager.getConnection(
+ "jdbc:mysql://localhost:3306/library", "root", "password");
+
+ Statement stmt = con.createStatement();
+ ResultSet rs = stmt.executeQuery("SELECT * FROM books");
+
+ out.println("");
+ out.println("Book ID Book Name Author ");
+ out.println("" + rs.getInt("book_id") + " ");
+ out.println("" + rs.getString("book_name") + " ");
+ out.println("" + rs.getString("book_author") + " ");
+ out.println(" ");
+ }
+ out.println("
");
+ con.close();
+ } catch(Exception e) {
+ out.println("Error: " + e);
+ }
+ }
+}
+```
+
+### Question 10
+**a) Design Login form with username and password in html, Read and display username and password of html using HttpServlet.**
+
+**login.html:**
+```html
+
+
+Login Form
+
+
+
+
+```
+
+**LoginServlet.java:**
+```java
+import java.io.*;
+import javax.servlet.http.*;
+
+public class LoginServlet extends HttpServlet {
+ public void doPost(HttpServletRequest req, HttpServletResponse res)
+ throws ServletException, IOException {
+
+ String username = req.getParameter("username");
+ String password = req.getParameter("password");
+
+ res.setContentType("text/html");
+ PrintWriter out = res.getWriter();
+
+ out.println("Login Details: ");
+ out.println("Username: " + username + "Cookie Details: ");
+
+ if(cookies != null) {
+ for(Cookie cookie : cookies) {
+ out.println("Name: " + cookie.getName() +
+ ", Value: " + cookie.getValue() + "${message}
+ Welcome to the dashboard!
+
+
+```
+
+**error.jsp:**
+```jsp
+<%@ page language="java" %>
+
+
+ ${message}
+ Try Again
+
+
+```
+
+**b) Write a program in JSP to find the square of the given number using JSP declaration tag. Write the directory structure of JSP program.**
+
+**square.jsp:**
+```jsp
+<%@ page language="java" %>
+<%!
+ public int findSquare(int num) {
+ return num * num;
+ }
+%>
+
+
+ Square Calculator
+ <%
+ int number = 5;
+ int result = findSquare(number);
+ %>
+ Square of <%= number %> is <%= result %>
+
+
+```
+
+**Directory Structure:**
+```
+WebApp/
+├── WEB-INF/
+│ ├── web.xml
+│ ├── classes/
+│ └── lib/
+├── square.jsp
+├── login.html
+└── index.html
+```
+
+### Question 12
+**a) Use struts MVC to display product_id, product_name and product_price provided by the input page.**
+
+**Product.java (Model):**
+```java
+public class Product {
+ private String productId;
+ private String productName;
+ private double productPrice;
+
+ // Getters and Setters
+ public String getProductId() { return productId; }
+ public void setProductId(String productId) { this.productId = productId; }
+
+ public String getProductName() { return productName; }
+ public void setProductName(String productName) { this.productName = productName; }
+
+ public double getProductPrice() { return productPrice; }
+ public void setProductPrice(double productPrice) { this.productPrice = productPrice; }
+}
+```
+
+**ProductAction.java:**
+```java
+import com.opensymphony.xwork2.ActionSupport;
+
+public class ProductAction extends ActionSupport {
+ private Product product = new Product();
+
+ public String execute() {
+ return "success";
+ }
+
+ public Product getProduct() { return product; }
+ public void setProduct(Product product) { this.product = product; }
+}
+```
+
+**struts.xml:**
+```xml
+
+
+
+ /display.jsp
+
+
+
+```
+
+**display.jsp:**
+```jsp
+<%@ taglib prefix="s" uri="/struts-tags" %>
+
+
+ Product Details
+ Product ID:
+ Product Name:
+ Product Price:
+
+
+```
+
+**b) Write a program in JSP to perform multiplication of two numbers using JSP declarative tag. Write the directory structure of JSP program.**
+
+**multiplication.jsp:**
+```jsp
+<%@ page language="java" %>
+<%!
+ public int multiply(int a, int b) {
+ return a * b;
+ }
+%>
+
+
+ Multiplication Calculator
+ <%
+ int num1 = 8;
+ int num2 = 6;
+ int result = multiply(num1, num2);
+ %>
+ <%= num1 %> × <%= num2 %> = <%= result %>
+
+
+```
+
+**JSP Directory Structure:**
+```
+WebApplication/
+├── WEB-INF/
+│ ├── web.xml
+│ ├── classes/
+│ │ └── (compiled servlets)
+│ ├── lib/
+│ │ └── (JAR files)
+│ └── src/
+├── multiplication.jsp
+├── META-INF/
+└── index.html
+```
+
+---
+