Build an e comerce website for selling mobile phones

4 Edit product Manage Delete product function needs: • Product id advertise Manage advertise Add advertise function needs: Edit advertise function need: • Advertise id Table 1: Admin fun

INTRODUCTION

PROBLEM STATEMENT

Today's society is constantly developing, and the trend toward e-commerce is growing

With internet access on a computer or smartphone, buying, selling, and exchanging goods has never been easier This convenience allows anyone to shop effortlessly with just a few clicks.

E-commerce eliminates geographical and time barriers, allowing products to reach shoppers across Vietnam and globally Sellers are no longer passive; they actively seek out customers, leading to increased sales and revenue, which is the ultimate goal for every business.

E-commerce offers significant business opportunities for individuals with limited capital, as it eliminates the need for expensive rent, employee salaries, and hefty advertising costs By simply investing in a well-designed e-commerce website that provides comprehensive business information and user-friendly features, entrepreneurs can facilitate easier and faster transactions for customers In today's highly competitive market, where monopolizing a product is challenging, the key to attracting customers lies in creating a comfortable and satisfying shopping experience.

E-commerce empowers businesses of all sizes to express their creativity and compete on a level playing field Innovative business concepts, marketing strategies, and promotions can be swiftly implemented and targeted directly at customers, all while minimizing costs, as everything is conveniently consolidated on a single platform.

My graduation project focused on creating an e-commerce website dedicated to selling mobile phones, aimed at addressing the demand for direct product promotion and sales to customers both nationally and internationally.

PROJECT OBJECTIVES

The website features a user-friendly interface designed for both computers and mobile devices, ensuring an engaging experience that caters to customer preferences Additionally, it prioritizes fast processing speed, accuracy, and efficiency, providing convenience for both buyers and sellers.

Following are some main functions of our application:

• Users can register and log in to the system to manage their accounts, shopping carts, orders, and interact with the system such as rating, commenting or sending messages

• E-payment is a fundamental function for e-commerce websites

The administrator has the capability to oversee all website content, including the creation of promotional posters for each product, writing engaging articles to attract customers, managing inventory, and handling orders and sales statistics effectively.

OBJECTS AND SCOPE

We decided to use PHP language with HTML, CSS, JavaScript, Laravel Framework, and MySQL database system to develop the project

PHP is a powerful open-source scripting language that is interpreted and object-oriented, making it ideal for server-side execution Its capabilities make it particularly well-suited for web development, allowing developers to create dynamic web applications that run on the server and generate content on-the-fly.

Laravel is a powerful and user-friendly open-source PHP framework that utilizes the model-view-controller design pattern By reusing components from various frameworks, Laravel facilitates the development of well-structured and practical web applications.

MySQL is a leading technology in the big data ecosystem, widely recognized as the most popular database across various industries Its effective use makes it essential for anyone working with enterprise data or in the IT field to have at least a basic understanding of MySQL.

HTML, or HyperText Markup Language, is the standard markup language used for creating web pages It enables the structuring of content into sections, paragraphs, and links through the use of HTML elements, which include various tags and attributes.

CSS was developed by W3C (World Wide Web Consortium) in 1996 for a rather simple reason HTML element was not designed to have tags that would help format the page

JavaScript is a versatile scripting language that enables developers to create dynamic and interactive web pages It enhances user experience by allowing features such as real-time content updates, interactive maps, and animated graphics As the third layer of the standard web development stack, JavaScript plays a crucial role in transforming static websites into engaging platforms.

9 technologies, two of which (HTML and CSS) developers have covered in much more detail in other parts of the Learning Area

The e-commerce platform for mobile phone sales offers a reliable system with an attractive and user-friendly interface Users can easily search for products, add items to their cart, and make modifications as needed before finalizing their purchases Additionally, administrators have the capability to manage product listings and oversee the website's revenue.

THEORY FUNDAMENTAL

PHP

PHP, which stands for "PHP: Hypertext Preprocessor," is a recursive acronym and a popular scripting language utilized by web developers to build dynamic websites Typically, it is pre-installed on Apache web servers along with MySQL, forming a standard "LAMP" configuration.

When a visitor accesses a PHP page, the web server parses the PHP code to generate HTML for the webpage For instance, a PHP function can retrieve the server's local time and date and embed it into the HTML output.

PHP scripts vary in complexity, from simple commands to intricate functions, with many PHP-based websites dynamically generating most of their content through these scripts Although early PHP versions lacked object-oriented features, PHP3 introduced support for classes, enabling the use of object attributes and methods This allows developers to create custom object libraries that can be imported into different PHP pages, akin to the functionality found in compiled languages.

PHP shares a syntax resemblance with languages like C++, Java, and Perl, but it also features unique functions, particularly MySQL-specific methods for database access Its seamless integration with MySQL, along with consistent updates and user-friendly nature, makes PHP a favored option for developing dynamic websites.

A PHP framework serves as a foundational platform for developing PHP web applications, offering libraries filled with pre-packaged functions and classes It typically includes components that facilitate the implementation of software design patterns, providing a ready-made structure for projects Developers can build upon this skeleton by integrating their own code or utilizing inherited classes from the library.

PHP frameworks have become essential in web development as they handle repetitive tasks efficiently They provide well-tested library functions and classes that adhere to standard practices, allowing developers to avoid reinventing the wheel This not only streamlines the development process but also minimizes the risk of errors that could lead to significant issues.

One significant benefit of using these frameworks is that they enhance the readability and clarity of your code, making it easier for other developers to collaborate on the same project.

LARAVEL

Laravel provides a comprehensive array of features that enhance web development speed, integrating essential functionalities from PHP frameworks such as CodeIgniter and Yii, as well as from programming languages like Ruby on Rails.

Familiarity with Core PHP and Advanced PHP can significantly ease your development process with Laravel, allowing you to save time when creating a website from scratch Additionally, websites built using Laravel offer enhanced security, effectively protecting against various web attacks.

