0% found this document useful (0 votes)
89 views5 pages

Dynamic Library Management App Lab

Uploaded by

23560056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
89 views5 pages

Dynamic Library Management App Lab

Uploaded by

23560056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Lab 5.

Dynamic Web Application


UNIVERSITY OF INFORMATION TECHNOLOGY

1
5. DYNAMIC WEB APPLICATION
Website Design and Development

A. OVERVIEW
1. Learning Objective
▪ Design a web application to manage book borrowing.
▪ Implement CRUD (Create, Read, Update, Delete) operations with MongoDB.
▪ Dynamically render content using Template Engine.
▪ Enhance user experience with structured layouts from Lab 2.

2. Tools and environments


▪ Frontend: HTML5, CSS, JavaScript (reusing Lab 2’s layout).
▪ Backend: [Link], [Link].
▪ Database: MongoDB (with Mongoose ODM for interaction).
▪ Template Engine: EJS.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2024


luanvt@[Link]
Lab 5. Dynamic Web Application

2
B. LAB TASKS
In this lab, you will create a dynamic web application to manage books in a library
using [Link]. The application will allow users to perform CRUD operations (Create,
Read, Update, Delete) for managing the books.
Book Attributes: Each book will have the following attributes stored in the
database:
▪ Title
▪ Author
▪ Description
▪ Genre
▪ Date of Publication
▪ Publisher
▪ Number of pages
▪ Reader Reviews (comments)
▪ View Count
Book’s comment Attributes: Each comment will have the following attributes
stored in the database:
▪ Name of the commenter
▪ Comment content
▪ Date of comment
1. Website Layout: The layout will be reused from Lab 2 (CSS and Layout),
leveraging the EJS template engine to design the pages. The layout includes:
▪ Header: Fixed for all pages, includes logo, and navigation links such as
Home, Add Book, and List Books.
▪ Footer: Fixed for all pages, contains contact information and copyright
notice.
▪ Main Section: Displays dynamic content such as the book list, book details,
or forms.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2024


luanvt@[Link]
Lab 5. Dynamic Web Application

3
Figure 1: The example of the layout of the book's details page (lab 02)

Requirements
1. Website Layout:
▪ Use the Express template engine (EJS) for designing the website layout.
▪ The header and footer must be consistent across all pages.
2. Website features: Update and extend the files in routes, views, and other
directories to implement the following functionalities:
▪ List all books: Display a table or grid showing all the books in the library.
▪ Add a book: Provide a form to add a new book to the library.
▪ Update a book: Create a form to update the details of an existing book.
▪ Show a book: Display detailed information about a specific book.
▪ Delete a book: Implement functionality to remove a book from the
library.
3. Increment View Count: When a book’s detail page is viewed (/books/<book-
id>), increment the view count for that book in the database.
4. Reader comments: on the book details page:
▪ Add a section to display all reader comments for the book.
▪ Include a form at the bottom to allow users to submit new comments.

Tips: Explore the Starter Kit


Follow these steps to get started:

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2024


luanvt@[Link]
Lab 5. Dynamic Web Application

4
Download and extract the file [Link]. Then, navigate to the
project folder containing the pre-setup files and folder structure.
Open the folder using your code editor (Visual Studio Code is
recommended)
The project includes the following essential files and directories
lab05/
├── [Link] # Main server file
├── [Link]
├── public/ # Static files
│ ├── css/ # CSS files
│ └── [Link] # Styles for the site
├── views/ # EJS templates
│ ├── partials/ # Layout
│ │ ├── [Link] # Header template
│ │ ├── [Link] # Footer template
│ ├── books/ # Book views (add, edit, list)
│ │ ├── [Link] # Book list view
│ │ ├── ...ejs # Other view for book
├── routes/ # Routes for books
│ └── [Link]
├── models/ # Mongoose schemas
│ └── [Link]

Remember to update the constant MONGODB_URI string in file [Link] to your own.
Install Dependencies: Open the terminal in Visual Studio Code and ru
npm install -y

Start the web server: Use nodemon to start the [Link] application and
automatically restart the server on file changes:
npm run start

Development tips:
▪ Ensure the layout and functionality meet the requirements.
▪ Test each feature thoroughly (e.g., adding, updating, and deleting books).

This lab will help you gain hands-on experience with building a web application,
working with databases, and using a template engine to create dynamic layouts. Good
luck!

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2024


luanvt@[Link]
Lab 5. Dynamic Web Application

