VIETNAM NATIONAL UNIVERSITY HCMC

UNIVERSITY OF INFORMATION TECHNOLOGY

FACULTY OF INFORMATION SYSTEM

FINAL REPORT
WEB APPLICATION DEVELOPMENT
Topic
INSIDE OUT WEBSITE
Instructor: Mr. NGUYEN DUONG TUNG
Class: IS207.O21
Student Group: Group 2
Ngo Hoang Lan Anh 22520051
Nguyen Thi Kim Ngoc 22520959
Do Phan Hai Phi 22521079
Nguyen Hoang Tu Trinh 22521538
Nguyen Tri Vinh 22521678
Ho Le Vy 22521702
Ho Chi Minh City, 06/2023
 ACKNOWLEDGEMENT
Firstly, we would like to extend our heartfelt thanks to Mr. Nguyen Duong Tung and Mr.
Vu Minh Sang, lecturers of the Web Application Development course, Faculty of
Information Systems, University of Information Technology - Vietnam National University,
Ho Chi Minh City, for his dedicated guidance to our group throughout the process of
completing this report.

Through the time of acquiring specialized knowledge as well as practical experience with
him, our group has absorbed many valuable lessons. The project "Inside Out Website" is
the result of the combined efforts of both teacher and students over the past period.

Due to our limited knowledge, mistakes in understanding and presentation are inevitable.
We sincerely hope to receive contributions and feedback from esteemed teachers to improve
in future reports.

Sincerely thank you!

Ho Chi Minh City, June 6th, 2024

Student Group
Group 2

1
 INSTRUCTOR’S COMMENTS

............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................
............................................................................................................

2
 TABLE OF CONTENTS

ACKNOWLEDGEMENT .................................................................................................... 1

INSTRUCTOR’S COMMENTS .......................................................................................... 2

TABLE OF CONTENTS...................................................................................................... 3

LIST OF FIGURES .............................................................................................................. 5

CHAPTER 1. INTRODUCTION ......................................................................................... 7

1. Project Initialization ................................................................................................... 7

1.1. Reasons For Implementation ...........................................................................................................7
1.2. Project Goals ...................................................................................................................................7
1.3. Survey Of Related Website .............................................................................................................8
2. Website Processes .................................................................................................... 11
2.1. Website Organization Chart ..........................................................................................................11
2.2. General Process .............................................................................................................................13
2.3. User Process ..................................................................................................................................13
2.4. Administrators Process ..................................................................................................................15
3. Requirements Identification ..................................................................................... 16
3.1. Functional Requirements...............................................................................................................16
3.2. Non-functional Requirements .......................................................................................................17
CHAPTER 2. TOOLS AND TECHNOLOGY ................................................................. 19

1. Project Management Tools....................................................................................... 19

2. Design supporting tools ............................................................................................ 19
3. Programming support tools ...................................................................................... 21
4. Technology ............................................................................................................... 23
CHAPTER 3. ANALYSIS AND DESIGN......................................................................... 24

CHAPTER 4. PROGRAMMING ...................................................................................... 65

CHAPTER 5. INSTALLATION AND USER INSTRUCTIONS ...................................... 69

CHAPTER 6. RESULT SUMMARY ................................................................................. 70

3
CONCLUSION .................................................................................................................. 72

LIST OF TABLES
Table 1 List of Actors ......................................................................................................... 24
Table 2 List of Use Case Table ........................................................................................... 26
Table 3 Use case for account registration ........................................................................... 35
Table 4 Use case for login .................................................................................................. 36
Table 5 Use case for Managing personal account .............................................................. 37
Table 6 Use case for Watching Movies and Trailers .......................................................... 37
Table 7 Use case for Reading blog posts ............................................................................ 38
Table 8 Use case for Reacting video .................................................................................. 39
Table 9 Use case for Viewing Website Information ........................................................... 39
Table 10 Use case for Contacting and Exchanging Information with Admin .................... 40
Table 11 Use case for Viewing Video Watch History......................................................... 41
Table 12 Use case for Managing user information ............................................................. 41
Table 13 Use case for Managing websites ......................................................................... 43
Table 14 Use case for data statistics ................................................................................... 44
Table 15 Awards Table ........................................................................................................ 58
Table 16 Cast Table ............................................................................................................ 58
Table 17 Characters Table .................................................................................................. 59
Table 18 History Table........................................................................................................ 59
Table 19 Member Table ...................................................................................................... 59
Table 20 Movie Table ......................................................................................................... 60
Table 21 Movie comment Table ......................................................................................... 61
Table 22 Movie reacton Table ............................................................................................ 61
Table 23 Post Table ............................................................................................................. 61
Table 24 Post comment Table ............................................................................................. 62
Table 25 Trailer Table ......................................................................................................... 62
Table 26 Trailer comment Table ......................................................................................... 63

4
Table 27 Trailer reaction Table ........................................................................................... 63
Table 28 Usser Table .......................................................................................................... 64
Table 29 The table describes the functions of the website ................................................. 66
Table 30 Table describing the website's functions.............................................................. 68

LIST OF FIGURES

Figure 1 Inside Out website organization chart .................................................................. 11