MYSQL

MySQL is a relational database management system (RDBMS) developed by Oracle that is based on structured query language (SQL)

A database is a structured collection of data It may be anything from a simple shopping list to a picture gallery or a place to hold the vast amounts of information in a corporate network

A relational database is a digital storage system that organizes data according to the relational model, utilizing tables made up of rows and columns This model enforces a strict logical structure for the relationships between data elements An RDBMS (Relational Database Management System) comprises the software tools necessary for implementing, managing, and querying these databases.

MySQL is essential for numerous popular software stacks used in developing and maintaining a wide range of applications, from customer-facing web platforms to robust B2B services Its open-source nature, stability, and extensive features, along with continuous support from Oracle, have led major internet organizations like Facebook, Flickr, Twitter, Wikipedia, and YouTube to utilize MySQL as their backend solution.

HTML, CSS, JAVASCRIPT

HTML, or HyperText Markup Language, is the standard markup language used for creating web pages It enables the structuring of content into sections, paragraphs, and links through the use of HTML elements, which include various tags and attributes.

HTML has a lot of use cases, namely:

• Web development Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files

• Internet navigation Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks

• Web documentation HTML makes it possible to organize and format documents, similarly to Microsoft Word

HTML is not classified as a programming language because it lacks the ability to create dynamic functionality It is recognized as an official web standard, with the World Wide Web Consortium (W3C) responsible for maintaining and updating its specifications regularly.

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable

CSS is essential for defining the visual presentation of a web page, allowing you to manage text color, font styles, paragraph spacing, column sizing and layout, background images or colors, and overall design It also enables responsive variations for different devices and screen sizes, along with a range of additional effects.

CSS is simple to learn and offers significant control over the presentation of HTML documents, often being used in conjunction with HTML or XHTML.

JavaScript is a versatile programming language essential for web development, enabling the creation of dynamic features in web applications and games that go beyond the capabilities of HTML and CSS alone.

JavaScript is widely utilized by browsers as a scripting language to create dynamic web features Whenever you encounter interactive elements like click-to-show dropdown menus, additional content being loaded onto a page, or colors of elements changing dynamically, you are witnessing the impact of JavaScript in action.

Relation between HTML, CSS, and JavaScript:

HTML serves as the foundation for adding text elements and structuring content, but it alone is insufficient for developing a professional and fully responsive website To create the majority of website content, HTML requires the integration of Cascading Style Sheets (CSS) and JavaScript.

CSS handles the visual aspects of web design, including backgrounds, colors, layouts, spacing, and animations, while JavaScript introduces dynamic features like sliders, pop-ups, and photo galleries Together with HTML, these three languages form the foundation of front-end development.

RELATED WORKS AND SYSTEM REQUIREMENTS

RELATED WORKS

Nowadays, there are applications with similar functions such as:

• Hoàng Hà mobile o Advantages: variety of products o Disadvantages: the interface is a bit complicated

• Clickbuy o Advantages: variety of products o Disadvantages: the interface is a bit complicated

Realizing that, the project team decided to develop applications with improvements of old applications such as: simple and clear interface that helps users easy use.

SYSTEM REQUIREMENTS

● Storage: All information about the

− User: id, name, email, phone, address, avatar_image, provider, provider_id, admin, active, password, active_token, remember_token, create_at, update_at

− Product: id, producer_id, name, image, sku_code, monitor, front_camera, rear_camera, CPU, GPU, RAM, ROM, OS, PIN, information_details.

− Producers: id, name, information, create_at, update_at

− Producer_detail: id, product_id, color, import_quantity, quantity, import_price, sale_price, promotion_price, promotion_start_date, promotion_end_date, create_at, update_at.

− Product_images: id, product_detail_id, image_name, image_path, create_at, update_at.

− Product_votes:id, user_id, product_id, rate, content, create_at, update_at.

− Comments: id, comment_id, user_id, product_id, content, create_at, update_at.

− Notices: id, user_id, content, status, create_at, update_at.

− Orders: id, user_id, payment_method_id, order_code, name, email, phone, address, status, create_at, update_at.

− Order_details: id, order_id, product_detail_id, quantity, price, create_at, update_at.

− Payment_methods: id, name, describe, create_at, update_at.

− Post: id, title, image, content, create_at, update_at.

− Advertise: id, product_id, title, image, at_home_page, start_date, end_date, create_at, update_at.

Division (user): Admin ID: admin

ID Function Type Constraint/Formula code Form code

1 Sign in Sign in Login function needs:

Search product function is based on information, namely:

• Advertise id Table 1: Admin functional requirement

Division (user): User ID: user

ID Function Type Constraint/Formula code Form code

1 Sign in Sign in Login function needs:

2 Sign up Sign up Register function needs:

● Register by filling the form

Search product function is based on information, namely:

User can write feedback and rating product of our store which needs:

Users can see all their own bill history and information

7 Log out Log out Log out function help user can exist user’s account Table 2: User functional requirement

● Environment: The system operates on a Website, users and admins can access through provided accounts:

1 Role management - Administrator: allow all roles

- Inventory employees are allowed to add products, edit products and delete the product

- Sales admin: allowed search well, edit a product (price), make statistics

- Supermarket director: allowed to read statistics, manage revenue

User: As an application user, who can use all the functions the app has, such as adding an item to cart, register, login

ID Contents Criteria Description Note

1 Website can be updated and modified to adapt the trend of customers as well as the requirements of managing of the owners

- Feature buttons are laid out simple, convenient and visible

- Functional windows can interact with each other, provide users with efficiency

3 - Database is kept secure and easy to be accessed

- The system operates stable, reliable and instant response

1 • The module, source code and other proportion of the system can be reused for latter projects

• The source code can be recycled and applied for other programs without changing the cores

1 The search products function is convenient, natural, and visible

Convenience Support the keyword-like searching

