final report web application development topic game store website

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.83 MB, 76 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

VIETNAM NATIONAL UNIVERSITY HCMC UNIVERSITY OF INFORMATION TECHNOLOGY

FACULTY OF INFORMATION TECHNOLOGY

Ho Chi Minh City, December, 2023

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Web Application Development

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Web Application Development

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

Web Application Development

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

Web Application Development

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Web Application Development

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Web Application Development

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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Web Application Development

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Web Application Development

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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Web Application Development

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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

Web Application Development

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Web Application Development

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Web Application Development

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

Web Application Development

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)

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

Web Application Development

and retrieval

Controller or other models b) V(View)

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

<small>• </small> 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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Web Application Development 2.3. Packages

2.4. Frameworks

<small>• </small> The web application is built using the ReactJS framework for the frontend

development

and retrieval

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Web Application Development

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

Web Application Development

4.1. Usecase Diagram

Figure 0.1. Usecase Diagram as a Administrator

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

Web Application Development

Figure 0.2. Sub Usecase diagram as a Administrator

Figure 0.3. Usecase Diagram as a Customer

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Web Application Development

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.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Web Application Development

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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

Web Application Development

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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

Web Application Development

- 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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

Web Application Development

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.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

Web Application Development

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

Web Application Development

4.1.3.3. Manage Product (for Administrator)

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

- 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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

Web Application Development

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

Web Application Development

22. System reloads Product page.

Usecase continues at step 4

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

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

Web Application Development

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

Web Application Development

4.1.3.4. Manage Category (for Administrator)

page

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

- Data at management page is updated (with category)

loaded from database

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

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

Web Application Development

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

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

Web Application Development

selected item existed in database

from the database

Usecase continues at step 4

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

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

Web Application Development

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

Web Application Development

4.1.3.5. Update order status (for Administrator)

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

- Data at management page is updated (with new ord

loaded from database

2. Administrator chooses order to beupdated.