Q1.(a) Design and implement a website/web application consisting of three pages having the following layout:Â
Create three pages having the same layout as shown in Figure 1. The Top Division contains the following
links:
: Link to Home Page
: Link to a Mobile List Page created using JSP
: Link to a Comments Page containing a formÂ
The Information Division of the three pages should be as per the following description:
 (i) The Home Page should display the name of the mobile store "Mobile for You". It should display the
objectives and address of the mobile store.Â
 (ii) The Mobile List Page should be generated by a query to a database "Mobiles" having a single relation
Mobile_ram (Mobile_make, RAM_size).
 You must use JSP to connect to database and display information as:Â
Mobile List
Make RAM (GB)
Samsung 2
Apple 4
16
You must display at least five mobiles in this list.Â
iii) The Comments Page should display a form as shown below : (Please do not write the code for
processing or verification of the form)
                                  Â
Ans:- To create a web application with three pages in Java Server Pages (JSP), follow this outline. Each page will have a consistent layout, and the content will vary based on the requirements. Here’s a breakdown of the pages:
---
 Page Layout (Shared by All Pages)
All three pages will have the same layout with:
- A **Top Division** containing links to Home, Mobile List, and Comments pages.
- An **Information Division** that will display content specific to each page.
 Folder Structure
Ensure your files are organized as follows:
```
MobileStoreApp/
├── index.jsp      (Home Page)
├── mobileList.jsp   (Mobile List Page)
├── comments.jsp    (Comments Page)
└── WEB-INF/
  └── lib/      (any necessary JDBC driver)
  └── classes/
  └── web.xml     (configuration file)
```
 Database Setup
Create a database named `Mobiles` with a table called `Mobile_ram` that contains columns for `Mobile_make` and `RAM_size`.
Example SQL:
```sql
CREATE DATABASE Mobiles;
USE Mobiles;
CREATE TABLE Mobile_ram (
  Mobile_make VARCHAR(50),
  RAM_size INT
);
INSERT INTO Mobile_ram (Mobile_make, RAM_size) VALUES
  ('Samsung', 2),
  ('Apple', 4),
  ('OnePlus', 8),
  ('Nokia', 6),
  ('Google', 12);
```
---
1. Home Page (`index.jsp`)
This page displays the name, objectives, and address of the mobile store.
```jsp
<!DOCTYPE html>
<html>
<head>
  <title>Mobile for You - Home</title>
</head>
<body>
  <div id="top">
    <a href="index.jsp">Home</a> |
    <a href="mobileList.jsp">Mobile List</a> |
    <a href="comments.jsp">Comments</a>
  </div>
  <div id="information">
    <h1>Mobile for You</h1>
    <p><b>Objectives:</b> To provide the latest and most affordable mobile devices to our customers.</p>
    <p><b>Address:</b> 123 Mobile Street, Tech City, Country</p>
  </div>
</body>
</html>
```
---
2. Mobile List Page (`mobileList.jsp`)
This page connects to the `Mobiles` database, retrieves data from the `Mobile_ram` table, and displays it in a table.
```jsp
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
  <title>Mobile for You - Mobile List</title>
</head>
<body>
  <div id="top">
    <a href="index.jsp">Home</a> |
    <a href="mobileList.jsp">Mobile List</a> |
    <a href="comments.jsp">Comments</a>
  </div>
  <div id="information">
    <h2>Mobile List</h2>
    <table border="1">
      <tr>
        <th>Make</th>
        <th>RAM (GB)</th>
      </tr>
      <%
        // Database connection details
        String url = "jdbc:mysql://localhost:3306/Mobiles";
        String username = "root";
        String password = "password";
        Â
        try {
          Class.forName("com.mysql.cj.jdbc.Driver");
          Connection conn = DriverManager.getConnection(url, username, password);
          Statement stmt = conn.createStatement();
          String query = "SELECT Mobile_make, RAM_size FROM Mobile_ram";
          ResultSet rs = stmt.executeQuery(query);
          Â
          while(rs.next()) {
            String make = rs.getString("Mobile_make");
            int ram = rs.getInt("RAM_size");
      %>
      <tr>
        <td><%= make %></td>
        <td><%= ram %></td>
      </tr>
      <%
          }
          rs.close();
          stmt.close();
          conn.close();
        } catch(Exception e) {
          e.printStackTrace();
      %>
      <tr>
        <td colspan="2">Error loading mobile list.</td>
      </tr>
      <%
        }
      %>
    </table>
  </div>
</body>
</html>
```
Make sure to replace `username` and `password` with your actual MySQL credentials.
---
 3. Comments Page (`comments.jsp`)