2 UI Design easy to see, user-friendly, simple operation

Effectiveness It doesn't take much of the time to complete any action on the application

SYSTEM DESIGN

USECASE & SEQUENCE DIAGRAM

4.1.1.1 Define use case actor and function

• Login Table 6: Usecase Modeling 4.1.2 Actor and function description

• Payment Table 7: Actor Description 4.1.2.2 Function description

Allow user to search product by keyword

Allows users filter out Product by

Allows users to view information on how to do exercises

Allows user to add product to their cart

5 Register Allows guest to register new account

6 Login Allows user or administrator log into website

Allows the user to remove product, increase or decrease product quantity in their cart

Allows user to view their own profile and edit it

Product Allow user to review and rating product

10 Payment Allow user to purchase and pay for products in cart

Password Allow user to reset their password

Allow administrator to view, add, modify or delete product from website

Account Allow administrator to view all accounts in website

Bill Allow administrator to manage all bills in website

Post Allow administrator to manage posts in website

Allow administrator to manage advertisement in website

17 Statistic Allow administrator to review revenue of website and export report Table 8: Function Description 4.1.3 Usecase Diagram

Figure 1: Usecase Diagram 4.1.4 Usecase Specification

Brief Description The way user search product by keyword

This usecase starts when the actor chooses the function to Search Product

1 Choose “Search” on the Navigation bar

3 Actor press button “Enter” on keyboard to search product

4 Display list of products follow by keyword

Cancel Search Product 1 Actor cancels search product by deleting keyword

2 Actor stay on the same screen

The user already run the application

Success Search product successfully, display list of products Failure Search failed, search product failure and stay on the same screen

Table 9: Search Product 4.1.4.2 Filter Product

Brief Description The way user or guest filters list of Products

This use case starts when the user chooses the function to Filter Product

1 User chooses “Filter” icon on the website

2 User selects type of Filter which user wants to see

Success Display list of products

Table 10: Filter Product 4.1.4.3 View Product

Brief Description The way user or guest views the information of the Product

This use case starts when the user chooses the function to View product

1 User chooses “Product” icon on the screen

2 User selects click Product which user wants to see the information

Success Display the information of Product

Table 11: View Product 4.1.4.4 Add Product to Cart

Name Add Product to Cart

Brief Description The way the user or guest add product to cart

This usecase starts when the user chooses the function to Add Product

1 Choose “Product” icon on website

2 Choose icon “+” or button add, then click to add product to cart

Success Add Product successful, user add Product to cart successfully

Failure Add failed, user add Product to cart failure

Table 12: Add Product to Cart 4.1.4.5 Register

Brief Description The way guest registers new account

This usecase starts when the user chooses the function to register

2 Enter email and related information

4 Display success message and navigate to home page

Register failed 1 Email already existed or “Phone number already existed” or “Password not matched”

The guest already in website

Success Create account successfully, guest can log into website with registered account Failure Register failed, check email and password again

Brief Description The way the user log into website

This usecase starts when the user chooses the function to login

2 Enter user email and password

3 Login successfully, navigate to home page

Login failure 1 Display “Invalid email or password is not correct”

The user already register account in website

Success Login successfully, display success message

Failure Login failure, user login failure

Brief Description The way the user or guest edit cart

This usecase starts when the user chooses the function to Edit Cart

1 Choose “Cart” icon on the Navigation bar

2 Select the “Product” on Cart

3 Choose the product which user wants to, then click “+” button to increase the quantity of product or click “-” to decrease product quantity and product will be remove from cart if its quantity less than 0 User can also remove product from cart by click on button “X”

The user or guest already run the application

Success Edit Cart successful, user increase or decrease quantity of product or remove product from cart Failure Edit failed, user edit Cart failure

Table 15: Manage Cart 4.1.4.8 Manage User Profile

Brief Description The way the user views personal information and edit it

This usecase starts when the user chooses the function to Manage User Profile

3 User can click “Change information” button to change user profile

4 Navigate to change profile page

5 Modify information or keep it the same and click button “Save Changes”

6 Navigate user to “Manage Account” page and display successful notification

Cancel Review Product 1 User cancels Change User Information

2 The system cancels Change User Information function and back to previous page

Success Change successfully, update and display new user profile Failure Change failed, profile is not updated

Table 16: Manage User Profile 4.1.4.9 Review Product

Brief Description The way the user review product

This usecase starts when the user chooses the function to Review Product

1 Choose “Product” user want to review

2 User enters comment and select rating on that product

3 User press “Enter” on keyboard or click “Add review” to review product

4 Reload page and display user comment

Cancel Review Product 1.User cancels Review Product

2.The system cancel Review Product function and stay on the same screen

Success Review product successfully, display new review and rating

Failure Review failed; no new review added

Brief Description The way that users pay for ordering products in their cart

This use case starts when user choose payment function:

2 User fill information into form

5 Website navigate user to “Home Page”

User cancels payment 1 User cancels while paying

2 No new order bill added

The user already logged into website

Brief Description The way users reset their password in case of forgetting their account password

This usecase starts when the administrator chooses forgot password function

3 Enter email to reset password

5 Check email and click “Reset Password” in personal email

6 Enter new password and click “Confirm” button

Invalid 1 User enters invalid email

Email must have been registered in website

Failure Invalid email, user reset password failed

Table 19: Forgot Password 4.1.9.12 Manage Product

Brief Description The way administrator manages product in system

This usecase starts when the administrator chooses manage product function

3 Click a specific product to view its details

4 Click “Modify” button, website open modify form Administrator can change data and click “Save”

5 Click “New Product” button, websites open add product form Administrator fill data into form and choose image → Click “Save” → New product added and navigate to Manage product page

1 Administrator cancels Add New Product

2 The system no new product is added to website and back to Manage product page

The administrator already logged into website

Delete product success Delete product successful, administrator delete product Add new product success

