QQ1.. Project: Community Library Management Website You are required to design and implement a dynamic web application for a "Community Library". The website will allow users to browse available books and submit a request to borrow a book. The website must consist of three pages, all following the layout shown in Figure 1.
- (i)) Create Three HTML Pages: Create three separate HTML files: index.html (Home), books.jsp (Available Books), and borrow.html (Borrow). All three pages must share the same layout as described in Figure 1, with a common Top Division for navigation. (142 words)
- (ii)) CSS Styling: Create an external CSS file (style.css) and link it to all three pages. This file should define the following styles: The Top Division should have a dark background color (#333) with white text for the navigation links. The Information Division should have a light grey background (#f4f4f4). The currently active navigation link should be highlighted (e.g., with a different background color or an underline). Use appropriate fonts, margins, and padding to make the layout clean and readable. (142 words)
- (iii)) Home Page (index.html): The Information Division of the Home page should display: A welcoming headline, e.g., 'Welcome to the Community Library'. A brief description of the library's mission and operating hours. An image of a library or books. (142 words)
- (iv)) Borrow Page (borrow.html) and JavaScript Validation: The Information Division of the Borrow page should contain a form for users to request a book. The form must include fields for: Full Name (Text input) Email Address (Email input) Book ID (Text input, referring to the ID from the "Available Books" page) Borrow Date (Date input) Create a JavaScript function to validate this form on submission: All fields must not be empty. The Email Address must be in a valid format (e.g., contain and '.'). The Book ID must be a number. If validation fails, display an alert message and prevent the form from submitting. (142 words)
- (v)) Database Setup: Create a database (e.g., in MySQL or Oracle) named library_db. Inside this database, create a table named books with the following schema: BookID (INT, Primary Key) Title (VARCHAR(100)) Author (VARCHAR(100)) Genre (VARCHAR(50)) Status (VARCHAR(20), e.g., 'Available' or 'Borrowed') Insert at least five sample records into the books table. (142 words)
- (vi)) Available Books Page (books.jsp): This page must be a JSP page. The Information Division should dynamically generate a table of all books from the library_db database. Use JSP scriptlets (<% ... %>) to connect to the database. Execute a SQL query to fetch all records from the books table. Use a loop to display the data in an HTML table with the columns: Book ID, Title, Author, Genre, and Status. Only books with the status 'Available' should have a green background color for the status cell. Books with 'Borrowed' status should have a red background.