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: Node.js, Express.js.
▪ Database: MongoDB (with Mongoose ODM for interaction).
▪ Template Engine: EJS.

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

luanvt@uit.edu.vn
 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 Node.js. 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@uit.edu.vn
 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@uit.edu.vn
 Lab 5. Dynamic Web Application

4
Download and extract the file lab05-starter.zip. 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/
├── app.js # Main server file
├── package.json
├── public/ # Static files
│ ├── css/ # CSS files
│ └── style.css # Styles for the site
├── views/ # EJS templates
│ ├── partials/ # Layout
│ │ ├── header.ejs # Header template
│ │ ├── footer.ejs # Footer template
│ ├── books/ # Book views (add, edit, list)
│ │ ├── list.ejs # Book list view
│ │ ├── ...ejs # Other view for book
├── routes/ # Routes for books
│ └── books.js
├── models/ # Mongoose schemas
│ └── book.js

Remember to update the constant MONGODB_URI string in file app.js 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 Node.js 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@uit.edu.vn
 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: https://www.w3schools.com/html/
2. HTML elements reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
3. HTML Tutorial: https://www.geeksforgeeks.org/html
4. CSS: https://www.w3schools.com/css/default.asp
5. https://www.geeksforgeeks.org/how-to-build-library-management-system-using-node-js/

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

luanvt@uit.edu.vn