Add new product successful, administrator add new product successfully

Table 20: Manage account 4.1.9.13 Manage Account

Brief Description The way administrator views all account and related data

This usecase starts when the user chooses the function to manage account

1 Choose “Account Management” icon on the Navigation bar

2 List of account is display

3 Click to view account detail

4 Click “New account” → Administrator enters new email → Confirm email → Navigate to “Home Page” and display success message

Cancel add new 1 Administrator click button “X” to cancel create new

2 No account is added and close add new account form

Success Manage account success, administrator can add new account Failure Add new account failed, email already existed in system

Table 21: Manage account 4.1.9.14 Manage Bill

Brief Description The way administrator manage bill in system

This usecase starts when the user chooses the function to manage bill:

3 Click a specific bill to view its details → Click “Export bill” to print bill

Success View bill success, display bill details

Failure View bill failed; administrator view bill failure

Table 22: Manage Bill 4.1.9.15 Manage Post

Brief Description The way administrator manage post in system

This usecase starts when the administrator chooses manage post function

3 Click a specific post to view its details

5 Click “New Post” button, websites open add product form Administrator fills data into form and choose image → Click “Save” → New post added and navigate to Manage post page

Cancel Add New Post 1 Administrator cancels Add New Product

2 The system no new product is added to website and back to Manage product page

Delete post success Delete post successful, administrator delete post successfully

Add new post success Add new post successful, administrator add new post successfully

Table 23: Manage Post 4.1.9.16 Manage Advertisement

Brief Description The way administrator manage advertisement in system

This usecase starts when the administrator chooses manage advertisement function

5 Click “New Advertisement” button, websites open add advertisement form

Administrator fills data into form and choose image → Click “Save” → New advertisement added and navigate to Manage advertisement page

1 Administrator cancels Add New Advertisement

2 The system no new advertisement is added to website and back to Manage advertisement page

Delete advertisement successful, administrator delete advertisement successfully

Add new advertisement successful, administrator advertisement new post successfully

Brief Description The way admin review bill and income

This usecase starts when the admin chooses statistics function

1 Choose “Statistics” on side bar

2 Display list of revenue by month or by year

3 Click “Export report” to get revenue report

Success Statistics successfully, display list of sold product and

Figure 2: Sequence of Search Products 4.1.5.2 Filter Product

Figure 3: Sequence of Filter Product 4.1.5.3 View Product Details

Figure 4: Sequence of View Product Details 4.1.5.4 Add Product to Cart

Figure 5: Sequence of Add Product to Cart 4.1.5.5 Register

Figure 6: Sequence of Register 4.1.5.6 Login

42 Figure 7: Sequence of Login 4.1.5.7 Manage Cart

43 Figure 8: Sequence of Manage Cart 4.1.5.8 Manage User Profile

Figure 9: Sequence of Manage User Profile 4.1.5.9 Review Product

Figure 10: Sequence of Review Product 4.1.5.10 Payment

45 Figure 11: Sequence of Payment 4.1.5.11 Forgot Password

46 Figure 12: Sequence of Forgot Password 4.1.5.12 Manage Product

Figure 13: Sequence of Manage Product 4.1.5.13 Manage Account

Figure 14: Sequence of Manage Account 4.1.5.14 Manage Bill

Figure 15: Sequence of Manage Bill 4.1.5.15 Manage Post

Figure 16: Sequence of Manage Post 4.1.5.16 Manage Advertisement

Figure 17: Sequence of Manage Advertisement 4.1.5.17 Statistics

DATABASE DESIGN

Figure 19: Database logical diagram 4.2.2 Database Diagram

Figure 20: Database diagram 4.2.3 ER Diagram

ID Attribute Type Range Meaning Notes

4 phone varchar User phone number

6 avatar_image varchar User avatar

Social network used for registration

Social network account ID registered on the system

Check account is admin or not

Check account is activated or not

Active code sent to email

Login code for users who choose to remember account

Time users update account Table 26: user table database

Foreign key associated with the table producers

Metabolic Equivalent of Task value

1 is warm- up, 2 is main exercise, 3 is stretch

10 GPU varchar Rest time of exercise

16 product_introduction longtext Introduction of product

18 create_at timestamp Create time

Update time 1 is calculated in

0 is calculated in duration Table 27: product table database

5 update_at timestamp Update time

6 import_price int Product price

7 sale_price int Sold price of product

Day starts promotion of product

Day ends promotion of product

Update time Table 29: product_details table database

Link to product detail ID

3 image_name varchar Image name

4 Image_path varchar Image link

Table 30: product_images table database

Table 31: product_votes table database

2 comment_id bigint Foreign key

3 user_id bigint Foreign key

6 create_at timestamp Create tome

2 user_id bigint Foreign key

6 update_at timestamp Last updated time Table 33: notices table database

Link to payment method ID

4 order_code varchar Order code

Phone number on order bill

8 address varchar Address on order bill

Last updated time Table 34: orders table database

2 order_id bigint Link to order table

Link to product detail ID

7 update_at timestamp Foreign key

Table 35: order_details table database

5 update_at timestamp Last updated time Table 36: payment_method table database

3 image varchar Image in title

2 product_id bigint Link to product ID

8 create_at timestamp Create day

USER INTERFACE

4.3.1 List of Screen and conversion diagrams

Figure 22: List of Screen 4.3.2 Detailed descriptions of the screen

Meaning: The page which display most title, products, and feature when user visit

1 Logo Website logo, can click to navigate to home screen

2 SearchInput Enter keyword to search for product

3 Button Can click to navigate to home page

4 Button Can click to navigate to “About Page”

Hover to display featured brand in website and click to navigate to screen which contains those specific products

6 Button Click to navigate to “Post Page”

7 Button Click to navigate to “Contact Page”

8 Button Click to navigate to “Login Page”

9 Button Click to navigate to “Register Page”

11 Grid Display list of news