Figure 2 Inside Out website organization chart .................................................................. 12
Figure 3 Project repository ................................................................................................. 19
Figure 4 Diagrams.net UI ................................................................................................... 20
Figure 5 Figma UI .............................................................................................................. 20
Figure 6 Visual Studio Code UI ......................................................................................... 21
Figure 7 XAMPP interface to open phpMyAdmin ............................................................ 22
Figure 8 Laragon interface to open phpMyAdmin ............................................................. 22
Figure 9 General Use Case Diagram .................................................................................. 26
Figure 10 Use Case diagram for account registration ........................................................ 27
Figure 11 Use Case Diagram Login ................................................................................... 27
Figure 12 Use Case Diagram Manage account( for users) ................................................. 28
Figure 13 Use Case Diagram Watch movie and trailers ..................................................... 29
Figure 14 Use Case Diagram View blog posts ................................................................... 29
Figure 15 Use Case Diagram Comment ............................................................................. 30
Figure 16 Use Case Diagram React video .......................................................................... 30
Figure 17 Use Case Diagram View website introduction .................................................. 31
Figure 18 Use Case Diagram Contact admin ..................................................................... 31
Figure 19 Use Case Diagram View recent watched ........................................................... 32
Figure 20 Use Case Diagram Manage user’s account (for admin) .................................... 32
Figure 21 Use Case Diagram Manage website .................................................................. 33
Figure 22 Use Case Diagram Data statistics ...................................................................... 34
5
Figure 23 Registration Activity diagram ............................................................................ 45
Figure 24 Login Activity diagram ...................................................................................... 46
Figure 25 Activity diagram for personal account management ......................................... 47
Figure 26 Activity diagram for watching movies and trailers ............................................ 48
Figure 27 Activity diagram for viewing blog posts ............................................................ 49
Figure 28 Activity diagram for commenting ...................................................................... 50
Figure 29 Activity diagram for reacting video ................................................................... 51
Figure 30 Activity diagram displays introductory information about the website ............. 51
Figure 31 Activity diagram to contact and exchange information with admin .................. 52
Figure 32 Activity diagram to view video watching history .............................................. 53
Figure 33 Activity diagram manages Users information.................................................... 53
Figure 34 Activity diagram manages statistics ................................................................... 54
Figure 35 Activity diagram for creating posts, editing posts, deleting posts, deleting
comments on posts, movies, trailers ................................................................................... 55
Figure 36 Associative entity model .................................................................................... 56
Figure 37 Relational data model......................................................................................... 57

6
 CHAPTER 1. INTRODUCTION

1. Project Initialization

1.1. Reasons For Implementation

Under the heat from the return of a sensational Pixar masterpiece - Inside Out - we
see this as a timely opportunity to choose this film as the main theme for our website project.
Inside Out is an animated film that has accompanied us throughout 9 years of growing
up and maturing. We are truly grateful for the lessons the film has conveyed. Therefore, we
wish to contribute a little something to the Inside Out fan community and the film itself.
Moreover, nowadays, websites dedicated to a single film are quite rare as most
filmmakers integrate them with other projects. We think it would be special if we could
dedicate everything we have learned this semester to our favorite film, while also helping
to promote the film to reach more people.
Our love for the film and desire to contribute to the community are the reasons we
chose the "Inside Out website" as our research and development topic in the Web
Application Development course.
Let's meet the 5 familiar emotions: Joy, Sadness, Anger, Disgust, Fear, and get to
know the 4 new faces: Anxiety, Envy, Boredom, and Shame - all included in this heartfelt
project.

1.2. Project Goals

Whether you're a diehard fan looking to rekindle those nostalgic feelings, or a
newcomer curious about what made this film so special, our Inside Out website is your
gateway. Immerse yourself in exclusive behind-the-scenes content, engage with a
passionate community, and experience the magical world of emotions in whole new ways.
The Inside Out website aims to create a vibrant and engaging platform for fans of the
film Inside Out and those exploring the film by:

7
  Providing a seamless streaming experience for users to watch the first Inside Out
film on the website.
 Offering a dedicated space for fans to discuss and share their thoughts on the film
through interactive blogs and comment sections on the film.
 Providing comprehensive information about the film, including plot summaries,
character descriptions, and information on themes surrounding the film.
And above all, generating anticipation and excitement to join the heat of the upcoming
sequel this summer!

1.3. Survey Of Related Website

In Vietnam, there is currently no website specifically designed for a single movie like
"Inside Out" for users to watch, read posts, and comment on the film. Therefore, we chose
to survey websites related to the movie "Inside Out." As the movie-watching market
continues to grow, we aim to provide young audiences with a film that can attract users to
the animated genre, specifically "Inside Out." This movie brings many spiritual and human
values revolving around our lives. We have chosen to survey websites like Pixar Animation
Studios for reviews of Pixar movies, including "Inside Out," and another website by Disney
that provides information related to "Inside Out 2."

Pixar Animation Studios Website

Inside Out Page on Pixar Animation Studios: https://www.pixar.com/feature-
films/inside-out
Pixar Animation Studios is a renowned American animation studio famous for its
highly acclaimed and commercially successful animated films. Founded in 1986 by Edwin
Catmull and Alvy Ray Smith, Pixar initially focused on producing computer-animated short
films and advertisements. The collaboration with Disney from the late 1980s led to the
release of their first feature film, "Toy Story," in 1995, the world's first entirely computer-
animated feature film.
a. Benefits
 Attractive Design: The website features an appealing design, using eye-catching
images and colors from the movie to create an enjoyable user experience.
8
  Basic Information: Provides basic information about the film, such as a plot
summary, main characters, and the creative team.
 Character Introductions: Includes a section introducing the main characters in the
film, helping viewers understand their significance and roles better.
 Multimedia Content: Offers clips, trailers, and images from the movie for users to
preview.
 Social Media Links: Links to Pixar's official social media pages, allowing users to
follow and interact with the studio.
b. Potential Drawbacks
 No Full Movie: Does not allow users to watch the entire movie online on this site.
 Limited Content: Content is relatively limited, focusing only on introducing the
film without many interactive features or rich content for fans.
 No Reviews or Comments: Lacks a section for reviews, comments, or forums for
users to share their thoughts on the movie.
Overall, this website serves as a place to introduce and promote the movie "Inside Out,"
but it lacks interactive features and more extensive content to become a large community
for fans.

Disney Movie Canada’s Inside Out 2 Site

Inside Out 2 Site on Disney Movie Canada:
https://www.disneymovie.ca/insideout2/watch-more/
The website provides information about the movie "Inside Out 2," including the
trailer, film details, and ticket purchase options, and is based in Canada. The website offers
some news about the movie "Inside Out," such as posters, images, trailers, and various
information surrounding the film.
a. Benefit
 User-Friendly Design: The homepage interface of Inside Out 2 features vibrant
colors, including shades of pink, blue, and purple, creating a comfortable and simple
experience for users. Navigation, video viewing, and reading information
functionalities are well-designed and suitable for the website.

9
  Free Platform: This is a free platform and does not require users to log in. There
is creativity in building a moving banner that adds interest for users.
b. Potential Drawbacks
 Lack of User Login Functionality: The website does not implement a login feature,
hindering users from commenting on videos or posts, which prevents website
developers from adapting the site to better suit user needs.
 Absence of a Dominant Color Scheme: Due to the excessive variety of colors, the
website lacks a cohesive color scheme, resulting in visual clutter that may
overwhelm users. The lack of blending between different sections makes the website
appear disjointed and reduces its overall attractiveness.
 Limited Information and Accessibility: Information about the movie is
insufficiently detailed, and users are unable to watch the entire movie but only view
trailers. Additionally, the website fails to cater to a diverse international audience,
as it primarily targets users in Canada
 Lack of Article Pages: The website lacks dedicated article pages where users can
read information and leave comments.
In summary, Disney Movie Canada's website for Inside Out 2 has constructed a simple
platform for movie introduction, providing convenience for users. However, there is room
for improvement in enhancing user functionalities such as login and commenting to enable
interaction with the website, thus maintaining the connection between users and the site.
Additionally, investment in website interface design is necessary to attract a larger user
base.

10
2. Website Processes
2.1. Website Organization Chart

Figure 1 Inside Out website organization chart

11
Figure 2 Inside Out website organization chart

12
 2.2. General Process

Login Process
Users (including Administrators and Users) need to successfully log in to the website
with the password and account provided or registered beforehand. Each login privilege
grants access to different functionalities within the website. For regular Users, they can
choose to log in using their Google account or the account registered on the website.

User Accounts Management Process

After successfully logging into the website, users can easily manage their personal
information and account security.
 View and edit personal information: Users can view personal information such as
Username, Email, Avatar, and hidden Password. However, they cannot change the
email address.
 Forgot password and password change: Users can request an OTP code sent to
their email to change their account password. After completion, they will return to
the login screen to log in with the user's new password.

2.3. User Process

Login Process
Users need to successfully log in to the website in order to use it. If users do not have
an account on the website, they need to register an account to log in. Mandatory information
for account registration includes: Email, Userame, Password. Additionally, after
successfully registering an account, users can use the newly registered account to log in to
the website, and add additional personal information in the profile section to view and edit
personal information.
In addition to the registration method mentioned above, users can also choose to
register an account using their Google account. After users click on the "Continue with
Google" button, the website will switch to the Google interface and request user
confirmation for login. In subsequent login attempts, users only need to select login with

13
Google without having to register again because during the initial registration, their data
was saved in the database for subsequent logins.

Movies And Trailers Viewing Process

For users who have logged into the website, they will be able to view all movies and
trailers available on the Watch page. While enjoying watching movies, users can customize
playback options such as fast-forwarding, adjusting playback mode, sound, and allowing
downloads. Users can also engage in the commenting process. Additionally, users can
choose picture-in-picture mode to split-screen watch movies while multitasking, balancing
between work and entertainment.

Blog Viewing Process

For users who have logged into the website, they can navigate to the main blog page
to view other remaining blog posts. Users can view the interfaces of other blog pages after
being redirected from the main blog through navigation buttons. Users can also engage in
the commenting process.

Movies, Trailers, Blog Posts Commenting Process

After users navigate to the blog, movie, or trailer pages, there will be a comment
section displayed at the bottom. The displayed comment information includes Username,
Comment content, Time, and The avatar of the commenter. Users can line break when
commenting.

Videos Reaction Process

After users finish watching videos on the movie and trailer pages, they can choose to
like or dislike the movie so that the website can understand the user's experience after
watching the movie. Store the number of likes and dislikes to display to users.

Website Introduction Information Viewing Process

After users log in to the website's home page, they can navigate to the About Us page
to view the introduction information. The About Us page will display information about the
members and an introduction to the team that created the website, helping users access the
founders of the website.

14
 Contacting And Exchanging Information With Admins Process
Users can navigate to the Contact Us page to contact the website admin. Users will
see the operating location, main email, and phone number to contact the website. Users can
leave a message in the Drop us a line section to send issues that need resolution, emotions,
evaluations, or reflections on issues about the website or movies to the admin. Additionally,
there is a media section to navigate to other contact pages of the website, such as Facebook,
Instagram, Tiktok, and Youtube.

2.4. Administrators Process

Users Information Management Process

For the information management processes, administrators can view information of
the entities in the form of lists. The displayed user information includes: User ID,
Username, Total comments, and Total likes.
Website Information Management Process
 Videos Information Management Process: Includes number of views, comments,
likes, and dislikes.
 Posts Management Process: Include post image, title, content, author, date of the
post. The post author can review the post to edit, read comments, or delete the post.
When an admin posts, they can choose to save it as a draft to be edited and then post
it on the website to display the article. For the comment section in the posts, admins
can view usernames, posting time, content, and user avatars.

Statisticizing Process
After reviewing the list of necessary information, the admin can click to view statistics
on the number of users, data on movie views, likes, etc., to gain an overview of the data
and user experience in order to guide the development of their website.

15
 3. Requirements Identification

3.1. Functional Requirements

Storage Requirements
Storage of information is the most crucial requirement for most websites. It serves as
the foundation for implementing the majority of website features. To ensure effective
website management, the website needs to store the following information:
 Award Information: Award ID, name
 Casts Information: Cast ID, name, role, image, movie ID
 Character Information: Character ID, character name, description, voice actor
 Design Team Members Information: Member ID, full name, role
 Login Information: User ID, Username, Password
 Movie Information: Movie ID, part, description, duration, release date,
production company, country, video, movie image, views
 Movie or Trailer Viewing History Information: History ID, user ID, movie ID,
trailer ID, movie or trailer viewing date
 Movie Reaction Information: Movie ID, user ID, action including like and
dislike
 Post Comment Information: Post comment ID, post ID, user ID, username,
comment content, post comment date
 Post Information: Post ID, title, content, author, image, post date, post status
 Trailer Comment Information: Trailer comment ID, trailer ID, user ID, trailer
comment date
 Trailer Information: Trailer ID, movie ID, video, image, views
 Trailer Reaction Information: Trailer ID, user ID, action including like and
dislike
 User Information: User ID, username, email, user avatar, password
 Video Comment Information: Video comment ID, video ID, user ID, comment
content, video comment date

16
 Statistics And Synthesis Requirements
