Web Tech Report
Web Tech Report
(Autonomous)
Perundurai, Erode – 638 060
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
Submitted by
KAVINNATH A R (22CSR094)
KISHORE V (22CSR101)
BACHELOR OF ENGINEERING IN
COMPUTER SCIENCE AND ENGINEERING
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
1
TABLE OF CONTENTS
VII. CONCLUSION 26
IX. REFERENCES 32
2
1. PROBLEM STATEMENT
In the age of digital entertainment, movie enthusiasts constantly seek platforms to share and
discover opinions on the latest films. However, existing solutions often lack the ability to
effectively manage and organize user reviews, leading to cluttered interfaces and suboptimal user
experiences. This creates a significant gap for users who desire a streamlined, intuitive system to
browse, submit, and manage movie reviews, leading to frustration and disengagement.
We have addressed this challenge by developing a robust Movie Review Management System
that connects seamlessly with MongoDB, a NoSQL database known for its flexibility and
scalability. By integrating MongoDB with our web application, we have enabled comprehensive
CRUD (Create, Read, Update, Delete) operations on movie reviews. Users can easily add new
reviews, view a list of existing reviews, update their previously submitted reviews, and delete
reviews they no longer wish to share. This efficient data management ensures a user-friendly
experience, with quick and reliable access to the latest movie reviews.
Our Movie Review Management System successfully bridges the gap between movie enthusiasts
and their desire for a cohesive review management platform. By leveraging MongoDB for its
powerful data handling capabilities, we have created a solution that is both scalable and user-
centric. This system not only enhances the user experience by providing a structured and
intuitive interface for managing movie reviews but also lays the groundwork for future
enhancements and scalability, ensuring that it can grow alongside its user base.
3
2. TABLE DESIGN
MONGODB :
MONGOOSE :
DATABASE SCHEMA
COLLECTION IN MONGODB
Users Collection
o Fields:
4
name (String): The name of the user.
email (String): The email of the user.
password (String): The hashed password of the user.
MovieDetails Collection
o Fields:
mname (String): Name of the movie.
director (String): Director of the movie.
genre (String): Genre of the movie.
language (String): Language of the movie.
rating (Number): Average rating of the movie.
review (String): Summary review of the movie.
image (String): URL of the movie poster image.
trailer (String): URL of the movie trailer.
isLatest (Boolean): Indicates if the movie is the latest release.
Items Collection
o Fields:
name (String): Name of the user submitting the review.
email (String): Email of the user submitting the review.
mname (String): Name of the movie being reviewed.
director (String): Director of the movie being reviewed.
rating (Number): Rating given by the user.
review (String): Review text submitted by the user.
5
The app.js file contains the routes and functions that interact with these collections:
USER AUTHENTICATION:
Signup:
Login:
MOVIE MANAGEMENT:
Add Movie:
REVIEW MANAGEMENT:
Add Review:
6
Update Review:
Delete Review:
View Reviews:
SEARCH FUNCTIONALITY:
Search Movies:
// User Schema
7
email: { type: String, required: true, unique: true },
password: { type: String, required: true }
});
// MovieDetails Schema
// Models
8
const User = mongoose.model('User', userSchema);
const MovieDetails = mongoose.model('MovieDetails', movieDetailsSchema);
const Items = mongoose.model('Items', itemsSchema);
module.exports = { User, MovieDetails, Items };
SUMMARY
The backend design revolves around three primary collections in MongoDB: users,
movieDetails, and items, each serving distinct roles in user management, movie information,
and user reviews, respectively. These collections are accessed and manipulated through
various Express routes defined in the app.js file. The combination of Node.js, Express.js,
MongoDB, and Mongoose ensures a robust, scalable, and flexible backend for the movie
review system.
9
3. FRONT END TECHNOLOGIES
The project incorporates several frontend technologies to create an interactive and visually
appealing user interface for a movie review system. The primary technologies and frameworks
used include HTML, CSS, JavaScript, and Bootstrap. Additionally, EJS (Embedded JavaScript)
templates are used to generate dynamic HTML content on the server side. The frontend design
ensures responsiveness, user-friendliness, and modern aesthetics.
HTML
HTML (HyperText Markup Language) is used as the backbone of the frontend structure.
It defines the layout and elements of the web pages. The key HTML files in the project
are:
insert.html : This file provides the form for users to insert movie reviews. It includes
various form fields such as text inputs, email inputs, radio buttons for rating, and a
text area for reviews.
update.html : This file provides the form for users to update movie reviews. It
includes various form fields such as text inputs, email inputs, radio buttons for rating,
and a text area for reviews.
delete.html : This file provides the form for users to delete movie reviews. It includes
various form fields such as text inputs, email inputs
10
Key Elements:
Form structure with inputs for name, email, movie name, director,
rating, and review.
Navigation bar for easy access to different sections of the site.
JavaScript to prefill form fields based on URL parameters.
CSS
CSS (Cascading Style Sheets) is used to style the HTML elements. The project uses both
internal CSS and external CSS frameworks to ensure a consistent look and feel.
INTERNAL CSS:
Example styles
BOOTSTRAP
Key Features:
11
Responsive grid system for layout.
Pre-styled components like navigation bars, buttons, and forms.
Utility classes for margins, padding, and text alignment.
JAVASCRIPT :
JavaScript is used to add interactivity and dynamic behavior to the web pages. The
project includes both inline JavaScript within HTML files and external scripts.
INLINE JAVASCRIPT :
EXTERNAL JAVASCRIPT :
jQuery: A fast, small, and feature-rich JavaScript library included via a CDN.
It simplifies HTML document traversal, event handling, and animation.
Popper.js: A library used for positioning tooltips and popovers in web
applications, ensuring they appear correctly relative to other elements.
Bootstrap JavaScript: Provides interactive components like modals, tooltips,
and carousels.
EJS is a simple templating language that lets you generate HTML markup with plain
JavaScript. It is used to render dynamic content on the server side before sending it to the
client.
USAGE :
12
The project uses EJS templates for pages like addMovie.ejs and home.ejs,
where dynamic data from the server (such as movie details) needs to be
displayed.
BENEFITS :
Static Assets: The app.js file sets up the static directory using express.static to serve
CSS, JavaScript, and image files.
Views and Templating: EJS templates are set up in the views directory, and the view
engine is configured in app.js.
Form Handling: Forms in HTML files send data to server routes defined in app.js,
where the data is processed, stored, or used to generate dynamic responses.
SUMMARY
13
4. SERVER TECHNOLOGY
The server-side application utilizes Node.js with the Express framework to handle HTTP
requests, perform CRUD operations, and interact with a MongoDB database through Mongoose.
This stack is popular for building scalable, high-performance web applications due to its non-
blocking, event-driven architecture and flexibility in handling asynchronous operations.
KEY TECHNOLOGIES
NODE.JS :
EXPRESS.JS :
MONGODB :
A NoSQL database that uses a flexible, JSON-like format for storing data.
Allows for dynamic schema design, making it easy to evolve data models.
14
Provides high performance, scalability, and availability.
MONGOOSE :
In app.js:
15
mongoose.connect('mongodb://localhost:27017/movieDB', {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
});
16
review: { type: String, default: '' },
image: { type: String, default: '' },
trailer: { type: String, default: '' },
isLatest: { type: Boolean, default: false }
});
Routes define how the server responds to various HTTP requests. Example routes
from app.js:
SIGNUP ROUTE:
Handles user registration.
Checks if the user already exists.
Hashes the password before saving the user to the database.
17
Redirects the user based on the outcome of the registration process.
LOGIN ROUTE
Handles user authentication.
Checks user credentials.
Uses bcrypt to compare the entered password with the hashed
password stored in the database.
Manages user sessions.
18
app.post('/login', (req, res) => {
const { email, password } = req.body;
User.findOne({ email: email }).then(user => {
if (user) {
bcrypt.compare(password,user.password,(err,result)= > {
if (result) {
req.session.user = user;
res.redirect('/');
} else {
res.redirect('/login?error=incorrect');
}
});
} else {
res.redirect('/login?error=notfound');
}
}).catch(err => {
console.log(err);
});
});
20
await db.collection("items").updateOne(
{ name },
{
$set: {
email, age, phone, gender, country
}
}
);
console.log("1 document updated");
res.redirect("/");
} catch (err) {
console.error("Error updating data:", err);
res.status(500).send("Failed to update data");
}
});
SEARCH ROUTES
21
Handles movie search functionality.
Uses a case-insensitive regex query to search for movies by name.
SECURITY MEASURES
Password Hashing: Uses bcrypt to hash passwords before storing them in the
database.
Session Management: Uses express-session to handle user sessions securely.
Error Handling: Routes handle errors by logging them and providing
appropriate user feedback.
The server-side code efficiently manages user authentication, movie data, and user reviews
using a combination of Node.js, Express.js, MongoDB, and Mongoose. The architecture is
designed to handle asynchronous operations, ensuring high performance and scalability. With
well-defined routes and schemas, the server provides a robust backbone for the movie review
system.
22
5. HOSTING THE PROJECT
COMPLETION OF THE PROJECT
Ensure Your Code is Ready: Make sure your project is complete and functioning as
expected. Check for bugs, optimize performance, and clean up any unnecessary code.
Version Control: Use a version control system like Git to manage your code.
Platforms like GitHub, GitLab, and Bitbucket are commonly used.
Create an Account: Sign up for an account on the hosting platform of your choice.
Create a New Project: Follow the platform’s instructions to create a new project or
application.
STATIC WEBSITE :
For platforms like GitHub Pages, you simply push your code to a specific
branch (e.g., gh-pages) of your repository.
DYNAMIC WEBSITE :
Heroku: Install the Heroku CLI, log in, create a new Heroku app, and push
your code to Heroku using Git.
23
AWS: Use services like EC2 for virtual servers, S3 for static file hosting, and
RDS for databases. AWS has extensive documentation to guide you through
the process.
Google Cloud Platform: Use Google App Engine or Compute Engine,
depending on your needs. GCP also has detailed tutorials and guides.
24
GIT LINK : https://github.com/kavinnath-22CSR094/MOVIE-REVIEW-MANAGEMENT-
SYSTEM
7. CONCLUSION
25
The provided project, a Movie Review System, is a full-stack web application built using
Node.js, Express.js, and MongoDB. It demonstrates a comprehensive approach to web
development, integrating user authentication, CRUD operations for movie reviews, and a
polished front-end utilizing Bootstrap for responsive design. The backend leverages Node.js for
server-side scripting and Express.js for efficient routing, middleware, and request handling.
MongoDB, a NoSQL database, is used for storing data in a flexible, JSON-like format, with
Mongoose as an ODM library to define schemas and interact with the database. EJS templates
dynamically generate HTML, enhancing the user interface, while Bootstrap ensures a modern,
responsive design. The server setup, outlined in app.js, includes middleware for parsing requests
and routes for various endpoints, interacting with MongoDB to manage data. This project
exemplifies a well-structured application, showcasing the integration of modern web
technologies to create a robust and scalable system. The combination of these technologies
provides a solid foundation for handling web application requirements, ensuring the project is
ready for real-world use with the ability to manage traffic, maintain security, and deliver a
seamless user experience. The detailed integration of Node.js, Express.js, MongoDB, EJS, and
Bootstrap showcases best practices in modern web development, making the project a valuable
learning resource and a potential foundation for future enhancements.
8. APPENDIX – SCREENSHOTS
SIGNUP :
26
FIGURE A 1 : SIGNUP PAGE
LOGIN :
HOME :
27
FIGURE A 3 : HOME PAGE
ADD MOVIE :
28
FIGURE A 5 : HOME PAGE AFTER ADDING A MOVIIE
MOVIE REVIEW :
29
FIGURE A 7 : ADDING A MOVIE REVIEW
30
FIGURE A 9 : REPORT PAGE
9. REFERENCES
31
"Node.js Design Patterns" by Mario Casciaro, Packt Publishing, 2014.
"Node.js the Right Way" by Jim R. Wilson, Pragmatic Bookshelf, 2013.
"MongoDB: The Definitive Guide" by Kristina Chodorow and Shannon Bradshaw,
O'Reilly Media, 2013.
"MongoDB in Action" by Kyle Banker, Peter Bakkum, Shaun Verch, and Douglas
Garrett, Manning Publications, 2011.
"Eloquent JavaScript: A Modern Introduction to Programming" by Marijn Haverbeke, No
Starch Press, 3rd Edition, 2018.
"Embedded Systems with ARM Cortex-M Microcontrollers in Assembly Language and
C: Third Edition" by Yifeng Zhu, E-Man Press LLC, 2021.
32