12 Slide Display list of best sellers

13 Grid Display list of products

14 GridItem Hover to display product technical specifications

15 Footer Display information about website and contact method Table 39: Detailed descriptions of Home page 4.3.4 About Page

Meaning: Contains information about website

9 Button Click to navigate to “Home Page”

12 Text Introduction about website and contact number

Display information about website and contact method

Table 40: Detailed descriptions of about page

Meaning: Display list of products and allow user to search, filter by operating system, price, and type of products

Enter keyword and choose filter type for searching product

12 Grid Display list of products

Display information about website and contact method

Table 41: Detailed descriptions of Products page 4.3.6 Post Page

Meaning: Display news in website

11 Grid Display latest news and products

12 Footer Display information about website and contact method Table 42: Detailed descriptions of Post page

14 Footer Display information about website and contact method Table 43: Detailed descriptions of contact page

Meaning: Allow user to input their account and password to log in to website

1 Logo Website logo, can click to navigate to home page

12 EmailInput Input email to login

13 PasswordInput Input password to login

Click to remember email and password for the next login session

15 Button Click to set new password incase user forgot password

18 Footer Display information about website and contact method Table 44: Detailed descriptions of Login page

Meaning: The screen allows users to register

12 Input User input username to register

13 Input User enters email to register

14 Input User enters phone number to register

15 Input User enters password to register

16 Input User enters password again to confirm

17 Button Click to confirm register

19 Footer Display information about website and contact method Table 45: Detailed descriptions of Register page

Meaning: Allows user to reset their password in case of forgetting account password

12 Input User input email to reset password

13 Button Click to confirm reset password

14 Button Click to register for new account

15 Footer Display information about website and contact method Table 46: Detailed descriptions of Forgot Password page 4.3.11 Detail Post Page

Meaning: The page contains detailed information about posts

12 Box Contains post details and related images

15 Footer Display information about website and contact method Table 47: Detailed descriptions of Detail post page 4.3.12 Detail Product Page

Meaning: Contains details of product

10 Button Click to navigate to “Product Page”

12 Box Contains information about product

16 Button Choose 2 if product has 2 or more colors

18 Box Product description and images

19 Button Click to view full description

20 Box Product review and rating

22 Button Click to view full specifications of product

24 Footer Display information about website and contact method Table 48: Detailed descriptions of Detail Product page 4.3.13 Cart Page

Meaning: Cart when has no product

11 Box No product in cart

12 Button Back to “Home Page”

13 Footer Display information about website and contact method

Table 49: Detailed descriptions of Cart Empty page 4.3.13.2 Cart Product Page

Meaning: Cart when has product

11 List List of products in cart

12 Box Product title and price

13 Button Click to remove product from cart

14 Button Click to decrease product quantity in cart

15 Button Click to increase product quantity in cart

16 Text Total product price in cart

18 Button Click to navigate to “Product Page”

19 Footer Display information about website and contact method Table 50: Detailed descriptions of Cart Product page 4.3.14 User Profile Page

8 Logo Can click to extend

9 Button Click to navigate to “Manage Order Page”

10 Button Click to navigate to “User Profile Page”

11 Button Click to “Log out”

12 Box Display user personal information a Button Click to edit personal information

14 Footer Display information about website and contact method Table 51: Detailed descriptions of User Profile page 4.3.15 Change Personal Information Page

Meaning: Allows user to change own information

Image 14: Change Personal Information page

14 Box Display user personal information

15 Button Click to choose avatar image

16 Input Enter to change account name

18 Input Enter to change number

19 Input Enter to change address

20 Button Click to save change

Footer Display information about website and contact method Table 52: Detailed descriptions of Change Personal Information page

Meaning: Display all user order bill

12 Table Display all user orders

14 Button Click to navigate to “Detail Order Page”

Footer Display information about website and contact method Table 53: Detailed descriptions of Manage Order page 4.3.17 Detail Order Page

Meaning: Contains details of user order bill

12 Box Display all detailed order

16 Table List of purchased product

17 TableColumn A single product detail in short

18 Button Click to navigate to “Detail Product Page”

Footer Display information about website and contact method Table 54: Detailed descriptions of Detail Order page 4.3.18 Admin Dashboard Page

3 SearchInput Enter keyword to search for section

4 Button Click to navigate to “Admin Dashboard Page”

Button Click to navigate to “Advertising Management

6 Button Click to navigate to “Account Management Page”

7 Button Click to navigate to “Post Management Page”

8 Button Click to navigate to “Product Management Page”

9 Button Click to navigate to “Bill Management Page”

10 Button Click to navigate to “Revenue Management Page”

11 Box Click to navigate to “Account Management Page”

12 Box Click to navigate to “Post Management Page”

13 Box Click to navigate to “Product Management Page”

14 Box Click to navigate to “Bill Management Page”

Table 55: Detailed descriptions of Admin Dashboard page 4.3.19 Admin Advertising Management Page

Meaning: Contains details of advertise

Image 18: Admin Advertising Management Page

5 Button Click to navigate to “Advertising Management

11 SearchInput Enter keyword to search for ID or product name

12 Button Click to refresh page

13 Button Click to add new advertise

15 Button Click to edit advertise

16 Button Click to delete advertise

Table 56: Detailed descriptions of Detail Product Page 4.3.20 Admin Account Management Page

Meaning: Contains details of account

Image 19: Admin Account Management Page

SearchInput Enter keyword to search for detail included in user account

13 Button Click to add new account

15 Button Click to view history

Table 57: Detailed descriptions of Detail Product Screen 4.3.21 Admin Post Management Page

Meaning: Contains details of post

Image 20: Admin Post Management Page

11 SearchInput Enter keyword to search for ID or post name

13 Button Click to add new post

15 Button Click to edit post

16 Button Click to delete post

Table 58: Detailed descriptions of Detail Product Page 4.3.22 Admin Product Management Page