The statistical function helps support administrators to have an overall view of the
data.
 Statistics on the number of posts added: Allows the admin to control the number
of posts that have been added.
 Statistics on the number of posts approved: Allows the admin to control the
number of posts that have been published.
 Statistics on the number of videos: The admin can control information about
movies and trailers with the number of interactions, views, and comments.
 Statistics on the number of reactions: The admin can view the total number of
likes and dislikes for movies and trailers.
 Statistics on the number of comments: The admin can view the number of blog
comments, movie comments, and trailer comments from users, and read their
feedback.
 User statistics: Allows the admin to view the number of visitors and data about
users' experiences with movies, trailers, and blog posts.

User Security And Permissions

 Each user is granted a separate account to log into the website.
 Each account will have different permissions based on their role.
 The administrator will have full rights on the website.

3.2. Non-functional Requirements

Quality Requirements
Usability:
 Clear specifications and instructions, easy to operate.
 The website is described in detail, easy to see, and easy to understand.
 Stable and reliable operation.
Compability:
 Works well on web browsers.

17
Interface Requirements
 The website interface is friendly and easy to use.
 The screens must be consistent with each other, clearly displaying detailed
information.

18
 CHAPTER 2. TOOLS AND TECHNOLOGY

1. Project Management Tools

Github
GitHub is an online source code hosting service based on the Git platform. It provides
an environment for developers to manage, develop, and track the source code of software
projects. This service allows teams to work remotely on software projects and track the
change history of the source code.

Figure 3 Project repository

2. Design supporting tools

Diagrams.net
Diagrams.net is a very powerful diagramming tool that supports many shapes and runs
online without installation. The special thing is that it is completely free and has an

19
unlimited number of charts, superior to many other web-based drawing tools.

Figure 4 Diagrams.net UI
Figma
Figma is a vector graphics editor and prototyping software. Figma provides
resources for every stage of the design organization process, from brainstorming
concept ideas to generating code from design samples.

Figure 5 Figma UI

20
 3. Programming support tools
Visual Studio Code
Visual Studio Code is an application that allows editing and editing code to support
the process of quickly building and designing websites. This editor operates smoothly
on platforms such as Windows, macOS, Linux. Furthermore, VS Code also offers
compatibility with mid-range computer devices that can still be used easily.
Because of its convenience and high compatibility, we chose Visual Studio Code as
the IDE to carry out our project.

Figure 6 Visual Studio Code UI

XAMPP For Windows
XAMPP is a software that allows you to simulate a server hosting environment right on
your computer, allowing you to run a demo website without having to buy hosting or VPS.
XAMPP stands for X + Apache + MySQL + PHP + Perl because it has built-in Apache,
MySQL, PHP, FTP server, Mail Server. And X represents XAMPP's cross-platform because

21
it can be used for 4 different operating systems: Windows, MacOS, Linux and Solaris.

Figure 7 XAMPP interface to open phpMyAdmin

Laragon For Windows
Laragon is a program that provides the most useful WAMP environment (short for
Windows, Apache, MySQL and PHP) and can completely replace XAMPP, which has
many current errors.

Figure 8 Laragon interface to open phpMyAdmin

22
4. Technology

The technologies used are HTML5, CSS3, PHP, Composer

 HTML5: HTML5 brings many features such as video/audio support, vector
graphics through canvas, and advanced APIs.
 CSS3: Provides many features such as animation, gradients, and responsive design,
helping to optimize the user experience across multiple devices and screens.
 PHP v8.2.12: A popular server-side scripting language used to build dynamic web
applications. PHP supports many libraries and frameworks, helping to optimize the
development process and database connectivity.
 Composer: Composer is a dependency management tool for the PHP programming
language. This technology allows developers to easily manage, install libraries and
dependency packages for PHP projects.

23
 CHAPTER 3. ANALYSIS AND DESIGN
1. Use Case View
1.1. Actors List
No. Tên các tác nhân trang Meaning
web
1 Administrator Administrators have full access to the
entire website and can perform
management functions. They have the
ability to manage user information, change
website configurations, monitor website
activities, and generate data statistical
reports.
2 User Users can register an account, log in,
manage their personal account, watch
movie videos and trailers, read blog posts,
view information about the website, rate
videos, comment on videos and blog posts,
and contact the admin for information
exchange.
Table 1 List of Actors
1.2. List of Use Cases
Use Case ID Use Case Name Description

1 Sign up
A user registers an account on the login
interface.

2 Log in Users and administrators log in to the website

to perform various functions. They can
recover their password if forgotten to

24
 continue logging in. Users have two login
options: using a registered account on the
website or a Google account.
3 Manage Personal Users manage their personal information and
Account can edit allowed information such as
username and profile picture.
4 Watch Movies and Users can watch videos, play and pause
Trailers videos, freely seek within the video, and
adjust the playback speed of the video.
5 Read Blog Posts Users read blog posts on the website.
6 Comment
Users read and comment on movie videos,
trailers, and blog posts.

7 React to Videos Users rate videos by liking or disliking them.

8 View Website Users view all introductory information about
Information the website.
9 Contact and Exchange Users contact the admin via two methods:
Information with Admin clicking on social media links or filling out
and submitting a form on the website.
10 View Video Watch Users can see the videos they have recently
History watched on their user page.
11 Manage User Administrators can view, create, update, or
Information delete user information.
12 Manage Website Administrators manage blog posts, movie
videos and trailers, user comments, user
watch history, video reactions, and user
experience on the website.

25
13 Report and Data Administrators generate reports and statistics
Statistics on video views, comments, user video
ratings, and user statistics.
Table 2 List of Use Case Table
1.3. Use Case Diagram

Figure 9 General Use Case Diagram

26
Figure 10 Use Case diagram for account registration

Figure 11 Use Case Diagram Login

27
Figure 12 Use Case Diagram Manage account( for users)

28
Figure 13 Use Case Diagram Watch movie and trailers

Figure 14 Use Case Diagram View blog posts

29
Figure 15 Use Case Diagram Comment

Figure 16 Use Case Diagram React video

30
Figure 17 Use Case Diagram View website introduction

Figure 18 Use Case Diagram Contact admin

31
 Figure 19 Use Case Diagram View recent watched

Figure 20 Use Case Diagram Manage user’s account (for admin)

32
Figure 21 Use Case Diagram Manage website

33
 Figure 22 Use Case Diagram Data statistics

1.4. Use Case Specification

Sign up account
Use Case ID UC-1
Use Case Name Sign up Account
Description Users can register an account for the system.
Actors(s) User
Priority Must Have

34
Trigger
The user accesses the Inside Out website and clicks on
"Signup".

Pre-Condition(s) The user's device is connected to the Internet.

Post-Condition(s) The user successfully registers for an account with Inside Out.
Basic Flow 1. The user selects to register an account by clicking on the
"Signup" button.
2. The user chooses to register using either a Google account
or by registering through Inside Out.
2.1. The user selects to register using a Google account:
2.1.1. The user chooses their Google account and accepts the
terms.
2.2. The user registers within the Inside Out website:
2.2.1. The user enters registration information.
2.2.2. The user enters the code sent via email.
3. Account registration is successful
Alternative Flow 2a. The user already has an account and selects "Login". The
Use Case ends.
Exception Flow 2.2.1a. The user enters invalid information. The Use Case
returns to step 2.2.1.
Table 3 Use case for account registration
Log In
Use Case ID UC-2
Use Case Name Log In
Description Users can log into their account on the Inside Out system.
Actors(s) User.
Priority Must Have
Trigger The user accesses the Inside Out website.
Pre-Condition(s) - The user's account has been previously created.

35
 - The user has a Google account.
- The user's device is connected to the Internet.
Post-Condition(s) No
Basic Flow 1. The user selects to log in by clicking on the "Login" button.
2. The user chooses to log in using either a Google account or
by logging in through Inside Out.
2.1. If the user chooses to log in using a Google account:
2.1.1. The user selects their Google account.
2.2. If the user chooses to log in through Inside Out:
2.2.1. The user enters their username and password.
3. The user's account is successfully logged into, and the
homepage is displayed.
Alternative Flow 2a. If the user does not have an account and selects "Signup,"
the Use Case ends.
Exception Flow 2.2.1a. If the user enters incorrect account information, the
Use Case returns to step 2.2.1 for the user to re-enter their
credentials.
Table 4 Use case for login
Manage Personal Account
Use Case ID UC-3
Use Case Name Manage Personal Account
Description Users can optionally edit and view their personal information.
Actors(s) User
Priority High
Trigger The user selects their avatar image on the website and clicks
on "EDIT PROFILE".
Pre-Condition(s) - The user's device is connected to the Internet.
- The user is logged into the website.

36
Post-Condition(s) The user successfully edits their personal information on the
website.
Basic Flow 1. The user selects the "Edit Profile" feature on the website.
2. The user edits their personal information, confirms, and
submits.
3. The system checks if the information is valid.
4. The user's information is successfully edited.
Alternative Flow 2a. If the user does not need to edit their information, the Use
Case ends.
Exception Flow 3a. If the information is invalid, the Use Case returns to step 2
for the user to correct the information.
Table 5 Use case for Managing personal account
Watch Movies and Trailers
Use Case ID UC-4
Use Case Name Watch Movies and Trailers
Description Users can watch movie videos and trailers on the website.
Actors(s) User.
Priority High
Trigger Người dùng nhấn chọn “Watch”.
Pre-Condition(s) The user's device is connected to the Internet.
Post-Condition(s) The user's video viewing history is saved.
Basic Flow 1. The user accesses the movie viewing page on the website.
2. The user selects a movie video or trailer to watch.
Alternative Flow No
Exception Flow None
Table 6 Use case for Watching Movies and Trailers
Read Blog Posts
Use Case ID UC-5
Use Case Name Read Blog Posts

37
Description Users can optionally view blog posts on the website.
Actors(s) User.
Priority High
Trigger The user selects "Blog".
Pre-Condition(s) The user's device is connected to the Internet.
Post-Condition(s) No
Basic Flow 1. The user accesses the blog page on the website.
2. The user selects any blog post and clicks on "Read more".
3. The full details of the blog post are displayed.
Alternative Flow None
Exception Flow None
Table 7 Use case for Reading blog posts
Comment
Use Case ID UC-6
Use Case Name Comment
Description Users can comment on movie videos, trailers, and blog posts.
Actors(s) User
Priority High
Trigger The user accesses the video viewing page or blog page on the
website.
Pre-Condition(s) - The user's device is connected to the Internet.
- The user is logged into the website.
Post-Condition(s) The user successfully submits a comment.
Basic Flow 1. The user enters a comment.
2. The user clicks on "Send" to submit the comment.
Alternative Flow 2a. If the user clicks on "Cancel" to cancel the comment, the
Use Case ends.
Exception Flow None

38
 React video
Use Case ID UC-7
Use Case Name React video
Description Users can react to a video by liking or disliking it.
Actors(s) User
Priority Medium
Trigger The user accesses the video viewing page on the website.
Pre-Condition(s) - The user's device is connected to the Internet.
- The user is logged into the website.
Post-Condition(s) The user's reaction to the video is saved.
Basic Flow 1. The user accesses the video viewing page.
2. The user selects either like or dislike for the video.
Alternative Flow None
Exception Flow None
Table 8 Use case for Reacting video
View Website Information
Use Case ID UC-8
Use Case Name View Website Information
Description Users can view information displayed on the website.
Actors(s) User
Priority Medium
Trigger The user accesses the website.
Pre-Condition(s) The user's device is connected to the Internet.
Post-Condition(s) None
Basic Flow The user accesses either the Home page or the About Us page
on the website.
Alternative Flow None
Exception Flow None
Table 9 Use case for Viewing Website Information

39
 Contact and Exchange Information with Admin
