Thanks to visit codestin.com
Credit goes to www.scribd.com

0% found this document useful (0 votes)
15 views32 pages

Web Tech Report

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

Web Tech Report

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

KONGU ENGINEERING COLLEGE

(Autonomous)
Perundurai, Erode – 638 060
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

MOVIE REVIEW MANAGEMENT SYSTEM

A MINI PROJECT REPORT


IN
22CSL42 - WEB TECHNOLOGY LABORATORY

Submitted by

KAVINNATH A R (22CSR094)

KISHORE V (22CSR101)

in partial fulfilment of the requirements for the award of the degree


of

BACHELOR OF ENGINEERING IN
COMPUTER SCIENCE AND ENGINEERING
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

1
TABLE OF CONTENTS

CHAPTER TITLE PAGE No.


No.
I. PROBLEM STATEMENT 3

II. TABLE DESIGN 4

III. FRONT END TECHNOLOGIES 10

IV. SERVER TECHNOLOGY 14

V. HOSTING THE PROJECT 23

VI. GIT LINK OF THE PROJECT 25

VII. CONCLUSION 26

VIII. APPENDIX – SCEENSHOTS 27

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

 TECHNOLOGIES USED FOR BACKEND

 NODE.JS AND EXPRESS.JS :

 Node.js: JavaScript runtime for building fast, scalable server-side


applications.
 Express.js: Framework for Node.js, providing robust features for web and
mobile applications.

 MONGODB :

 A NoSQL database for storing and retrieving data in a flexible, JSON-like


format.

 MONGOOSE :

 An ODM (Object Data Modeling) library for MongoDB and Node.js,


providing a straightforward, schema-based solution to model application data.

 DATABASE SCHEMA

 COLLECTION IN MONGODB

 Users Collection

o Purpose: Stores user information for authentication and user


management.

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 Purpose: Stores detailed information about movies.

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 Purpose: Stores user reviews for movies.

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.

 BACKEND ROUTES AND FUNCTIONS

5
The app.js file contains the routes and functions that interact with these collections:

 USER AUTHENTICATION:

 Signup:

 Route: POST /signup


 Function: Checks for existing user and inserts new user data into the
users collection.

 Login:

 Route: POST /login


 Function: Verifies user credentials against the users collection.

 MOVIE MANAGEMENT:

 Add Movie:

 Route: POST /addMovie


 Function: Inserts movie data into the movieDetails collection.

 View Movie Details:

 Route: GET /movies/:id


 Function: Fetches and renders details of a specific movie by ID from
the movieDetails collection.

 REVIEW MANAGEMENT:

 Add Review:

 Route: POST /insert


 Function: Inserts review data into the items collection.

6
 Update Review:

 Route: POST /update


 Function: Updates an existing review in the items collection based on
user name and email.

 Delete Review:

 Route: POST /delete


 Function: Deletes a review from the items collection based on the
provided data.

 View Reviews:

 Route: GET /report


 Function: Generates an HTML report of all reviews in the items
collection.

 SEARCH FUNCTIONALITY:

 Search Movies:

 Route: GET /search


 Function: Searches for movies by name using a case-insensitive regex
query in the movieDetails collection.

 MONGODB SCHEMA WITH MONGOOSE

const mongoose = require('mongoose');

// User Schema

const userSchema = new mongoose.Schema({


name: { type: String, required: true },

7
email: { type: String, required: true, unique: true },
password: { type: String, required: true }
});

// MovieDetails Schema

const movieDetailsSchema = new mongoose.Schema({


mname: { type: String, required: true },
director: { type: String, required: true },
genre: { type: String, required: true },
language: { type: String, required: true },
rating: { type: Number, default: 0 },
review: { type: String, default: '' },
image: { type: String, default: '' },
trailer: { type: String, default: '' },
isLatest: { type: Boolean, default: false }
});

// Items Schema (User Reviews)

const itemsSchema = new mongoose.Schema({


name: { type: String, required: true },
email: { type: String, required: true },
mname: { type: String, required: true },
director: { type: String, required: true },
rating: { type: Number, required: true },
review: { type: String, required: true }
});