Image 21: Admin Product Management Page

11 SearchInput Enter keyword to search for ID or product name

13 Button Click to add new product

15 Button Click to edit product

16 Button Click to delete product

Table 59: Detailed descriptions of Detail Product Screen 4.3.23 Admin Bill Management Page

Image 22: Admin Bill Management Page

11 SearchInput Enter keyword to search for ID or bill name

14 Button Click to view bill detail

Table 60: Detailed descriptions of Detail Product Page 4.3.24 Admin Revenue Management Page

Image 23: Admin Revenue Management Page

11 SelectedBox Extend to choose month

12 SelectedBox Extend to choose year

15 Button Click to export revenue report

Table 61: Detailed descriptions of Detail Product Page

IMPLEMENTATION

APACHE WEBSERVER

Apache is one of the go-to web servers for website owners, developers, and even hosting providers, dominating the market share by 33% across all websites

File servers, database servers, mail servers, and web servers utilize distinct types of server software, enabling them to access and manage files stored on a physical server for various functions.

A web server functions as a crucial intermediary that delivers websites over the internet It retrieves content from the server in response to user requests and efficiently serves it to clients, ensuring seamless access to web resources.

Apache is a software that operates on an HTTP server, rather than being a physical server itself Its primary function is to connect servers with web browsers, such as Firefox, Google Chrome, and Safari, facilitating the exchange of files in a client-server structure.

When a visitor accesses a page on your website, such as the homepage or the "About Us" section, their browser sends a request to your server, and Apache responds by delivering all the necessary files, including text and images.

The server and the client communicate through the HTTP protocol, and the Apache web server is responsible for the smooth and secure communication between the two machines

Apache's open-source infrastructure offers extensive customization options, allowing web developers and users to modify its source code to suit their specific website needs.

Apache offers a variety of modules that enable server administrators to easily activate or deactivate additional functionalities These modules enhance the Apache web server with features such as security, caching, URL rewriting, and password authentication, among others.

XAMPP

XAMPP, which stands for Cross-Platform, Apache, MySQL, PHP, and Perl, is an open-source web solution package It includes an Apache distribution for various servers and command-line executables, along with essential modules like Apache server, MariaDB, PHP, and Perl.

XAMPP is a powerful tool that enables local hosting and server testing for websites on computers and laptops before deployment to the main server It provides an ideal environment for testing and verifying projects that utilize Apache, Perl, MySQL, and PHP Perl serves as a programming language for web development, while PHP functions as a backend scripting language, and MariaDB, developed by MySQL, is the most widely used database in this ecosystem.

MYSQL

MySQL is a relational database management system (RDBMS) developed by Oracle that is based on structured query language (SQL)

A database is a structured collection of data that can range from a simple shopping list to a comprehensive corporate information system Specifically, a relational database organizes data according to the relational model, utilizing tables made up of rows and columns, where relationships between data elements adhere to a strict logical structure.

An RDBMS is simply the set of software tools used to implement, manage, and query such a database

My group gains knowledge about how to write and use the API, MySQL

The project team develops an e-commerce website’s API, which allows users to manage their carts, and administrators can manage all of the websites

TESTING

TEST STRATEGY

The objective of the test is to ensure that MyStore, designed for creating e-commerce websites for mobile phone sales, aligns with the specified requirements The testing process will involve validating test scripts, addressing and rectifying all high- and medium-severity issues according to the established entrance criteria, followed by retesting Lower-severity defects will be prioritized for resolution in future updates.

The corporate objectives, cost effectiveness, and quality will be the main priorities throughout testing

All teams assisting with testing will follow consistent, common processes Testing procedures will be well specified yet adaptable, allowing for changes as necessary

The testing environment and data will closely match a production scenario Testing will be a measured, repeatable, and quantitative process

The testing process will be divided into different phases, each with distinct aims and purposes

There will be entrance and exit criteria

6.1.3 Scope and Levels of Testing

PURPOSE: The functions of the program will be examined through functional testing By providing input to the program and confirming the result, functional testing is carried out

SCOPE: The functional test's scope is described in the Excel file sheet below TESTERS: All group members

METHOD: The test cases will be recorded in an Excel file manually

• Use-case documents and a functional specification document that has been approved must be provided before the test design process begins

• Test cases must be reviewed and signed off before execution

• Completed development, tested unit with a pass status and results must be shared to testing team to find and prevent repeated defects

• There is an application that is installed, configured, and ready to use in a test environment

No Deliverable Name Author Reviewer

1 Test Plan All team members Supervisor

2 Functional Test Cases All team members Supervisor

3 Test Cases All team members Supervisor

4 Daily/weekly status report All team members Supervisor

5 Test Closure report All team members Supervisor

EXECUTION STRATEGY

Entry criteria define the necessary conditions for initiating test execution, ensuring that only the migration of code and fixes are assessed at the end of each cycle.

The desired circumstances that must be met in order to move forward with implementation are known as the exit criteria

Entry and exit criteria are negotiable standards The test team will evaluate the risk, suggest potential mitigation measures, and make a recommendation if they are not met

The actions indicated in the schedule's Test Planning section must be fully completed in order to begin the test's execution phase

To meet the entry criteria, all actions outlined in the Test Execution section of the schedule must be fully completed at the start of each cycle.

Functional testing will be conducted twice All of the scripts will be run once every cycle

The first cycle's goal is to find any blockage, critical flaws, and the majority of high flaws To access all of the scripts, a workaround is anticipated

The second cycle's goals are to find any lingering high and medium flaws, get rid of the first cycle's workaround, fix scripting errors, and get performance results

Test metrics will be created and shared with the project manager for approval in order to track the test's development and level of success The stats are listed below

To report on percentage of completion, percentage of WIP, percentage of Pass, percentage of Fail

Defects severity wise Status – Open, closed, any other Status

To report on Pass, Fail, Total defects, highlight Showstopper/ Critical defects