This page displays a form for submitting comments.
```jsp
<!DOCTYPE html>
<html>
<head>
  <title>Mobile for You - Comments</title>
</head>
<body>
  <div id="top">
    <a href="index.jsp">Home</a> |
    <a href="mobileList.jsp">Mobile List</a> |
    <a href="comments.jsp">Comments</a>
  </div>
  <div id="information">
    <h2>Leave a Comment</h2>
    <form action="submitComment.jsp" method="post">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required><br><br>
      Â
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required><br><br>
      Â
      <label for="comments">Comments:</label><br>
      <textarea id="comments" name="comments" rows="4" cols="50" required></textarea><br><br>
      Â
      <input type="submit" value="Submit">
    </form>
  </div>
</body>
</html>
```
This page provides a simple form for users to submit their comments. The `submitComment.jsp` file would handle form processing (not required for this task).
---
 Important Notes
1. **JDBC Driver**: Ensure that the MySQL JDBC driver (e.g., `mysql-connector-java.jar`) is in the `WEB-INF/lib` directory.
2. **Database Connection**: Replace `username`, `password`, and other connection details with your actual database credentials.
3. **Testing**: Run the application on a local server like Apache Tomcat to view each page.
This setup provides a basic web application with consistent layout across pages, database connectivity with JSP, and a simple form for user input.
(b) Create an external CSS file that ensures that format of all the three pages is as per the layout of Figure
1. The background colour of Link Division should be light green.
You may make suitable assumptions, if needed.
Ans:-Â To achieve a consistent layout across the three pages, create an external CSS file named `styles.css` with the following styling. This CSS file will define the layout and appearance of all divisions (Top, Link, and Information) to match the specifications given.
 `styles.css`
```css
/* General styling for the whole page */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
/* Styling for the Top Division (header with links) */
#top {
  background-color: lightgreen; /* Link Division background */
  padding: 10px;
  text-align: center;
}
#top a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  margin: 0 15px;
}
#top a:hover {
  color: darkgreen;
}
/* Information Division styling */
#information {
  padding: 20px;
  margin: 20px;
  background-color: #f9f9f9; /* light gray background for contrast */
  border: 1px solid #ddd;
  border-radius: 5px;
}
/* Page heading */
h1, h2 {
  color: #333;
}
/* Table styling for Mobile List page */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
table, th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f0f0f0; /* light gray for header */
}
tr:nth-child(even) {
  background-color: #f9f9f9; /* alternating row color */
}
/* Form styling for Comments page */
form label {
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
input[type="submit"] {
  background-color: darkgreen;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
input[type="submit"]:hover {
  background-color: green;
}
```
 Explanation of the CSS File
1. **General Body Styling**: Sets a basic font and removes padding/margin for a cleaner layout.
2. **Top Division (`#top`)**:
  - Applies a light green background and centers the navigation links.
  - Styles links with bold text and adds hover effects.
3. **Information Division (`#information`)**:
  - Adds padding, a light gray background, and border for the content section.
4. **Table Styling**:Â
  - Used on the Mobile List page to format the mobile data.
  - Sets alternating row colors for readability.
5. **Form Styling**:Â
  - Ensures that form elements on the Comments page are full-width with padding.
  - Adds styling to the submit button with hover effects.
Adding the CSS File to the Pages
Link the CSS file to each JSP page by adding the following line within the `<head>` section of each HTML document:
```html
<link rel="stylesheet" type="text/css" href="styles.css">
```
This CSS file will ensure that all three pages have a unified layout and appearance according to the specified requirements.
No comments: