final report web application development topic game store website

Web Application Development - Administrator’s account existed - Administrator’s status is signed-in.. System displays invalid information due to data had beexisted in the database.. Mana

Trang 1

VIETNAM NATIONAL UNIVERSITY HCMC UNIVERSITY OF INFORMATION TECHNOLOGY

FACULTY OF INFORMATION TECHNOLOGY

Ho Chi Minh City, December, 2023

Trang 2

Web Application Development

ACKNOWLEDGEMENT

Firstly, our group would like to express sincere gratitude to the University of Information Technology for including the Web Application Development course in the curriculum In particul ar, we extend our deep appreciation to the course instructor, Mr Trinh Trong Tin, for guiding and imparting invaluable knowledge to us throughout the course Over the past three months, we have gained a wealth of practical knowledge and developed a serious and effective study attitude These undoubtedly will serve as precious assets, providing us with a solid foundation for our future endeavors The Web Application Development course is an interesting and highly practical subject with real-world relevance, especially in the current era of industrialization and modernization It ensures the provision of sufficient knowledge that is closely aligned with the practical needs of students However, due to limited knowledge and a learning curve in adapting to practical aspects, despite our utmost efforts, there are inevitably some shortcomings and areas of difficulty in implementing the project We sincerely hope that you, as our instructor, will review and provide feedback to help improve our project

We sincerely thank you!

Ho Chi Minh City, December 29th, 2023 Nguyen Tran Hoi Thang

Nguyen Mai Huu Phuc Hoang Minh Hung Tran Ngoc Diem My Phan Nhat Hoang Nguyen Hoang Quan

Trang 3

Trang 4

OF CONTENTS TABLE

1.1.2 Scope of the project 8

1.2 Reasons for choosing the topic 8

1.3 Objectives of the project 9

1.4 Related Research 9

1.4.1 PHP Framework Exploration 9

1.4.2 MVC 9

1.4.3 HTML and CSS Framework Selection 10

1.4.4 Database Design and SQL Integration 10

1.4.5 Security Best Practices in PHP 10

1.4.6 HTML5 and CSS3 Features 10

1.4.7 Responsive Web Design with CSS 10

1.4.8 PHP and SQL Performance Optimization 11

1.4.9 HTML Forms and User Input Handling 11

1.5 Projects similar or relevant to the topic 11

Trang 5

1.6.1 Similarities 12

1.6.2 Differences 13

CHAPTER 2 SYSTEM ARCHITECTURE OVERVIEW 15

2.1 System Architecture Model 15

4.1.3 Usecase specification and activity diagram 23

4.1.3.1 Login (for Administrator) 23

4.1.3.2 Manage Profile (for Administrator) 25

4.1.3.3 Manage Product (for Administrator) 29

4.1.3.4 Manage Category (for Administrator) 33

4.1.3.5 Update order status (for Administrator) 37

4.1.3.6 View Statistic (for Administrator) 39

4.1.3.7 Sign up (for Unsigned-up customer) 41

4.1.3.8 Login (for Unsigned-up customer) 43

4.1.3.9 Buy Product (for Signed-up customer) 45

4.1.3.10 Search Product (for Signed-up customer) 49

4.1.3.11 Edit Profile (for Signed-up customer) 50

Trang 6

4.1.3.12 Reservation 52

4.2 Sequence Diagram 54

4.2.1 Login (for Administrator) 54

4.2.2 Manage Profile (for Administrator) 55

4.2.3 Manage Product (for Administrator) 56

4.2.4 Manage Category (for Administrator) 59

4.2.5 Update order status (for Administrator) 60

4.2.6 View Statistic (for Administrator) 61

4.2.7 Sign up (for Unsigned-up customer) 62

4.2.8 Login (for Unsigned-up customer) 62

4.2.9 Buy Product (for Signed-up customer) 63

4.2.10 Search Product (for Signed-up customer) 65

4.2.11 Edit Profile (for Signed-up customer) 65

4.2.12 Reservation 66

4.3 Entity-Relationship Diagram (ERD) 67

4.3.1 Entity-Relationship Diagram 67

4.3.2 Data Organization 67

CHAPTER 5 IMPLEMENT AND TESTING 69

5.1 Introduction to the implementation environment 69

Trang 7

Trang 8

CHAPTER 1 INTRODUCTION 1.1 Overview

1.1.1 Introduction

Welcome to the initiation of our ambitious project, the development of a edge gaming commerce website In a digital era where gaming has evolved into a global cultural phenomenon, this project stands as a testament to our commitment to providing an immersive and convenient platform for gamers and gaming enthusiasts

cutting-1.1.2 Scope of the project

Allow users to register, log in, and manage their profiles securely Dynamically display gaming products with details such as title, description, images, and price Implement a shopping cart system for users to add, remove, and manage selecte d items Develop a secure and user-friendly checkout process with multiple payment options Enable order confirmation, processing, and storage of transaction details in the database Implement an admin panel for managing products, user accounts, and monitoring transactions Ensure the website is accessible and visually appealing across various devices and screen sizes Implement measures to secure user data, preventSQL injection, and protect against other potential threats Implement a search functionality and filtering options to help users find specific products easily Create comprehensive documentation covering code structure, database schema, and user guides for future maintenance and development

1.2 Reasons for choosing the topic

The decision to develop a gaming commerce website stems from a recognition of the growing significance of the gaming industry With millions of gamers worldwide, there is a demand for a central hub where enthusiasts can explore the latest releases,find unique in-game items, and connect with a community of like-minded individuals

This project not only serves as a practical application of web development skills but also aligns with the cultural and entertainment trends of the digital age By creating a user-friendly and secure platform, we aim to provide gamers with a seamless and enjoyable experience while contributing to the vibrant gaming ecosystem

Trang 9

The fusion of HTML, CSS, and PHP technologies will empower us to build a visually appealing front-end and a robust back-end that handles user interactions, transactions, and database management Through this endeavour, we aspire to contribute to the digital landscape by offering a tailored solution for gamers and gaming enthusiasts

1.3 Objectives of the project

• Develop a user-friendly interface that caters to the needs and preferences of gamers, ensuring a seamless and enjoyable browsing and shopping experience

• Integrate features such as user reviews, ratings, and social media sharing to promote community interaction and feedback, enhancing the overall user experience

• Populate the platform with a comprehensive array of gaming products, including the latest releases, accessories, and in-game items, catering to the diverse preferences of gamers

• Enhance user navigation by implementing efficient search functionalities and filtering options, enabling users to quickly find and explore specific gaming products

• Offer users a personalised dashboard where they can track their orders, manage preferences, and access their purchase history, fostering a sense of individualised engagement

Trang 10

Objective: Grasp the core concepts of Model-View-Controller (MVC) architecture

Approach: Study MVC principles and how they separate the application into model, view, and controller components for better organisation and maintainability

1.4.3 HTML and CSS Framework Selection

Objective: Choose appropriate HTML and CSS frameworks for front-end development

Approach: Explore frameworks such as Bootstrap or Tailwind CSS Consider their responsiveness, ease of integration, and impact on overall design consistency

Objective: Design an efficient database schema and integrate it with SQL for data management

Approach: Define the database structure based on the application's requirements Implement SQL queries for creating, retrieving, updating , and deleting records

1.4.5 Security Best Practices in PHP Objective: Ensure the security of the PHP codebase

Approach: Research PHP security best practices, including input validation, output sanitization, and protection against common vulnerabilities like SQL injection and cross-site scripting (XSS)

Objective: Implement a responsive design to ensure optimal user experience on various devices

Trang 11

Approach: Study CSS media queries and other techniques for responsive design Test layouts on different screen sizes

1.4.8 PHP and SQL Performance Optimization

Objective: Optimise PHP code and SQL queries for improved performance Approach: Investigate techniques for code optimisation in PHP and SQL query tuning Consider caching strategies to reduce server load

1.4.9 HTML Forms and User Input Handling

Objective: Design user-friendly HTML forms and handle user input securely Approach: Research HTML form best practices Implement PHP form validation and sanitisation to prevent security vulnerabilities

1.5 Projects similar or relevant to the topic 1.5.1 Steam (store.steampowered.com)

• Description: Steam is a digital distribution platform for video games, offering a wide range of games for purchase It includes features such as user reviews, shopping cart functionality, and secure transactions

• Relevance: Analyzing Steam can provide insights into effective e-commerce features, user engagement strategies, and security measures in the gaming industry

1.5.2 Humble Bundle (humblebundle.com)

• Description: Humble Bundle is a platform that sells bundles of digital content, including games, at a pay-what-you-want pricing model It often includes charity contributions

• Relevance: Studying Humble Bundle can offer insights into unique pricing models, charity integration, and user incentives in gaming commerce

• Description: GOG (Good Old Games) is a digital distribution platform for video games that focuses on DRM-free content It offers a diverse library of games and emphasizes user-friendly features

Trang 12

• Relevance: Exploring GOG can provide ideas on user-friendly interfaces, customer support, and DRM-free content strategies

1.5.4 Epic Games Store (epicgames.com/store)

• Description: The Epic Games Store is a digital video game storefront offering exclusive titles, free games, and a variety of features for both developers and users

• Relevance: Examining the Epic Games Store can shed light on exclusive content strategies, developer collaboration, and promotional activities in the gaming commerce sector

1.5.5 Itch.io (itch.io)

• Description: Itch.io is a platform for indie game developers to showcase, sell, and distribute their games It supports a wide range of projects, from small indie games to experimental projects

• Relevance: Reviewing Itch.io can provide insights into supporting indie developers, community-building features, and alternative distribution models

1.5.6 Gameflip (gameflip.com):

• Description: Gameflip is a marketplace for buying and selling digital goods related to gaming, including in-game items, gift cards, and game keys • Relevance: Investigating Gameflip can offer insights into user- -user to

transactions, digital goods sales, and community-driven commerce in the gaming

1.6 Compare similarities and differences 1.6.1 Similarities

• E-commerce Functionality: All platforms facilitate e-commerce transactions, allowing users to purchase digital games, in-game items, or related content • User Authentication and Accounts: User authentication is a common feature,

requiring users to create accounts, log in, and manage their profiles for a personalised experience

Trang 13

• Product Listings and Descriptions: Each platform displays detailed product listings, including game titles, descriptions, images, and pricing information • Shopping Cart and Checkout Process: Users can add items to a shopping cart

and proceed through a secure checkout process to complete transactions • User Reviews and Ratings: Platforms incorporate user reviews and ratings to

provide valuable feedback and help users make informed purchasing decisions

• Responsive Design: All platforms strive for a responsive design, ensuring a consistent and optimal user experience across various devices and screen sizes

• Security Measures: Robust security measures are implemented to protect user data, ensure secure transactions, and prevent common vulnerabilities 1.6.2 Differences

• Content Focus: Platforms may differ in content focus, with some emphasising indie games (e.g., Itch.io) while others feature major titles or exclusive content (e.g., Epic Games Store)

• Pricing Models: Pricing models vary, with platforms adopting different strategies such as pay-what-you-want bundles (Humble Bundle) or traditional pricing structures

• Charitable Contributions: Humble Bundle stands out by incorporating charitable contributions as part of its business model, allowing users to support charities through their purchases

• DRM-Free Approach: GOG distinguishes itself by offering a DRM-free approach, providing games without digital rights management restrictions, appealing to users valuing ownership and flexibility

• Indie Developer Support: Itch.io specifically targets indie game developers, providing a platform for them to showcase and sell their projects, fostering a supportive community

Trang 14

• Exclusive Content: Some platforms like Epic Games Store focus on securing exclusive titles to attract users, creating a competitive advantage in the market

• User-to-User Transactions: Platforms like Gameflip and Kinguin allow users to engage in user- -user transactions, enabling the resale of game keys or in-togame items

• Community Features: Platforms may differ in the emphasis on community features, with some fostering developer-user interaction (e.g., Steam) and others focusing on user-generated content and curation

Trang 15

CHAPTER 2 SYSTEM ARCHITECTURE OVERVIEW

2.1 System Architecture Model

The website follows the Model-View-Controller (MVC) architecture pattern, provide a clear separation of concerns and facilitating efficient development and mainternance

applications as it promotes a clear separation of responsibilities between different components

MVC components: a) M(Model)

Trang 16

and retrieval

Controller or other models b) V(View)

elements based on the data received from the Controller or state management (Redux)

• The View transmits user demands to the Presenter or Model through the Controller

The use of MVC in ReactJS with MySQL provides several advantages It offers a clear division of responsibilities, making it easier for developers to understand and extend the codebase It also ensures that business logic is separated from UI, enhancing testability and maintainability

2.2 Technology

Trang 17

Web Application Development 2.3 Packages

2.4 Frameworks

• The web application is built using the ReactJS framework for the frontend

development

and retrieval

Trang 18

CHAPTER 3 SOFTWARE REQUIREMENTS 3.1 Functional requirements

3.1.1 Storage function

The storage feature is one of the most important features of the system, which is the basis for implementing system's features To ensure effective management, the system needs to store the following information:

• Partner information: name, index, logo, address, number of cinemas, number of seats

• Movie information: title, poster, trailer, duration, director, year of production, release date, specified age, rating, country, content, genre

• User information: username, gender, date of birth, address, phone, email, id, registration time, accumulated points, password, user type

• Promotion information: promotion name, image, content, start date, end date • Showtime information: movie name, show date, screening room, show time, price, theater, type of showing, cinema system.

3.1.2 Feature function

In addition, the system must also meet the following requirements: • Query function: able to respond query requests from customers/manager such as: find movie information, find customer information, promotion information, showtime information, news information

• Statistical, analysis, reporting functions: help management staff monitor the general situation of the cinema

• Update function: the system must ensure that the update function is convenient and avoid errors due to the user's negligence.

• Automatic functions: help users more convenient in operation such as automatic fare calculation, automatic generation of ticket id

Trang 19

Web Application Development 3.2 Non-functional requirements

• Customer GUI requirements: multilingual, friendly interface, highly interactive • The management GUI: simple, close as report as possible, easily to query ➢ Quality requirements:

• Evolution: Easy to upgrade or increase utility modules • Convenience:

o The system has an intuitive, user-friendly and easy-to-use interface o Clear specifications and instructions for use

Trang 20

4.1 Usecase Diagram

Figure 0.1 Usecase Diagram as a Administrator

Trang 21

Figure 0.2 Sub Usecase diagram as a Administrator

Figure 0.3 Usecase Diagram as a Customer

Trang 22

Web Application Development 4.1.1 List of actors

all the system’s services

services

4.1.2 List of usecase

Administrator’s Rule

total customer, revenue, total messages

product to wishlist/ Checkout

Trang 23

system for all monitoring

- Administrators’ account existed

successful

- Administrators is redirected to management page

2 Administrator enters sign in information

3 System validates administrators entered emailpassword in correct format

4 System validates administrators’ data with existed administrator account in database

Trang 24

5 System stores signed-in status of administrators usessions

6 System displays successful signed-in and redirecmanagement page

Use-case continue at step 2

4a System display invalid information due to administrators’ account information does not match with existed account information in database Use-case continue at step 2 Exception flow

Trang 25

Figure 3 Activity Diagram Login for Administrator 4.1.3.2 Manage Profile (for Administrator)

Trang 26

- Administrator’s account existed - Administrator’s status is signed-in

- Data at management page is updated (with new pro

9 Administrator chooses profile to be deleted 10 System shows confirm dialogue

11 Administrator confirms delete request 12 System processes delete request

13 System validates no external data required profile information and selected item existed in database

Trang 27

14 System deletes profile information from the databas15 System reloads User page

Usecase continues at step 4

6a System displays invalid information due to data had beexisted in the database Usecase continues at step 4

confirm to delete

21a System displays error notification because extedata had required that profile information or no data exisFunction stops

Trang 28

Trang 29

4.1.3.3 Manage Product (for Administrator)

- Data at management page is updated (with product)

loaded from database

2 Administrator chooses one function: Add/Edit/Delete product

- Add product:

3 System displays add product page 4 Administrator enters product informatio

and click submit

5 System validates product information isin correct format

6 System validates product information with existed data in database 7 System stores product information in

Trang 30

Trang 31

22 System reloads Product page

6b System displays invalid information due to data had beexisted in the database Usecase continues at step 4 12a System displays invalid information due to wrong formUsecase continues at step 11

13a: System displays invalid information because data hadn’t been existed in the database Usecase continues at step 1

confirm to delete

20a System displays error notification because extedata had required that product information or no data exiFunction stops

Trang 32

Trang 33

4.1.3.4 Manage Category (for Administrator)

page

- Data at management page is updated (with category)

2 Administrator chooses one function: Add/Edit/Delete category Add category:

4 Administrator enters category information and click submit 5 System validates category information

in correct format

6 System validates category information with existed data in database 7 System stores category information in

Trang 34

and reloads Category page Delete category:

16 Administrator chooses category to be deleted

17 System shows confirm dialogue 18 Administrator confirms delete request19 System processes delete request 20 System validates no external data required category information and

Trang 35

selected item existed in database

from the database

6b System displays invalid information due to data had beexisted in the database Usecase continues at step 4 12a System displays invalid information due to wrong formUsecase continues at step 11

13a: System displays invalid information because data hadn’t been existed in the database Usecase continues at step 1

confirm to delete

21a System displays error notification because extedata had required that category information or no data exiFunction stops

Trang 36

Trang 37

4.1.3.5 Update order status (for Administrator)

- Data at management page is updated (with new ord

2 Administrator chooses order to beupdated

3 System displays update order informatipage

4 Administrator modifies order informatioand clicks submit

5 System validates order information in correct format

6 System validates order information withexisted in database

7 System stores order information in database

8 System displays successful notification

Trang 38

and reloads Order page

6b System displays invalid information due to data had beexisted in the database Usecase continues at step 4 Exception flow