// 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:

 The insert.html, update.html, delete.html file includes internal CSS to style


elements such as the background color, text color, form appearance, buttons,
and navigation bar.

 Example styles

 Dark theme with a dark background (#121212) and light text


(#e0e0e0).
 Customized button styles with specific colors and hover effects.
 Responsive form layout with custom styles for different elements like
input fields and labels.

 BOOTSTRAP

 An external CSS framework, Bootstrap, is included for responsive design and


pre-defined components.

 Version: Bootstrap 4.5.24

 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 :

 DOM Manipulation: Scripts to handle form submission, prefill form fields


based on URL parameters, and validate form data.
 Event Handling: JavaScript functions triggered by user actions, such as
clicking checkboxes or submitting forms.

 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.

 EMBEDDED JAVA SCRIPT

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 :

 Allows embedding JavaScript logic within HTML.


 Facilitates server-side rendering of dynamic content.
 Simplifies the process of creating repetitive HTML structures with data.

 INTEGRATION AND WORKFLOW

 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

The frontend of the project leverages a combination of HTML, CSS, JavaScript,


Bootstrap, and EJS to create a dynamic and responsive user interface. The use of modern
web technologies ensures a seamless user experience and easy navigation across different
functionalities of the movie review system. The integration of these technologies is well-
coordinated to deliver a robust and user-friendly web application.

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 :

 A JavaScript runtime built on Chrome's V8 JavaScript engine.


 Executes JavaScript code server-side.
 Known for its non-blocking, event-driven architecture, which makes it
suitable for I/O-heavy applications.

 EXPRESS.JS :

 A minimal and flexible Node.js web application framework.


 Provides a robust set of features to develop web and mobile applications.
 Handles routing, middleware, and simplifies server creation.

 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 :

 An Object Data Modeling (ODM) library for MongoDB and Node.js.


 Manages relationships between data, provides schema validation, and
translates between objects in code and MongoDB documents.

 DETAILED BRAKEDOWN OF SERVER CODE

 SERVER INITIALIZATION AND MIDDLEWARE CONFIGURATION

 In app.js:

const express = require('express');


const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const session = require('express-session');
const bcrypt = require('bcrypt');
const ejs = require('ejs');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');


app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
secret: 'secret-key',
resave: false,
saveUninitialized: false
}));

15
mongoose.connect('mongodb://localhost:27017/movieDB', {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
});

 Express: Initializes the Express application.


 Body-Parser: Middleware to parse incoming request bodies.
 Session: Manages user sessions with a secret key for signing the
session ID cookie.
 Mongoose: Connects to the MongoDB database.
 Static Files: Serves static files from the 'public' directory.

 DATABASE SCHEMA AND MODELS

Schemas are defined to structure data in MongoDB using Mongoose.

const userSchema = new mongoose.Schema({


name: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true }
});

const User = mongoose.model('User', userSchema);

const movieDetailsSchema = new mongoose.Schema({


mname: { type: String, required: true },
director: { type: String, required: true },
genre: { type: String, required: true },
language: { type: String, required: true },
rating: { type: Number, default: 0 },

16
review: { type: String, default: '' },
image: { type: String, default: '' },
trailer: { type: String, default: '' },
isLatest: { type: Boolean, default: false }
});

const MovieDetails = mongoose.model('MovieDetails', movieDetailsSchema);

const itemsSchema = new mongoose.Schema({


name: { type: String, required: true },
email: { type: String, required: true },
mname: { type: String, required: true },
director: { type: String, required: true },
rating: { type: Number, required: true },
review: { type: String, required: true }
});

const Items = mongoose.model('Items', itemsSchema);

 User Schema: Manages user data for authentication.


 MovieDetails Schema: Stores movie details.
 Items Schema: Manages user reviews.

 ROUTES AND REQUEST HANDLING

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.