Project Project driven reporting Weekly – If the project

Status update apart from report daily and there is template available

106 with the project team to use

TEST MANAGEMENT PROCESS

To ensure all criteria are satisfied, testers will thoroughly understand each criterion and develop corresponding test cases Each test case will be linked to specific use cases and requirements within a traceability matrix During the planning phase, testers will create detailed step-by-step test cases based on the prototype, use case, and functional specifications They will maintain a tracker sheet for any necessary changes and regularly communicate with the requirements team for clarifications These clarifications may lead to Change Requests, fall outside the project scope, or highlight implicit needs.

The tester initiates an exploratory test of the application to ensure its stability for testing, following the authorization of all test cases and the readiness of the test environment.

In the testing process, test cases are provided to each tester via Excel, requiring them to have access to the testing environment to report bugs and update test statuses Any issues encountered are escalated to the Test Lead, who communicates with the Project Manager Testers execute the tests step-by-step, recording a Pass or Fail status for each step directly in Excel Additionally, testers generate a Run chart that tracks execution progress on a daily basis.

Defects identified during testing will be documented in an Excel tool, detailing replication methods and including screenshots if necessary All stakeholders will receive daily updates on test execution status and defect reports To ensure comprehensive coverage, the testing team will participate in defect triage sessions, recording any issues outside the test steps in Excel, mapped to the relevant test case or specific step This process will be repeated until all test cases are thoroughly evaluated with a Pass/Fail status.

Defects that have been resolved will undergo testing in the upcoming cycle, with results documented in Excel The project completion process will adhere to the established procedures for final sign-off.

6.3.3 Test Risks and Mitigation Factors

Table 64: Test risks and mitigation factors

Risk Prob Impact Mitigation Plan

The testing timetable is constrained The test cannot be prolonged past the UAT scheduled start date if the start of the testing is delayed because of design work

High High • The testing team has control over the preparation duties (ahead of time) and the early contact with parties involved

• Some buffers, although not as many as recommended by best practices, have been

108 included to the timetable for contingencies

Lack of resources and late resource onboarding

Holidays and vacations have been anticipated and included in the schedule; variations from the forecast may result from testing delays

Late-stage defects often arise from unclear requirements and can be time-consuming to resolve Detecting these defects later in the cycle can significantly impact project timelines and overall quality.

The defect management plan is set up to guarantee fast communication and problem-solving

Although the feature modifications are still being made or are not finalized, the scope is well specified

Teams and tasks are allocated across two distinct geographical zones to ensure continuity in testing activities In the event of a catastrophic incident in one area, the necessary resources will be available in the other zone to maintain operations.

The timetable is affected and the start of the test

109 environment and accessibility execution is delayed as a result of the environment's unavailability

Delayed Testing Due To new issues

There is a good likelihood that some "new" problems will be found during testing and that they'll develop into a problem that will take some time to fix

Testing can uncover issues stemming from vague document specifications, leading to problems that may take considerable time to resolve If these issues escalate, they can significantly disrupt the overall project timeline To mitigate this, defect and problem management processes are established to promptly address any newly identified flaws.

6.3.4 Communications Plan and Team Roster

Role expectations: The following list defines in general terms the expectations related to the roles directly involved in the management, planning, or execution of the test for the project

Effective test planning is crucial before execution, ensuring that admission criteria are utilized as inputs Develop comprehensive test plans and guidelines to create test conditions, test cases, and expected results, while also outlining how to address any identified flaws Actively participate in status meetings, whether in person or via phone, to communicate any necessary modifications to the test application or deliverables, along with a timeline for their completion Additionally, offer support for both remote and on-site team members, providing access to functional (Business Analysts) and technical teams as needed.

The test team is responsible for developing test conditions, scenarios, and expected outcomes, as well as executing and validating test scripts They must identify, document, and prioritize issues based on the test lead's guidance After software modifications, retesting should be conducted as per the established plan Additionally, the team should create test metrics and consistently update the testing status.

Test lead: congratulate yourself on finishing a cycle's portion Give the approval to begin the subsequent testing phase Help the testing team and the technical / development team communicate about defects

Development team: Review testing deliverables, such as test plans, cases, scripts, and expected outcomes, and promptly offer feedback assistance with the results'

To ensure effective project support, validate components as requested and adhere to the testing schedule by verifying the correct components in the test environment Keep the leadership and project team informed of any potential software delivery delays Develop procedures or tools to facilitate the initial and ongoing relocation of components Conduct a preliminary analysis of execution inconsistencies and assist test executors in identifying precise faults, while promptly addressing any issues that arise.

TEST ENVIRONMENT

MyStore is a cross-platform web application, it can be run in Android devices or iOS devices for the testing purposes.

TESTING METHOD AND TECHNIQUES

Unit testing is a software testing method that focuses on evaluating specific software modules or elements to ensure each piece of code operates correctly Typically conducted by developers during the coding phase of application development, unit testing involves isolating a portion of code and verifying its accuracy through targeted tests In this context, a unit can refer to a single function, method, process, module, or object.

Inadequate unit testing can lead to expensive defect repairs during system, integration, and beta testing phases after the software is built, making thorough unit testing essential Developers may attempt to expedite the process by conducting minimal unit testing, but this approach can result in significant long-term costs.

Unit tests reduce expenses by assisting in the early discovery and correction of faults

It enables the developers to swiftly make changes and comprehend the testing code base

Effective unit tests act as the project's documentation

Unit tests improve the reuse of code Transfer your tests and code to your new project Change the code until the tests pass once more

Classification Unit Testing Unit Testing is of two types:

Unit testing is a software testing method that focuses on evaluating individual components or units of a program This approach can vary significantly in complexity, influenced by the specific application under test, as well as the methodologies, tools, and philosophies used in the testing process.

On some level, unit testing is always important That is a given

