BTEC FPT INTERNATIONAL COLLEGE

INFORMATION TECHNOLOGY
ASSIGNMENT 1
UNIT: SEMI-PROJECT

STUDENT : PHAN LAM QUOC VIET

CLASS : IT16101
STUDENT ID : BDAF200035
SUPERVISOR : NGUYEN HOANG ANH VU

Da Nang, June 2022

 ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 4 HND Diploma in Computing

Unit number and title Unit: Semi-Project

Date received (1st

Submission date 21/06/2022 21/06/2022
submission)

Date received (2nd

Re-submission date
submission)

Student name Phan Lam Quoc Viet Student ID BDAF200035

Class IT16101 Assessor name Nguyen Hoang Anh Vu

Student declaration:

I certify that the assignment submission is entirely my own work and I fully understand the
consequences of plagiarism. I understand that making a false declaration is a form of malpractice.

Student’s signature:

Quoc Viet

Grading grid:

P M D
 ❒Summative Feedbacks: ❒Resubmission Feedbacks:

Grade: Assessor Signature: Date:

Internal Verifier’s Comments:

Signature & Date:

Performed Student: Phan Lam Quoc Viet

 TABLE OF CONTENT

INSTRUCTOR/ SUPERVISOR/ ASSESSOR………………………………………………………………………………………….i

REVIEWERS……………………………………………………………………………………………………………………….…………..iv
TABLE OF CONTENT ………………………………………………………………………………………………………………………ix
LIST OF TABLES AND FIGURES ……………………………………………………………………………………………………….xi
LIST OF ACRONYM………………………………………………………………………………………………………………………..xii
INTRODUCTION ……………………………………………………………………………………………………………………………..1
1.Users’ requirements..................................................................................................................2
1.1 Functional Requirements ...........................................................................................2
1.2 Non-Functional Requirements....................................................................................4
1.3 Use Case Diagram.......................................................................................................4
2. System Design..........................................................................................................................9
2.1 Site map.....................................................................................................................9
2.2 Entity Relationship Diagram......................................................................................10
2.3. Wireframe ...............................................................................................................13

CRITICAL EVALUATION…………………………………………………………………………………………………………………39
CONCLUSION ………………………………………………………………………………………………………………………………40
REFERENCES ……………………………………………………………………………………………………………………………….41

Performed Student: Phan Lam Quoc Viet

 LIST OF TABLES AND FIGURES
Table 1: Test Cases………………………………………………………………………………………………………………………….7
Table 2: Test logs……………………………………………………………………………………………………………….……………8
Table: Critical Evaluation………………………………………………………………………………………………………………39

Figure 1-1: Use case diagram…………………………………………………………………………………….……………………5

Figure 2-1: Site map diagram……………………………………………………………………………………………………….…9
Figure 2-2: Entity Relationship Diagram………………………………………………………………………………………..10
Figure 2-3: Database…………………………………………………………………………………………………………………….11
Figure 2-4: User table……………………………………………………………………………………………………………………11
Figure 2-5: Admin table…………………………………………………………………………………………………………………11
Figure 2-6: Category table………………………………………………….…………………………………………………………12
Figure 2-7: Customer table……………………………………………………………………………………………………………12
Figure 2-8: Items table………………………………………………………………………………………………….………………13
Figure 2-9: Wireframe Login – Register – ForgotPassword Form…………………………………………..………13
Figure 2-10: Wireframe Home Page………………………………………………………………………………………………14
Figure 2-11: Wirefame Home Page………………………………………………………………………….……………………15
Figure 2- 12: Wireframe Shop Page…………………………………………………………………………….…………………16
Figure 2-13: Wireframe Product Page………………………………………………………………………..…………………17
Figure 2-14: Wireframe Product Added Page……………………………………………………………..…………………18
Figure 2-15: Wireframe Cart Page…………………………………………………………………………………………………19
Figure 2.16: Wireframe Checkout Page…………………………………………………………………………………………20

Performed Student: Phan Lam Quoc Viet

 LIST OF THE ACRONYM

HTML Hyper Text Markup Language