5
C. REQUIREMENTS AND SUBMISSION
You must complete all tasks in section B (Lab tasks). Advanced tasks are optional,
and you could get bonus points for completing those tasks. This lab is designed for
individuals. You have seven days to clear all tasks.
Your submission must meet the following requirements:
▪ Take a screenshot of your application/website.
▪ If the submission contains more than one file, you must place all files/folders
inside a folder whose name pattern is "StudentID-Name.” Then, archive this
folder in the zip format.
Your submissions must be your own. You are free to discuss with other classmates
to find the solution. However, copying is prohibited, even if only a part of your report.
Both reports of the owner and the copier will be rejected. Please remember to cite
any source of the material (website, book, etc.) that influences your solution.

D. REFERENCES
1. W3Scholl HTML Tutorial: [Link]
2. HTML elements reference: [Link]
3. HTML Tutorial: [Link]
4. CSS: [Link]
5. [Link]

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2024


luanvt@[Link]

Common questions

Powered by AI

The recommended backend technologies for implementing the bookstore management system are Node.js and Express.js. These are suitable because Node.js allows for efficient handling of asynchronous operations essential for database interactions, making it a good choice for scalable applications. Express.js, built on Node, simplifies server-side logic, allowing for quick setup and routing capabilities. Combined, they provide a robust and flexible framework for handling the server logic required for CRUD operations, dynamic rendering, and session management needed in the bookstore application .

Maintaining a consistent website layout across all pages, including fixed headers and footers, is crucial for a positive user experience. Consistency aids in navigation, as users can predict where essential links and information will be located, reducing cognitive load. It enhances user satisfaction and trust, as a professionally unified interface implies reliability. This consistency also reinforces brand identity through design elements and ensures that dynamic content doesn't disrupt the visual flow, providing a seamless experience .

Setting up the necessary development environment involves downloading and extracting `lab05-starter.zip`, then opening the extracted folder in Visual Studio Code. Next, ensure that `MONGODB_URI` is updated in the `app.js` to your own database string. Install necessary dependencies using `npm install -y`, and then start the application using a command like `npm run start` or `nodemon` for automatic server reloads on file changes .

Optimizing server start configuration involves using tools like `nodemon` for automatic server restarts on code changes, enhancing development efficiency. Ensuring proper setup of environment variables for database connection strings and other sensitive information is essential for security and ease of configuration changes. Furthermore, optimizing middleware use in Express to handle requests efficiently and setting up service workers for caching and performance can greatly benefit the application's responsiveness and scalability .

Incrementing the view count each time a book's details page is viewed provides metrics on book popularity and user engagement. This data is crucial for management to understand user interests and potentially guide stock ordering or promotional efforts. Analyzing view counts can reveal trends over time, inform decisions on site layout changes, and highlight which types of books draw more attention, thus tailoring services to user preferences for increased satisfaction and sales .

When adding a comment system, consider designing a user-friendly interface that allows users to easily add and view comments. Each comment should capture the commenter’s name, content, and date, stored in the database. The system must handle simultaneous submissions and ensure comments are displayed in reverse chronological order for relevance. Security measures such as input validation and protection against injection attacks are crucial to protect user data and maintain application integrity .

Book attributes must be managed as separate fields within a document in MongoDB using Mongoose ODM. Key attributes include title, author, description, genre, date of publication, publisher, number of pages, reader reviews, and view count. Managing these attributes as fields allows for easy retrieval, updating, and deletion of information using CRUD operations. This structure is important to maintain data integrity, facilitate seamless searching and indexing, and ensure the application can function responsively as it scales .

The key functionalities required for building this dynamic web application include implementing CRUD operations (Create, Read, Update, Delete) using MongoDB, dynamically rendering content using a Template Engine like EJS, and enhancing user experience with specific layout structures. Additionally, the application must allow users to list all books, add a new book, update book details, show book information, and delete a book. Furthermore, there must be a system to increment the view count of a book each time its detail page is viewed, and functionality to allow reader comments on book details pages .

CRUD functionality (Create, Read, Update, Delete) enhances book management by offering a comprehensive set of operations to handle all aspects of data manipulation. This enables users to seamlessly add new books, retrieve lists and details, update information, and delete records as needed. Having these operations readily available allows administrators to keep the book database accurate and up-to-date, ensuring users always have access to the latest information, which increases operational efficiency and user satisfaction .

Using a template engine like EJS contributes to the development by allowing dynamic rendering of web pages and maintaining a consistent layout across pages. EJS enables embedding JavaScript into HTML to generate dynamic content. In the context of managing books, EJS templates can render lists of books, details of a specific book, and forms for adding or updating book information. This reusability and consistency across different parts of the application enhance user experience and streamline development .

You might also like