app.post('/signup', (req, res) => {


const { name, email, password } = req.body;
User.findOne({ email: email }).then(existingUser => {
if (existingUser) {
res.redirect('/signup?error=exists');
} else {
bcrypt.hash(password, 10, (err, hash) => {
if (err) {
console.log(err);
} else {
const newUser = new User({ name, email, password: hash });
newUser.save().then(() => {
res.redirect('/login');
}).catch(err => {
console.log(err);
});
}
});
}
}).catch(err => {
console.log(err);
});
});

 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);
});
});

 ADD MOVIE ROUTE


 Handles addition of new movies to the database.
 Creates a new movie document and saves it to the movieDetails
collection.

app.post('/addMovie', (req, res) => {


const { mname, director, genre, language, rating, review, image, trailer,
isLatest } = req.body;
const newMovie = new MovieDetails({
mname, director, genre, language, rating, review, image, trailer, isLatest
});
newMovie.save().then(() => {
19
res.redirect('/movies');
}).catch(err => {
console.log(err);
});
});

 INSERT REVIEW ROUTE


 Handles submission of user reviews.
 Creates a new review document and saves it to the items collection.

app.post('/insert', (req, res) => {


const { name, email, mname, director, rating, review } = req.body;
const newItem = new Items({ name, email, mname, director, rating,
review });
newItem.save().then(() => {
res.redirect('/report');
}).catch(err => {
console.log(err);
});
});

 UPDATE REVIEW ROUTE


 Handles update submission of user reviews.
 Updates a review document and saves it to the items collection.

app.post("/update", async (req, res) => {


const { name, email, age, phone, gender, country } = req.body;
if (!db) {
res.status(500).send("Database not initialized");
return;
}
try {

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");
}
});

 DELETE REVIEW ROUTE


 Handles deletion of user reviews.
 Deletes a user review document in the items collection.

app.post('/insert', (req, res) => {


const { name, email, mname, director, rating, review } = req.body;
const newItem = new Items({ name, email, mname, director, rating,
review });
newItem.save().then(() => {
res.redirect('/report');
}).catch(err => {
console.log(err);
});
});

 SEARCH ROUTES

21
 Handles movie search functionality.
 Uses a case-insensitive regex query to search for movies by name.

app.get('/search', (req, res) => {


const query = req.query.q;
MovieDetails.find({ mname: new RegExp(query, 'i') }).then(movies => {
res.render('searchResults', { movies });
}).catch(err => {
console.log(err);
});
});

 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.

 CHOOSE A HOSTING PLATFORM

 Static Websites: GitHub Pages, Netlify, Vercel


 Dynamic Websites and APIs: Heroku, AWS (Amazon Web Services), Google
Cloud Platform (GCP), Microsoft Azure
 Databases: AWS RDS, MongoDB Atlas, Firebase

 SET UP YOUR HOSTING ENVOIRNMENT

 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.

 DEPLOY YOUR PROJECT

 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.

 MONITOR AND MANITAIN

 Monitoring: Use tools provided by your hosting platform to monitor your


application’s performance and health.
 Scaling: If your application needs to handle more traffic, you might need to scale
your resources. Most cloud platforms offer auto-scaling features.
 Updates: Regularly update your codebase and dependencies to keep your application
secure and up-to-date.

6. GIT LINK OTHE PROJECT

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 :

FIGURE A 2 : LOGIN PAGE

HOME :

27
FIGURE A 3 : HOME PAGE

ADD MOVIE :

FIGURE A 4 : ADD MOVIE PAGE

HOME AFTER ADDING A MOVIIE :

28
FIGURE A 5 : HOME PAGE AFTER ADDING A MOVIIE

MOVIE REVIEW :

FIGURE A 6 : MOVIE REVIEW PAGE

ADD USER REVIEW :

29
FIGURE A 7 : ADDING A MOVIE REVIEW

UPDATE USER REVIEW :

FIGURE A 8 : UPDATING A MOVIE REVIEW

VIEWING USER REVIEWS :

30
FIGURE A 9 : REPORT PAGE

DELETE USER REVIEW :

FIGURE A 10 : DELETING A MOVIE REVIEW

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

You might also like