CSS Cascading Style Sheet

JS JavaScript
QA Quality Assurance

Performed Student: Phan Lam Quoc Viet

 INTRODUCTION
First of all, I would like to thank my mentor Nguyen Hoang Anh Vu for his constant support
in my studies and research, for his patience, motivation, enthusiasm and rich knowledge. Without
your wonderful help, I would not have been able to achieve this.

In addition to my mentor, I would like to thank my friends who have helped me improve my
knowledge of my subject. And besides, I would like to thank the school for creating all conditions
for me to have adequate facilities to help me complete my work.

Last but not least, I would like to thank my family: my parents Phan Dinh Quy and Lam Thi
Tam. They are always be-hind to care and help me have more motivation to complete the work well!

Here, we have built a semi-project website to apply the knowledge we have learned in
previous subjects of computing, from which we will test the results that we have done. Finally, we
will operate the system and maintain it. It is also a process to build a complete Project. Let's find out
in this assignment!

1. Users’ requirements

2. System Design

3. Implementation

1
Performed Student: Phan Lam Quoc Viet
 SEMI-PROJECT

Project: Clothes Shop Website

Developer: Phan Lam Quoc Viet

Mentor: Nguyen Hoang Anh Vu

Front-end: HTML, CSS, JS, Bootstrap 4 Libraries, Google Font API,

Back-end: NodeJS -Express, PHP, phpMyAdmin

Table 1: Semi - project introduction

1. Users’ requirements
The requirement of the project:
- Stakeholders:
+ They have a big impact on the development of a firm; this document will look at
the most prevalent kinds of stakeholders and the specific requirements that each of them
has. Relevant stakeholders will have a variety of criteria, which are typically divided into
three categories:
▪ Internal or external Primary
▪ Secondary Direct
▪ Indirect internal or external
+ Each has its own meaning to refer to objects that are uniquely essential in any organization,
and a vast range of approaches, categories, channels, and strategies would be required to
successfully meet their communication demands.
- Governments:
+ Governments are interested in how the project is handled since they get corporate
income taxes, payroll taxes from employees, and sales taxes from other expenses from the
corporation.
+ Government laws and regulations will apply to any firm, and governments will
benefit from the overall Gross Domestic Product (GDP) generated by enterprises. Auditors,
inspectors, and health and safety executives might work for national, federal, state, or even
municipal government entities.
- Communities:

2
Performed Student: Phan Lam Quoc Viet
 + The amount of large enterprises that have their headquarters in a community is
noteworthy. They are affected by issues such as job creation, economic development, health, and
safety. When a large corporation relocates to or from a small town, it has an immediate and
significant impact on employment and consumption.
+ In addition to meeting the requirements of other sorts of stakeholders, these
organizations contribute to various social services. Finally, it is regarded as a secondary indirect
external stakeholder.
+ Furthermore, members of a community frequently feel obligated to contribute to
the community in some form, such as social benefits, philanthropic efforts, or marketing initiatives
to reclaim their community's dominance and reputation.
- Vendors and Suppliers:
+ Suppliers and vendors supply products and/or services to an organization and rely
on it for sales generation and ongoing profits. They are frequently concerned about safety in a
variety of industries, as their products may have a substantial impact on and influence the
company's operations.
+ This community can also include business partners, temporary contractors,
caterers, and anybody else that offers resources to the software.
- Employees:
+ Employees have a direct stake in the company since they interact with clients, earn
a living, and maintain corporate operations, among other things.
+ Employees can be of any rank and work in management, supervision, or other
capacities. They are paid for their contributions to the company's or business's operations, and they
typically demand fair pay in the form of bonuses, advancement in their careers, and job satisfaction.
- Customers:
+ A client is a person or organization that is responsible for paying for the goods and
services provided by the project. They had an impact on the service or product quality and value
since they expect to buy dependable and high-quality items and services from that company at a
fair price.
+ Customers' top priority when using their system is to have the finest user
experience possible, which includes a smooth, stable system with several features and a large
number of songs to meet their needs for finding and listening to music. They a