Integration testing is a crucial phase in software development where multiple modules, developed by different programmers, are conceptually combined and tested together The primary aim of this testing level is to identify issues related to the interaction between these modules when integrated By focusing on how well the modules communicate data, integration testing ensures the overall functionality of the software This process is also referred to as "integration and testing" (I&T), "string testing," or "thread testing."

Defects can still occur even after unit testing individual software modules due to various factors Each module is typically developed by a single programmer, whose understanding and coding style may differ from others To ensure that these modules work together as intended, integration testing is essential Additionally, client requirements may change during development, and some of these new requirements may not be covered by unit tests, necessitating system integration testing Furthermore, inaccuracies in the software modules' interfaces with the database and external hardware can lead to issues, while inadequate exception handling may also contribute to problems.

Types of system testing strategies:

Big Bang Testing is an integration testing approach where all modules or components are combined and tested simultaneously as a single entity This method requires that all unit components be completed before the integration process can commence One of the key advantages of Big Bang Testing is its convenience for small systems.

Integration testing presents several disadvantages, including the difficulty in identifying faults due to the vast number of interfaces that need to be checked, which can lead to some being overlooked Additionally, the testing team faces time constraints since integration testing can only commence once all modules are designed This simultaneous examination of all modules means that high-risk and critical modules are not prioritized for testing, and peripheral modules related to the user interface also do not receive focused attention.

Bottom-up integration testing focuses on evaluating lower-level modules first, facilitating the testing of higher-level modules later This process continues until all top-level modules are tested Once the lower-level modules are integrated and verified, the next level of modules is developed The advantages of this approach include easier fault localization and reduced waiting time compared to the Big-bang method However, a significant drawback is that critical top-level modules, which manage program flow, are tested last and may be more susceptible to errors, and early prototypes cannot be created.

Top-down integration testing is a method where testing follows the software system's control flow from top to bottom, starting with higher-level modules before integrating and testing lower-level ones This approach allows for early prototyping and prioritizes the testing of critical modules, which can help identify and rectify significant design flaws early in the development process However, it requires a substantial number of stubs for incomplete modules, and lower-level modules may not receive adequate testing.

• Sandwich Method: Combining Top-Down and Bottom-Up Thinking Sandwich testing is a technique where top-level modules are tested alongside

Hybrid integration testing combines both top-down and bottom-up methodologies, allowing for the integration of 114 lower-level modules with higher-level modules while testing the entire system This approach employs drivers and stubs to facilitate the testing process effectively.

System testing is a crucial phase that follows unit and integration testing, ensuring that a comprehensive software product functions effectively across various environments and integrates seamlessly with different systems Often, software is tested in a single demo environment, which can limit its exposure Black-box testing, a key component of system testing, focuses on evaluating the software's external functionality from the user's perspective.

Why is system testing necessary?

The system test will do the following jobs:

• Following integration testing, we must further examine the application's compatibility and interaction with external peripherals to evaluate its usability

• System testing involves carefully examining and verifying each input into the application to check for the anticipated outcomes

• Test the user's experience with the application

Types of system testing strategies: System testing has more than 50 types, we will introduce some typical system test types below:

• Usability Testing – Testing the usability of the application, mainly focusing on testing the ease of use, flexibility, friendliness of the product

Load testing is essential for evaluating a product's performance, ensuring it operates at high speeds while effectively handling significant user loads A quality product must demonstrate its ability to maintain efficiency and stability under heavy usage conditions.

Regression testing is essential for identifying bugs that arise after significant code changes, specifically targeting software regressions or recurring issues These regressions happen when previously functional software features become non-operational due to unintended consequences of new code developments that conflict with existing code The standard approach to regression testing involves re-running previous tests to determine the cause of previously resolved errors.

The depth of testing is determined by the associated risks and the stages of releasing additional features Testing can be refined as changes are implemented during the release process, whether at the beginning or the end Additionally, aggressive testing on each feature can be conducted with low risk.

Recovery testing is conducted following system failures that result in faulty or inoperable programs This type of testing aims to verify that the program functions correctly after addressing the identified errors, ensuring that similar issues do not recur.

BLACK BOX TESTING AND BUG REPORT

The link for access purposes:

When product quantity in cart is 1 and click “-“, product should be remove from cart Reporter Vu

Product is not remove from cart after clicking “-” when its quantity is 1

When product quantity is 1 and user click button “-”, it should be remove from cart

> Click button “-” when product quantity is 1

>Product is removed from cart

Click button “-” when product quantity is 1, it is removed from cart

Click button “-” when product quantity is 1, it is still in cart

Name Click “Ưu đãi thanh toán” should open that page

When user click “Ưu đãi thanh toán” button, the website does not navigate to that page

When click “Ưu đãi thanh toán” button, the website navigate user to “Ưu đãi thanh toán page”

> Click “Ưu đãi thanh toán” button

> Open that page and display page details

Navigate user to that page and display details

Website does not open that page

Name Click “Quy chế hoạt động” should open that page

When user click “Quy chế hoạt động” button, the website does not navigate to that page

When click “Quy chế hoạt động” button, the website navigate user to “Ưu đãi thanh toán page”

> Click “Quy chế hoạt động” button

Name Click “Chính sách bảo hành” should open that page

When user click “Chính sách bảo hành” button, the website does not navigate to that page

When click “Chính sách bảo hành” button, the website navigate user to “Ưu đãi thanh toán page”

> Click “Chính sách bảo hành” button

Name Click “Tuyển dụng” should open that page

When user click “Tuyển dụng” button, the website does not navigate to that page

When click “Tuyển dụng” button, the website navigate user to “Ưu đãi thanh toán page”

CONCLUSION

Tiêu đề	Build an E-Commerce Website for Selling Mobile Phones
Tác giả	Nguyen Trong Nghia, Nguyen Anh Vu
Người hướng dẫn	Dr. Nguyen Thien Bao
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Capstone project
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	136
Dung lượng	7,15 MB