Use Case ID UC-9
Use Case Name Contact and Exchange Information with Admin
Description Users can send information to contact the admin.
Actors(s) User
Priority Medium
Trigger The user accesses the Contact Us page on the website.
Pre-Condition(s) - The user's device is connected to the Internet.
- The user is logged into the website.
Post-Condition(s) The message is successfully sent to the admin.
Basic Flow 1. The user accesses the Contact Us page.
2. The user fills out the information in the form.
3. The user clicks on the "Send" button to submit the
information.
4. The message is successfully sent.
Alternative Flow 2a. If the user chooses to contact via social media links, the
Use Case ends.
Exception Flow None
Table 10 Use case for Contacting and Exchanging Information with Admin
View Video Watch History
Use Case ID UC-10
Use Case Name View Video Watch History
Description Users can view the videos they have recently watched.
Actors(s) User
Priority Medium
Trigger The user selects their avatar image on the website.
Pre-Condition(s) - The user's device is connected to the Internet.
- The user is logged into the website.

40
Post-Condition(s) None
Basic Flow 1. The user accesses their profile.
2. The user scrolls down to see the recently watched videos
under the "Recent Watched" section.
Alternative Flow None
Exception Flow None
Table 11 Use case for Viewing Video Watch History

Manage User Information

Use Case ID UC-11
Use Case Name Manage User Information
Description Administrators can view user information including
username, total number of comments, and total number of
likes.
Actors(s) Administrator
Priority Medium
Trigger The administrator accesses the administration page.
Pre-Condition(s) - The administrator's device is connected to the Internet.
- The administrator is logged into the website.
Post-Condition(s) None
Basic Flow 1. The administrator accesses the administration page by
clicking on the avatar icon.
2. In the Dashboard section, the administrator selects "See
Users".
3. User information is displayed.
Alternative Flow None
Exception Flow None
Table 12 Use case for Managing user information
Manage Website

41
Use Case ID UC-12
Use Case Name Manage Website
Description Administrators can view, add, delete, and edit posts; view
movie and trailer information; view the number of movie
views and interactions (like/dislike); view and delete user
comments on blog, movies, and trailers.
Actors(s) Administrator
Priority Medium
Trigger Admin accesses the administration page.
Pre-Condition(s) - The administrator's device is connected to the Internet.
- The administrator is logged into the website.
Post-Condition(s) None
Basic Flow 1. The administrator accesses the administration page by
clicking on the avatar icon.
2. The administrator selects "View Posts".
2.1. Add Posts: A form is displayed to fill in the content of the
new post and attach an image (if necessary). Select "Public
Post" to publish the post on the website.
2.2. View Posts: The screen displays the posted posts. The
administrator can perform edit, delete, and view operations.
2.2.1. Select Edit: A post form is displayed, and the
administrator edits the post content. Click "Save Post" to save
the changes and end the editing process.
2.2.2. Select Delete: A confirmation message for deletion is
displayed. If accepted, select "Ok"; otherwise, select
"Cancel".
2.2.3. Select View: The screen displays the detailed content of
the corresponding post and user comments. If the
administrator wants to delete a user comment, they can click

42
 on the corresponding "Delete" button and select "Ok" to
confirm the deletion.
3. The administrator selects "View Movies".
The screen displays a summary of the movies on the website
along with the number of views, interactions (like/dislike),
and the number of comments for each movie. Next, select
"View Movie" for the movie to view details. The screen will
display the movie poster along with user comments. If the
administrator wants to delete a user comment, they can click
on the corresponding "Delete" button and select "Ok" to
confirm the deletion.
4. The administrator selects "View Trailers".
Perform similar operations as "View Movies".

Alternative Flow None

Exception Flow None
Table 13 Use case for Managing websites
Report Data Statistics
Use Case ID UC-13
Use Case Name Report Data Statistics
Description Administrators can view the number of posts, videos, user
accounts, and interactions.
Actors(s) Administrator
Priority Medium
Trigger Admin accesses the administration page.
Pre-Condition(s) - The administrator's device is connected to the Internet.
- The administrator is logged into the website.
Post-Condition(s) None

43
Basic Flow 1. The administrator accesses the administration page by
clicking on the avatar icon. The Dashboard screen will
display aggregated data.
2. To view detailed statistics, click on the corresponding blue
button representing the data.
Alternative Flow None
Exception Flow None
Table 14 Use case for data statistics
2. Process View
2.1. Activity Diagram

44
Sign up Account

Figure 23 Registration Activity diagram

45
Login

Figure 24 Login Activity diagram

46
Manage Personal Account

Figure 25 Activity diagram for personal account management

47
Watch Movies and Trailers

Figure 26 Activity diagram for watching movies and trailers

48
Read Blog Posts

Figure 27 Activity diagram for viewing blog posts

49
Comment

Figure 28 Activity diagram for commenting

50
React video

Figure 29 Activity diagram for reacting video

Website Information

Figure 30 Activity diagram displays introductory information about the website

51
Contact and Exchange Information with Admin

Figure 31 Activity diagram to contact and exchange information with admin

52
View Video Watch History

Figure 32 Activity diagram to view video watching history

Manage User Information

Figure 33 Activity diagram manages Users information

53
Report Data Statistics

Figure 34 Activity diagram manages statistics

54
Activity diagram for creating posts, editing posts, deleting posts, deleting comments
on posts, movies, trailers

Figure 35 Activity diagram for creating posts, editing posts, deleting posts, deleting
comments on posts, movies, trailers

55
3. Designing Entity-Relationship Model
Associative entity model

Figure 36 Associative entity model

56
Relational data model

Figure 37 Relational data model

Data Organization

awards (id, name)

casts (id_cast, name, role, image, id_movie)
characters (id, name, description, voice_actors)
history (id, id_user, id_movie, id_trailer, date)
members (id, fullname, role)
movies (id_movie, part, description, duration, release_date, director, country, video,
image_movie, view)
movie_comments (id, trailer_id, user_id, comment, date)
57
movie_reactions (user_id, movie_id, action)
posts (id, title, author, imagedata, date, status)
post_comments (id, post_id, user_id, username, comment, date)
trailers (id_trailer, id_movie, video, image, view)
trailer_comments (id, trailer_id, user_id, comment, date)
trailer_reactions (trailer_id, user_id, action)
users (id, username, password, email, avatar)

Describing Data Components

Awards

Order Attribute Data type Meaning Constraints Note

1 Id int award id Primary key

2 Name Text award name

Table 15 Awards Table

Cast

Order Attribute Data type Meaning Constraints Note

1 Id_cast Tinyint Cast id Primary key

2 Name Varchar(30) Cast name

3 Role Varchar(20) Role