3
Performed Student: Phan Lam Quoc Viet
 1.1 Functional Requirements

This is a list of characteristics that the end user considers to be necessary for the gadget to
have. All of these features must be implemented into the scheme as part of the agreement. These
are represented or specified as input to the machine, operations to be performed, and expected
results. In contrast to non-functional requirements, they are essentially the user's specifications that
may be employed explicitly in the finished product.
- Contains functions for users' basic needs, such as registering, logging in, searching, listening
to music, adding to cart, downloading, and paying.
- To make searching easier, songs can be linked to singers, albums, and singers can also be
linked to their own songs.
- The system will save the user's current state for the next time he uses the software.
- To protect user information, log out automatically after each login session.
Include a variety of icons and links to other social media sites.

1.2 Non-Functional Requirements

Non-functional criteria are characteristics that address organizational and technology needs
but are not functional. They can describe elements such as encryption, authentication, hosting,
climate, disaster recovery, and business continuity. Gathering the appropriate way and utilizing the
right technique will assist you avoid having bad requirements. Storage, security, configuration, cost,
logging, interoperability, flexibility, and accessibility are just a few examples.
- The software provides rapid compatibility across numerous platforms, accessible via
phones, tablets, and more. It has a consistent and professional interface to give users a sense of
pleasure with the information. Information may be translated into another language.
- It must work smoothly and reliably, have a rapid loading time, and be able to bear demand
from many access sources while maintaining security and usability.
- Ensure that access is encrypted and password-protected. There are some pages that can
only be read by administrators.
- Important transaction data must be transmitted in encrypted form. This program can be
executed and utilized in response to a large number of Windows users, and it can be extended to
other operating systems.

1.3 Use Case Diagram

4
Performed Student: Phan Lam Quoc Viet
 - In the Unified Model Language, a use case diagram is a dynamic or behaviour diagram.
Actors and use cases are used to model the functioning of a system in use case diagrams. A set of
tasks, services, and operations that the system must do are referred to as use cases.
- Use case diagrams are commonly created during the early stages of development, and they
are frequently used for the following purposes:
• Provide information about a system's context.
• Capture a system's needs.
• Validate the architecture of a system.
• Initiate the implementation process and develop test cases.
• Analysts collaborated with domain specialists to create this report.

Figure 1-1: Use case diagram

❖ User Interface and User Experience (UI & UX):

5
Performed Student: Phan Lam Quoc Viet
 No. Test case Input data Expected output Actual output Evaluation

1 On the site, Product and Products, values, Products, values, None

you can see all category data from photos, and other photos, and other
of the items the database may search results. search results.
and categories. be searched and
added.

2 Examine the Check the picture Images, fonts, and Images, fonts, None
typefaces and resolution, display animations are all and animations
graphics. fonts, animation, in good working are all in good
and other aspects order. working order.
of the web page by
opening it.

3 Image of Check product All goods, product All goods, their None
product pricing, names, and information, and information, and
inspection, content to make product pricing their pricing are
pricing, and sure they match are identical to identical to those
comprehensive what's in the those in the in the database.
product database. database.
content.

4 Check out the Check out the After pressing the After pressing the None
navigation product listings on button, the items button, the items
bar's list. the internet, such appear. appear.
as (mobile phone,
laptop, etc.) and
click on them.

5 Check out the To get started, go Customers can Customers can None
signup and to the registration utilize a login and utilize a login and
login pages. and login page. registration form registration form
that appears. that appears.

6 Check out the To add something The user's The user's None
"add to cart" to your cart, click product is saved product is saved
feature. the "add to cart" in the shopping in the shopping
button. cart, along with cart, along with
the price of the the price of the
product that was product that was
added by the added by the
user. user.

7 Check out the To make a The system will The system will None
payment payment, click direct the direct the
feature. here. consumer to the consumer to the
6
Performed Student: Phan Lam Quoc Viet
 payment page of payment page of
the website. the website.
Customers will Customers will
select the best select the best
payment method payment method
for them. for them.

