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
INTRODUCTION
Overview
Welcome to the initiation of our ambitious project, the development of a cutting- 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 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.
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
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.
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.
Related Research
Objective: Identify the most suitable PHP framework for the back-end development
Approach: Research and compare popular PHP frameworks like Laravel, Symfony, and CodeIgniter Evaluate their features, community support, and scalability
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 1.4.4 Database Design and SQL Integration
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: Leverage the latest features of HTML5 and CSS3 for modern web development
Approach: Explore new elements and styling options introduced in HTML5 and CSS3 Ensure compatibility with major browsers
1.4.7 Responsive Web Design with CSS
Objective: Implement a responsive design to ensure optimal user experience on various devices
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.
Projects similar or relevant to the topic
• 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
• 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 1.5.3 GOG (gog.com)
• 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
• 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
• 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
• 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
Compare similarities and differences
• 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
• 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
• 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-to game 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.
SYSTEM ARCHITECTURE OVERVIEW
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
The Model-View-Controller(MVC) widely adopted for developing web applications as it promotes a clear separation of responsibilities between different components
• The Model component handles business logic and data handling processes
• It interacts with the MySQL database to perform operations, data manipulation, and retrieval
• The Model responds to request sent by the Controller and sends data back to the Controller or other models b) V(View)
• The View component focuses on presenting data to the end user
• In ReactJS, the View is implemented using reusable components that render UI 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 c) C(Controller)
• The Controller acts as the main part of the system, receiving requests from other elements (Models, Views)
• It gathers appropriate information and facilitates communication between the Model and View components
• The primary objective of the Controller is to separate business logic from the
• In the ReactJS application, the Controller functionality is often implemented using Redux to manage application state and handle interactions between components
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.
Frameworks
• The web application is built using the ReactJS framework for the frontend
• The backend uses Node.js with Express.js framework for server-side development
• MySQL is employed as the database management system to handle data storage and retrieval
SOFTWARE REQUIREMENTS
Functional requirements
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.
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
Non-functional requirements
• Customer GUI requirements: multilingual, friendly interface, highly interactive
• The management GUI: simple, close as report as possible, easily to query
• 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
- Efficiency: o The website shows the showtimes of cinemas well o The website works stably and reliably.
- Compatibility: o Multi-adaption with popular web browsers (Internet Explorer, Fire Fox, Chrome).
ANALYSIS AND DESIGN
Usecase Diagram
Figure 0.1 Usecase Diagram as a Administrator
Figure 0.2 Sub Usecase diagram as a Administrator
Figure 0.3 Usecase Diagram as a Customer
1 Administrator People manage the system
2 Customer People use partial system’s services
3 Signed-up customer People is signed-in to system and available to all the system’s services
4 Unsigned-up customerPeople can sign in / sign up to use all the system’s services
Login Login to play the role
Manage Profile Change/ Delete private information Manage Product Add/Edit/Delete product
Manage Category Add/ Edit/ Delete category
Update order status Update order status
View Statistics See the statistics include product add total customer, revenue, total messages Customer’s role Sign up Sign up for membership
Log in Log in for using services
Buy Product See product/ Add product to cart/ Ad product to wishlist/ Checkout
Search Product Search information such as name product, category, ….
Edit Profile Change private information
4.1.3 Usecase specification and activity diagram
Usecase Name Login (for Administrator)
Description Administrator use exist management account to sign-in system for all monitoring
Trigger Administrator clicks to button “Log in” at management page Pre-condition - Administrators’ device must connect to Internet
Post-condition - Administrators get a notification about signed successful
- Administrators is redirected to management page Basic flow 1 System displays login page
2 Administrator enters sign in information
3 System validates administrators entered email password in correct format
4 System validates administrators’ data with existed administrator account in database
5 System stores signed-in status of administrators u sessions
6 System displays successful signed-in and redirec management page
Alternative flow 3a System display invalid information due to wrong forma
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
Figure 3 Activity Diagram Login for Administrator
Description Administrator can delete/update private profile
Trigger Administrator clicks to button “User” at management pagePre-condition - Administrators’ device must connect to Internet
- Administrator’s status is signed-in
Post-condition - Profile information successful insert to database
- Data at management page is updated (with new pro
Basic flow 1 System displays User page with data loaded from database
2 Administrator chooses one function: Edit/Delete pro
3 Administrator chooses profile information to be updated
4 Administrator modifies profile information and clicks submit
5 System validates product information in correct form
6 System validates product information with existed in database
7 System stores profile information in database
8 System displays successful notification and reloads User page
9 Administrator chooses profile to be deleted
13 System validates no external data required profile information and selected item existed in database
14 System deletes profile information from the databas
Alternative flow 5a System displays invalid information due to wrong form
6a System displays invalid information due to data had be existed in the database Usecase continues at step 4
Exception flow 18a Function stops because the administrator d confirm to delete
21a System displays error notification because exte data had required that profile information or no data exisFunction stops
Description Administrator can add/delete/edit product
Trigger Administrator clicks to button “Product” at management page Pre-condition - Administrators’ device must connect to Internet
- Administrator’s status is signed-in
Post-condition - Product information successful insert to database
- Data at management page is updated (with product)
Basic flow 1 System displays Product page with dat loaded from database
2 Administrator chooses one function: Add/Edit/Delete product
3 System displays add product page
4 Administrator enters product informatio and click submit
5 System validates product information is in correct format
6 System validates product information with existed data in database
7 System stores product information in database
8 System displays successful notification and reloads product page
9 Administrator chooses product to be edited
10 System displays edit product informatio page
11 Administrator modifies product information and clicks submit
12 System validates product information in correct format
13 System validates product information with existed in database
14 System stores product information in database
15 System displays successful notification and reloads Product page
16 Administrator chooses product to be deleted
20 System validates no external data required product information and selected item existed in database
21 System deletes product information from the databa
Alternative flow 5a System displays invalid information due to wrong form
6b System displays invalid information due to data had be existed in the database Usecase continues at step 4 12a System displays invalid information due to wrong form Usecase continues at step 11
13a: System displays invalid information because data hadn’t been existed in the database Usecase continues at step 1
Exception flow 18a Function stops because the administrator d confirm to delete
20a System displays error notification because exte data had required that product information or no data exiFunction stops
Description Administrator can add/delete/edit category
Trigger Administrator clicks to button “Category” at management page
Pre-condition - Administrators’ device must connect to Internet
- Administrator’s status is signed-in
Post-condition - Category information successful insert to database
- Data at management page is updated (with category)
Basic flow 1 System displays Category page with da loaded from database
2 Administrator chooses one function: Add/Edit/Delete category Add category:
3 System displays add category page
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 database
8 System displays successful notification and reloads category page
9 Administrator chooses category to be edited
10 System displays edit category information page
11 Administrator modifies category information and clicks submit
12 System validates category information correct format
13 System validates category information with existed in database
14 System stores category information in database
15 System displays successful notification and reloads Category page Delete category:
16 Administrator chooses category to be deleted
20 System validates no external data required category information and selected item existed in database
21 System deletes category information from the database
Alternative flow 5a System displays invalid information due to wrong form
6b System displays invalid information due to data had be existed in the database Usecase continues at step 4 12a System displays invalid information due to wrong form Usecase continues at step 11
13a: System displays invalid information because data hadn’t been existed in the database Usecase continues at step 1
Exception flow 18a Function stops because the administrator d confirm to delete
21a System displays error notification because exte data had required that category information or no data exiFunction stops
4.1.3.5 Update order status (for Administrator)
Usecase Name Update order status
Description Administrator can update order status
Trigger Administrator clicks to button “Order” at management page Pre-condition - Administrators’ device must connect to Internet
- Administrator’s status is signed-in
Post-condition - Order information successful insert to database
- Data at management page is updated (with new ord
Basic flow 1 System displays Order page with data loaded from database
2 Administrator chooses order to be updated
3 System displays update order informati page
4 Administrator modifies order informatio and clicks submit
5 System validates order information in correct format
6 System validates order information with existed in database
7 System stores order information in database
8 System displays successful notification and reloads Order page
Alternative flow 5a System displays invalid information due to wrong form
6b System displays invalid information due to data had be existed in the database Usecase continues at step 4 Exception flow
Description Administrator can see the statistics include product ad total customer, revenue, total messages
Trigger Administrator clicks to button “Dashboard” at management page
Pre-condition - Administrators’ device must connect to Internet
- Administrator’s status is signed-in
Post-condition - All information successful insert to database
- Data at management page is updated
Basic flow 1.System processes request
2.System gets statistic information from database 3.System displays Dashboard page with statistics Alternative flow
4.1.3.7 Sign up (for Unsigned-up customer)
Usecase Name Sign up (for Unsigned-up customer)
Description Customers create an account for all system services Trigger Customer clicks to button “Register” at login page
Pre-condition Customer device must connect to Internet ’s
Post-condition - Customer gets a notification about signed-in succes
- Customer gets a notification about sign up succes Customer account is created and can be used to si for a next time
Basic flow 1.System displays sign up page
2.Customer enters sign up information and cli confirm
3.System validates customer entered information correct format
4.System validates customer information unique database
5.System stores customer information in the databas
6.System notifies customer that account crea customer can login by using this account
Alternative flow 3a System displays invalid information due to wrong form
Use-case continue at step 2
4a System displays invalid information due to maybe have existed account with customer entered information Use-ca continue at step 2
Figure 0.4 Activity Diagram Sign up for Unsugned in customer
4.1.3.8 Login (for Unsigned-up customer)
Usecase Name Login (for Unsigned-up customer)
Description Customer uses exist management account to sign-in to sy for all monitoring
Trigger Customer clicks to button “Log in” at login page
Pre-condition - Customer device must connect to Internet ’s
- Customer account existed ’s Post-condition - Customer gets a notification about signed-in succes
- Customer is redirected to home page and custome use services
Basic flow 23 System displays Login page
24 Customers enters login information a clicks confirm
25 System validates information in corre format
26 System validates customer’s input data with existed account data in database
27 System stores login status using sessio
28 System displays successful login a redirect to home page
Alternative flow 3a System displays invalid information due to wrong form
Use-case continue at step 2
4a System display invalid information due to customer’s account information does not match with existed account information in database Use-case continue at step 2 Exception flow
Figure 0.5 Activity Diagram Log in for Unsigned- customer up
4.1.3.9 Buy Product (for Signed-up customer)
Description Customer can add product to shopping cart/ add produ wishlist/ checkout
Trigger Customer clicks to button “Product” at home page Pre-condition - Customer s device must connect to Internet ’
- Customer’s status is signed-in.
Post-condition - Order information successful insert to database
- Data at management page is updated (with shopping cart/ wishlist)
Basic flow 1 System displays Product page with data loaded f database
2 Customer chooses product from the list of products
3 Customer chooses one function: add produc shopping cart/ add product to wishlist/ checkout
- Add product to shopping cart:
5 Customer chooses “Add to cart”
7 System validates information in database
9 System returns to Product page
10 Customers clicks on the shopping cart icon
11 System displays Cart page with added products
13 Customer chooses “Add to wishlist ”
14 System processes add request 15.System validates data in database
17 System returns to Product page
18 Customers clicks on the wishlist icon
19 System displays Wishlist page with added produc
21 System displays list of added products at cart pag
23 Customer fills in checkout information and confir payment
Alternative flow 7a System displays invalid information because constrain appears in the database Use-case continues at step 4 15a System displays invalid information because constrai appears in the database Use-case continues at step 12 24a System displays invalid information due to wrong form Use-case continues at step 23
4.1.3.10 Search Product (for Signed-up customer)
Description Customer can search product
Trigger Customer clicks to button “Search for” at home page Pre-condition - Customer’s device must connect to Internet
- Customer’s status is signed-in
Post-condition - Order information successful insert to database
- Data at home page filtered and displayed to custois
Basic flow 1 Customers enters keywords on text fie then click “Search” button
3 System queries list of products related keywords
4 System displays filtered data at prod page
Exception flow 3b System displays empty result notification because t is/are no data existed related to the keywords Use-case s
4.1.3.11 Edit Profile (for Signed-up customer)
Description Customer can edit profile
Trigger Customer clicks to button “Profile” at home page
Pre-condition - Customer’s device must connect to Internet
- Customer’s status is signed-in
Post-condition - Profile information successful insert to database
- New data is updated at home page to customer
Basic flow 1 System displays profile page with data loaded from database
2 Customer chooses information to be updated
3 Customer modifies information and clicks submit
4 System validates information in correct format
5 System validates information with existed in databa
6 System stores profile information database to
7 System displays successful notification and reloads profile page
Alternative flow 4a System displays invalid information due to wrong form
5a System displays invalid information because data hadn’t been existed in the database
Use-case continues at step 3
Description Customer can pre-order
Trigger Customer clicks to button “Contact us” at home page Pre-condition - Customer’s device must connect to Internet
- Customer’s status is signed-in
Post-condition - Preorder information successful insert to database
- New data is updated at home page to customer
Basic flow 8 System displays Reservation page
9 Customer modifies information and clicks Reserve “ now ”
10 System validates information in correct format
11 System validates information with existed in databas
12 System stores reservation database to
Alternative flow 10a System displays invalid information due to wrong form
11a System displays invalid information because data hadn’t been existed in the database
Use-case continues at step 9
Sequence Diagram
4.2.5 Update order status (for Administrator)
4.2.7 Sign up (for Unsigned-up customer)
4.2.8 Login (for Unsigned-up customer)
4.2.9 Buy Product (for Signed-up customer)
4.2.10 Search Product (for Signed-up customer)
4.2.11 Edit Profile (for Signed-up customer)
Entity-Relationship Diagram (ERD)
4.3.2 Data Organization user (user_ , name, email, phone, image, verification_code, verify_id status, password, role_as) order (order_ , tracking_no, user_id id, name, email, phone, address, total_price, payment_mode, payment_id, status, comment) order_item (orderitem_ , order_id, product_id id, qty, price) cart (cart_id, user_id, product_id, product_qty) product (product_ , id category_id, name, slug, small_description, description, original_price, selling_price, image, qty, status, trending) category (category_ , name, slug, description, id status, popular, image) wishlist (wishlist_ , user_ , product_id, product_qty) id id reservation (reservation_id, name, phone, adult, data, time, note, status)
IMPLEMENT AND TESTING
Development environment
o Operating system: Window 10 o Database: Oracle database o Text Editor: Visual Studio Code o Web server: Loopback 4 o Web GUI: React
Deployment environment
o Web server: o Operating system: Window 10 or upper o To be installed: Oracle Database
User Interface
CONCLUSION
Achievements
Our team has learned a lot through this project development process, from requirements analysis and problem-solving techniques to planning and designing functionalities for a small piece of software As a result, team members are now acquainted with the fundamental processes used in software development projects, such as:
− Knowing how to gather, survey, and analyze information from customers to determine and design essential functionalities along with features to address existing issues
− Knowing how to model those functionalities through visual diagrams such as Use Case Diagrams, Activity Diagrams,…
− Knowing how to plan for a software development project
− Knowing how to allocate tasks and work effectively as a team
Using this information, our team put it to use on their project and created a website for bookstore management with the bare minimum of features to meet management's needs (storage, calculations, login, authorization, etc.) The two main roles in the system are Administrator and Customer, with the following specific functions:
- Add product to shopping cart/ wishlist