4 Image Text Image of cast

5 Id_movie Tinyint(1) Movie id

Table 16 Cast Table

Characters

Order Attribute Data type Meaning Constraints Note

58
 1 Id Int Character id Primary key

2 Name Varchar(20) Character name

3 Description Longtext Description for

character

4 Voice_actor Text Voice of acter

s

Table 17 Characters Table

History

Order Attribute Data type Meaning Constraints Note

1 Id Int Watch history id Primary key

2 Id_user Bigint User id

3 Id_movie Tinyint(1) Movie id

4 Id_trailer Tinyint Trailer id

5 Date Datetime Viewing date

Table 18 History Table

Members

Order Attribute Data type Meaning Constraints Note

1 Id Int member id primary key

2 Fullname Varchar(30) member name

3 Role Varchar(11) role in group

Table 19 Member Table

Movies
59
Order Attribute Data type Meaning Constraints Note
1 id_movie tinyint(1) Movie Id Primary key

2 part tinyint(1) Part

3 description text Description

4 duration int Duration

5 release_date varchar(20) Release date

6 director varchar(30) Director

7 country varchar(20) Country

8 video text Link video

9 image_movi text Link movie

e

10 view bigint View

Table 20 Movie Table

Movie_comments

Order Attribute Data type Meaning Constraints Note

1 Id Bigint Comment movie Primary

Id

2 Movie_id Tinyint(1) Movide id

3 User_id Bigint User id

4 Comment Varchar(1000) Comment

content

60
5 Date Date Comment date

Table 21 Movie comment Table

Movie_reactions

Order Attribute Data type Meaning Constraints Note

1 User_id Bigint user id primary key

2 Movie_id Tinyint(1) movie id primary key

3 Action Enum(‘like’, reaction primary key

‘dislike’)

Table 22 Movie reacton Table

Posts

Order Attribute Data type Meaning Constraints Note

1 id int post id primary key

2 title varchar(100) Title

3 content varchar(100) content of post

4 author varchar(100) Author name

5 imagedate longblob Imagr path

6 date date Posting date

7 status varchar(10) Status of the post

Table 23 Post Table

61
Post_comments

Order Attribute Data type Meaning Constraints Note

1 id bigint Comment id Primary key

2 post_id int Post id

3 user_id bigint User id

4 username varchar(255) User name

5 comment varchar(100) Comment content

6 date date Comment content

Table 24 Post comment Table

Trailers
Order Attribute Data type Meaning Constraints Note

1 id_trailer tinyint Trailer id Primary key

2 id_movie tinyint(1) Movie id

3 video text Video path

4 image text Like poster

5 view bigint View count

Table 25 Trailer Table

Trailer_comments

Order Attribute Data type Meaning Constraints Note

1 Id Bigint Trailer comment id Primary key

2 Trailer_id Tinyint Trailer id

62
 3 User_id Bigint User id

4 Comment Varchar(1000) Comment content

5 Date Date Comment date

Table 26 Trailer comment Table

Trailer_reactions

Order Attribute Data type Meaning Constraints Note

1 trailer_id tinyint Trailer id primary key

2 user_id bigint User id primary key

action enum(“like”, reaction

“dislike”)

Table 27 Trailer reaction Table

Users

Order Attribute Data type Meaning Constraints Note

1 id bigint User id Primary key

2 username varchar(255) User name

3 password varchar(255) Password

4 email varchar(255) Email 0: Male

1: Female

63
5 avatar text Avatar

Table 28 Usser Table

64
 CHAPTER 4. PROGRAMMING
Interface programming

No. Page Description

1 Login The interface when the user chooses to log into the system.

2 Sign Up The interface when user chooses to register new account.

3 Home Main interface of the website.

4 Blog The interface when user visits the blog page to view other
article content.

5 Watch The interface when users go to the watch page to watch

videos and movie trailers.

Movie
The interface displays detailed information about the movie,
including, description, release date, producer, country, video,
images, movie trailers, voice actors.

Trailer
The interface displays detailed information about a movie
trailer, including: video, images, comments from users.

Watch - coi phim

The video display interface allows users to watch movies,
total interactions, and comments from users.

Watch - animation
Display banners for users to access the movie.
6 Contact us User interface for support, contact information for the
website, leave feedbacks.

7 About us The interface allows users to view the website's founding

team and introductory information about the website.
12 Blog1, Blog2, The interface displays detailed information about a blog post
Blog3, Blog4, including: title, content, image, author, posting time,
Blog5 comments from users.

14 Edit Profile The interface allows users to update personal information,

passwords,...

65
17 Navigation bar The interface to navigate to other pages from the home page

18 Posts Archive The interface displays the total number of posts on the admin
page with edit, delete, and view rights.
19 Movies Archive The interface displays the total number of videos on the
admin page that can be viewed.

20 Post Comments The interface displays comment from users on blog, movie,
Movie Comments and trailer pages
Trailer Comments
22 Users Account The interface displays information about users on the admin
page

23 Dashboard The interface displays statistics about articles, videos,

accounts, comments, reactions
Table 29 The table describes the functions of the website

Functional programming

No. Function name Description

1 Create an account Allows users to create new accounts on the
website.

2 Login your account Allow users to log in to their accounts on the

website.

3 Screen Returns the screen corresponding to the user's

request.
4 Sign in with google Allow users to sign in to their account using a
Google account.

5 Check user permissions Returns the user's access rights on the website.

6 Like movie Allow users to like videos and see the total number
of likes.
7 Dislike movie Allows users to dislike a movie and see the total
number of dislikes.
8 Like trailer Allow users to like the trailer and see the total
number of likes.
66
9 Dislike trailer Allows users to dislike the trailer and see the total
number of dislikes.

10 Save the user's movie Save the user's movie viewing history.
viewing history
11 Save user's trailer viewing Save user's trailer viewing history.
history
12 Add user Add new users to the system.
13 Edit post information Allows administrators to edit physical post
information by post id.

14 Read comments on this post Allows administrators to read comment

information from users by post id.

15 Read movie comments Allows administrators to read comment

information from users by movie id.
16 Đọc comment trailer Allows administrators to read comment
information from users according to trailer id.

17 Edit user profile Allows users to edit avatar, password, username