8 Run a load test F5 to reload the The site loads in The website may None
on the website. website. less than a load in as low as
millisecond. 0.75 millisecond.
9 Check out the To do so, go to the The site will direct The site will direct None
link in the bottom and click you to contact you to contact
footer. the button. pages pages
automatically. automatically.
10 On the main Search and add Look for and add Look for and add None
page, you can goods from the to data from the to data from the
see all of the database, as well database on items database on
items and as category data. and categories items and
categories. categories
Table 2: Test Cases

❖ Back-end User Interface and User Experiences (UI & UX):

No. Test case Input data Expected output Actual output Evaluation

1 Make sure the Check the picture Images, fonts, and Images, fonts, None
fonts and resolution, display animations are all and animations
pictures are fonts, animation, in good working are all in good
correct. and other aspects order. working order.
of the web page by
opening it.
2 Image of Check product All goods, product All goods, product None
product pricing, names, and information, and information, and
inspection, content to make product pricing product pricing
pricing, and sure they match are identical to are identical to
comprehensive what's in the those in the those in the
product database. database. database.
content
3 Check out the Check out the After pressing the After pressing the None
navigation product listings on button, the items button, the items
bar's list. the internet, such appear. appear.
as (mobile phone,
laptop, etc.) and
click on them.

7
Performed Student: Phan Lam Quoc Viet
 4 Check out the To create a new The website takes The website takes None
"add category" category, click the you to a screen you to a screen
feature. "add category" where you may where you may
button. modify your modify your
database. database.
5 Look into the Select "edit" from The site will take The site will take None
"edit category" the drop-down you to a form you to a form
option. menu. where you can fill where you can fill
out information out information
and edit the and edit the
category. category.
6 Image of Check product All goods, product All goods, product None
product pricing, names, and information, and information, and
inspection, content to make product pricing product pricing
pricing, and sure they match are identical to are identical to
comprehensive what's in the those in the those in the
product database. database. database.
content.
7 Check out the Check out the After pressing the After pressing the None
navigation product listings on button, the items button, the items
bar's list. the internet, such appear. appear.
as (mobile phone,
laptop, etc.) and
click on them.
8 Check out the To create a new The website takes The website takes None
"add category" category, click the you to a screen you to a screen
feature. "add category" where you may where you may
button. modify your modify your
database. database.
9 Check out the To create a The website takes The website takes None
"add sub- subsection, click you to a screen you to a screen
category" the "add where you may where you may
feature. subcategory" modify your modify your
option. database. database.
10 Check out the To add a product, The web page will The web page will None
"add product" click the "add display a form display a form
feature. product" button. where you can where you can
enter the enter the
product's product's
information and information and
push insert. push insert.
Table 3: Test logs

8
Performed Student: Phan Lam Quoc Viet
2. System Design

2.1 Site map

- A sitemap is a blueprint for your website that assists search engines in finding, crawling,
and indexing all of your material. Sitemaps also inform search engines about the most essential
pages on your website.
- Sitemaps are divided into some categories:
+ The most frequent form of sitemap is the normal XML sitemap. It generally takes
the form of an XML Sitemap, which contains connections to various pages on your website.
+ Video Sitemap: Used to assist Google in understanding the video content on your
page.
+ Sitemap for Google News: Assists Google in finding material on sites that have been
authorized for Google News.
+ Image Sitemap: Assists Google in locating all of the photos on your site.

Figure 2-1: Site map diagram

9
Performed Student: Phan Lam Quoc Viet
 2.2 Entity Relationship Diagram

Within the store's database table. I created tables made up of main and junction tables,
which I then sorted and assigned relationships to.
I've constructed a many to one link between the components table group and the Products
table. The related tables will be "one," but the Products table will be "many."
The reason I didn't leave the Size table in the Product table is that when I enter data into
Products, I will only be allowed to enter 1 single size and not linked into a relationship. In the Details
table, I have connected to the Product and Dimensions tables. Consequently, I developed the Details
table, a many-to-one connection table.
I create similar connections between the Users table and the Products database as I did with
the components table. Many-to-one is the connection I employ.

Figure 2-2: Entity Relationship Diagram

❖ Database:
- Database diagrams depict the database's structure and relationships between database
items graphically. A diagram can be created for a data source, a schema, or a table. Consider utilizing
primary and foreign keys to construct relationships between database items.
- We have created 5 main tables of the system including: users, admin, category, customer,
order items.

10
Performed Student: Phan Lam Quoc Viet
 Figure 2-3: Database
- And the following is the input data value of each table:
+ User table:

Figure 2-4: User table

+ Admin table:

Figure 2-5: Admin table

11
Performed Student: Phan Lam Quoc Viet
 + Category table:

Figure 2-6: Category table

+ Customer table:

Figure 2-7: Customer table

+ Items table:

12
Performed Student: Phan Lam Quoc Viet
 Figure 2-8: Items table
2.3. Wireframe:
- Our website is carefully wireframed with a clear and detailed plan that includes the
following pages:

Figure 2-9: Wireframe Login – Register – ForgotPassword Form

13
Performed Student: Phan Lam Quoc Viet
 Figure 2-10: Wireframe Home Page 14
Performed Student: Phan Lam Quoc Viet
 Figure 2-11: Wireframe Home Page

15
Performed Student: Phan Lam Quoc Viet
 Figure 2- 12: Wireframe Shop Page
16
Performed Student: Phan Lam Quoc Viet
 Figure 2-13: Wireframe Product Page

17
Performed Student: Phan Lam Quoc Viet
 Figure 2-14: Wireframe Product Added Page

18
Performed Student: Phan Lam Quoc Viet
 Figure 2-15: Wireframe Cart Page

19
Performed Student: Phan Lam Quoc Viet
 Figure 2.16: Wireframe Checkout Page

20
Performed Student: Phan Lam Quoc Viet
 CRITICAL EVALUATION

After completing this assignment with your own efforts and with the help of your instructor.
During the study, the teacher was very dedicated to teaching and always answered my questions.
With the knowledge I have learned, I have presented very fully the questions that Assignment raised
in a brief, clear and specific image. Moreover, I am confident that I can self-study and make a semi-
project process.

During the development, I did my best to develop the project successfully. Here is my
personal review:

No. Aspects Contents

- Ability, background knowledge, programming languages to

1 Strengths
2 Weaknesses
3 Core values
4 Accomplishments
5 Goals
develop projects.
- Have a strong sense of responsibility.
- Encourage participants to finish allocated job on time on a
regular basis.
- Afraid to seek assistance from others.
- Frequently becoming enraged due to bugs.
- Work alone and fully commit to the task at hand.
- Respecting customer's point of view as well as giving opinions
to help customers be satisfied with the product.
- To assist, share all of your thoughts and express everything you
know.
- Always complete tasks on time and in accordance with the
guidelines.
- Products made well, are satisfied and workers of the company
and customers.
- Create cooperative relationships to develop later and have
better website transactions and products.
- Never stop learning while you're at work.
- Always looking forward to being able to collaborate on new
projects with good teams to develop great products together.

Table: Critical Evaluation

Also, I have mastered the basics of semi-project, so I can definitely create a project to help
more people connect with each other and make life better!
21
Performed Student: Phan Lam Quoc Viet
 CONCLUSION
After completing this report, I understood and grasped that the knowledge I had learned
was really important, it was the foundation for developing actual tools and frameworks that I was
using. This semi-project also helped me to apply and understand practically in what direction I will
take this project and how to do it,

Semi-project really great! Thanks to it, I understood how the basic project process works.
This is very interesting and wonderful. Thank you my mentor!

22
Performed Student: Phan Lam Quoc Viet
 REFERENCES
1. hnglobal.highernationals.com (2022). Cloud Computing, Computing & Digital Technologies
Resource Library [online]. Available:
https://hnglobal.highernationals.com/subjects/computing/resource-library. [Accessed 16 June
2022].

2. www.monocubed.com (2022). A Complete Guide To The 7 Phases of Web Development Life Cycle
[Online]. Available: https://www.monocubed.com/blog/web-development-life-cycle/. [Accessed
18 June 2022].

23
Performed Student: Phan Lam Quoc Viet