except email.

18 Remove comments on posts Allows administrators to delete comments on users'

posts.

19 Remove movie comments Allows administrators to delete user movie

comments.

20 Remove trailer comments Allows administrators to delete user movie trailers.

21 Remove the post Allows administrators to remove posted posts.
22 Add posts Allows administrators to add posts as published or
draft.

23 Send email Allows users to send mail with email content,

username, user email.
24 Visit linked websites Allows users to redirect to facebook, instagram,
tiktok, youtube of the website.

25 Create comments and read Allows users to create comments on posts and read
post comments other users' comments.

67
26 Create comments and read Allows users to create movie comments and read
movie comments other users' comments.

27 Create comments and read Allows users to create trailer comments and read
trailer comments other users' comments.
28 Watch video Allows users to watch movies and trailers.

31 Logout of your account Allow users and admins to logout of accounts

32 Forgot password Allows users who have forgotten their password to
regenerate

33 Register an account Allows users to create new accounts

Table 30 Table describing the website's functions

68
 CHAPTER 5. INSTALLATION AND USER INSTRUCTIONS
1. Project Installation
Install PHP, XAMPP or Laragon, and Composer from Composer.
Create a database in MyPHPAdmin with the name "bp6qb7pdxzzsqvcbshtc" and import
the database to your computer.
Clone Project through Github link:
https://github.com/lananh15/IS207.O21-DoAnNhom2.git
Move the project to Laragon's www directory or XAMPP’s htdocs directory.
After cloning or extracting, use Visual Code Studio and run the following commands:
cd IS207.O21-DoAnNhom2
composer install
2. Use the website on the server

The project can be viewed on the server with the following address:
https://insideout.io.vn/

69
 CHAPTER 6. RESULT SUMMARY
1. Accomplishments
1.1. About the system
The project team has successfully developed an online movie streaming system
exclusively screening the film "Inside Out" and promoting the movie on the web platform.
This system not only allows users to enjoy the movie "Inside Out" in high quality but also
brings information related to the movie closer to the audience.
Furthermore, the website provides in-depth blogs about the film "Inside Out",
helping viewers gain a comprehensive understanding and deeper insight into this cinematic
work. Notably, the system also integrates information and promotion for the second part of
the movie, providing the latest updates on the release date, trailers, and exciting behind-
the-scenes content. Additionally, users can share their emotions and discuss both parts of
the film through the comment section, creating a vibrant and connected community of
"Inside Out" movie enthusiasts.

1.2. About project management

To ensure the project was completed on schedule, the team applied effective project
management methods. The plan was established in detail, requirements were clearly
defined, and the software development process was implemented efficiently. Specifically,
the team divided the project into clear phases with specific time milestones. In each phase,
tasks were assigned clearly, and progress was closely monitored.
Regular meetings helped the team control progress and address any arising issues
promptly. Progress review and improvement meetings after each phase helped the team
identify and continuously improve their working processes.
Thanks to applying this project management method, the team effectively completed
the website development project, fully meeting the set requirements and objectives.

2. Limitations
2.1. About the system

70
 Despite the team's efforts, the system has not yet fully optimized all the intended
functions. There are still many areas that need improvement, especially in terms of
seamlessly connecting the movie viewing experience with the user experience. Ensuring
continuity and stability of the system throughout the movie viewing process is still
challenging. This can lead to interruptions or delays in loading the movie, causing
discomfort for users.
2.2. About project management
Although the workload was distributed evenly among the members and the team
collaborated seamlessly, being the first time the team undertook creating such a complex
website, they still encountered some difficulties in project management. The lack of
experience in identifying and resolving technical issues led to delays in some phases. In
particular, the members struggled to anticipate potential risks and implement timely
preventive measures. Moreover, despite regular meetings helping the team control progress,
the lack of flexibility in adjusting plans sometimes posed obstacles. This not only impacted
the project timeline but also required more effort from members to ensure the final product
quality.
3. Development direction
The project team has set forth several future development directions:
- Enhance security features: Implement the latest security solutions to ensure the safety
of user data.
- Improve compatibility: Ensure that the website runs smoothly across various devices
and browsers, including computers, mobile phones, and tablets.
- Optimize system performance: Utilize new technologies to optimize system
performance and ensure stability.
- Enhance data analytics and management capabilities: Apply new technologies to
accurately and efficiently analyze and manage data.

71
 CONCLUSION
Throughout the process of building and developing the movie streaming website,
we have continuously strived to create a platform that is not merely a place for
entertainment, but also a space for connecting and sharing everyone's passion for cinema.
We take pride in the achievements we have made, from developing a system with diverse
features to effective project management.
One of the prominent films we chose to feature on the website is "Inside Out". This
is a masterpiece by Disney-Pixar, offering a profound and creative insight into the world
of emotions within the human mind. The movie has captivated the hearts of millions of
viewers worldwide with its unique storyline and meaningful lessons about the importance
of all emotions in life.
However, we are also keenly aware of the challenges and limitations that the
project has faced, such as the uneven distribution of resources and certain aspects of the
system that have not been fully refined. This has motivated us to continue improving and
refining further.
"Inside Out" not only brings hearty laughter but also touches the hearts of
audiences with its profound messages. With vibrant visuals and outstanding visual effects,
the movie has created a colorful and rich internal world. The enthusiastic acclaim from
critics and global audiences, along with the Academy Award for Best Animated Feature,
has proven the powerful appeal of this film.
Looking towards the future, we have set clear goals for the development of the
website. Enhancing security features, optimizing system performance, improving
compatibility across devices, and advancing data management capabilities will be top
priorities. We are committed to continuing research and development to deliver the best
movie viewing experience for users.
Our website is not just a project, but a grand dream of bringing genuine
entertainment value and connecting movie enthusiasts. We believe that films like "Inside
Out" will continue to open up new experiences, enrich spiritual life, and unite people
through their shared love for cinema.

72
 We sincerely thank all the project team members for their support and
contributions, as well as the attention and support from the user community. Don't miss
the opportunity to experience "Inside Out" on our website! Join us on this journey, where
movies become the language that connects and creates unforgettable memories.

Wish you joyful and meaningful movie-watching moments!

73