ASM Project Web WEBG301 FPT Greenwich (Merit Super Sale)

GROUP PROJECT FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

WEBG301 - Project Web

Submission date

Date Received 1st submission

Re-submission Date

Date Received 2nd submission

Student Name

Nguyen Huy Hoang

Student ID

Class

GCH0908

Assessor name

GCH200739
Nguyen Dinh Tran Long

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

Grade

Hoang`


❒ Summative Feedback:

Grade:
Signature & Date:

❒ Resubmission Feedback:

Assessor Signature:

Date:


Table of Contents
CHAPTER 1 – USERS’ REQUIREMENTS .......................................................................................................................................... 6
I.

User Stories Template .................................................................................................................................................................. 6

II.

Use case diagram ...................................................................................................................................................................... 7
1.

Customer use-case diagram ...................................................................................................................................................... 7

2.

Admin Use-case diagram: ......................................................................................................................................................... 8

CHAPTER 2 – SYSTEM DESIGN ........................................................................................................................................................ 9
I.

Site Map: ...................................................................................................................................................................................... 9

II.

Entity Relational Diagram ...................................................................................................................................................... 10

III.

Wireframes.............................................................................................................................................................................. 11

1.

Homepage wireframe:............................................................................................................................................................. 11

2.

Product detail wireframe ......................................................................................................................................................... 12

3.

Product List wireframe ........................................................................................................................................................... 13

4.

Shopping cart wireframe ......................................................................................................................................................... 14

5.

Profile wireframe: Customer can view their profile, full name, email, contact link and other information .......................... 14

6.

Login Wireframe..................................................................................................................................................................... 15

7.

Register Wireframe ................................................................................................................................................................. 16

8.

Admin view............................................................................................................................................................................. 17

9.

OrderSite Wireframe............................................................................................................................................................... 18

CHAPTER 3 – SYSTEM IMPLEMENTATION ................................................................................................................................. 19

I.

Source Code................................................................................................................................................................................ 19
Introduce about MVC design pattern in Symfony .................................................................................................................. 19
MVC pattern overview in Symfony(my project) .................................................................................................................... 19

II.

Web Screenshots ..................................................................................................................................................................... 32

CHAPTER 4 - CONCLUSION (INDIVIDUAL) ................................................................................................................................. 46
I.

Advantages of website ................................................................................................................................................................ 46

II.

Disadvantages of Website ....................................................................................................................................................... 46

III.

Lesson Learnt .......................................................................................................................................................................... 46

IV.

Future Improvement ............................................................................................................................................................... 47


APPENDIX: .......................................................................................................................................................................................... 47
References ............................................................................................................................................................................................. 47

TABLE OF FIGURES
Figure 1: Usecase diagram Customer ...................................................................................................................................................... 7
Figure 2: Admin Use-case diagram ......................................................................................................................................................... 8
Figure 3: Site map image ......................................................................................................................................................................... 9
Figure 4: Adminsite sitemap ................................................................................................................................................................... 9
Figure 5: ERD image ............................................................................................................................................................................. 10
Figure 6: Homepage wireframe ............................................................................................................................................................. 11
Figure 7: Product Detail wireframe ....................................................................................................................................................... 12
Figure 8: Product list wireframe ............................................................................................................................................................ 13
Figure 9: Shopping cart Wireframe ....................................................................................................................................................... 14
Figure 10: Profile wireframe ................................................................................................................................................................. 14
Figure 11: Login Wireframe .................................................................................................................................................................. 15
Figure 12: Register Wireframe .............................................................................................................................................................. 16
Figure 13: Admin view .......................................................................................................................................................................... 17
Figure 14: OrderSite Wireframe ............................................................................................................................................................ 18
Figure 15: Project Structure................................................................................................................................................................... 19
Figure 16: Entity folder ......................................................................................................................................................................... 20
Figure 17: env file source code ............................................................................................................................................................. 20
Figure 18: doctrine.yaml source code ................................................................................................................................................... 21
Figure 19: Order Entity source code ..................................................................................................................................................... 22
Figure 20: Detail Entity source code ..................................................................................................................................................... 22
Figure 21: Migrations folder and migration file .................................................................................................................................... 23
Figure 22:Example of Repository Source code .................................................................................................................................... 23
Figure 23: Controller folder................................................................................................................................................................... 24
Figure 24: Example of controller class in my project ........................................................................................................................... 24
Figure 25: annotation.yaml .................................................................................................................................................................... 25
Figure 26: Cart Controller source code ................................................................................................................................................. 25
Figure 27: Order Controller ................................................................................................................................................................... 28
Figure 28: base.html.twig file ................................................................................................................................................................ 30

Figure 29: cart template source code ..................................................................................................................................................... 30
Figure 30: Select Delivery function ...................................................................................................................................................... 31
Figure 31: Products page ....................................................................................................................................................................... 35
Figure 32: Product details page ............................................................................................................................................................. 36
Figure 33: Category page ...................................................................................................................................................................... 37


Figure 34: brand page ............................................................................................................................................................................ 38
Figure 35: Delivery Page ....................................................................................................................................................................... 39
Figure 36: Supplier Page ....................................................................................................................................................................... 40
Figure 37: User page ............................................................................................................................................................................. 41
Figure 38: Cart Page .............................................................................................................................................................................. 42
Figure 39: Add product page ................................................................................................................................................................. 43
Figure 40: Order Page ........................................................................................................................................................................... 44
Figure 41: Order Detail page ................................................................................................................................................................. 45


CHAPTER 1 – USERS’ REQUIREMENTS
I.

User Stories Template

User story
No.
1
2
3
4

As a/an

Customer
Customer
Customer
Customer

5

Customer

6

Customer

7
8
9
10
11
12

Customer
Customer
Customer
Customer
Customer
Customer

13
14
15

16
17
18
19
20
21

Customer
Customer
Admin
Admin
Admin
Admin
Manager
Admin
Customer

I want to
View all products in the store
Search product in the store
View product image
Click on the product image to show
all of its information
View all categories in the store
View all products have the same
category in the store
View all brands in the store
View a brand’s product in the store
View brand’s supplier
Add products to the cart

Manage products in the cart
Preview my order
Review all my orders
Have an account online
Manage all product
Manage all category
Manage all brand
Manage all supplier
View and take order
Manage delivery
Choose which delivery will ship my
order

so that I can
Find the product I want
Find the product I want
Find product more convenient
Know all the information about the product I
care about
Know what types of products they have in the
store
Compare products
Buy from the one I trust
Buy from their product
Know where it came from
Manage products that I need or want to buy
Confirm what I am going to buy
Confirm my order and know the information
about the order
View what I have purchased in the past

Save my orders and my information
Add new products or modify an old one
Add a new category or modify the old one
Add new or modify an old one
Add new or modify an old one
Decide to take order or refuse
Add new or modify an old one
Get my order as soon as possible


II.

Use case diagram
1. Customer use-case diagram

Figure 1: Usecase diagram Customer

Explanation:
 Customers before login into the web can only view products, categories, and brands in the store. They can search a product,
sort product by category, brand and view the product detail. Customers can register for a new account. Customers can
know more about the store or get help by clicking links at the end of the website.
 After login, the customer now can add products to the cart, they can manage their shopping cart, choose delivery and place
or cancel the order. Customers can log out or view their profiles.


2. Admin Use-case diagram:

Figure 2: Admin Use-case diagram

Explanation:

 Admin can log in by admin account to the admin site. After login, Admin can manage all products, categories,
brands, suppliers, delivery. Admin can delete, add new, modify all information. Admin can receive orders from
the customer. Admin can log out or view their profile.


CHAPTER 2 – SYSTEM DESIGN
I.

Site Map:

Figure 3: Site map image

Explanation:
 On the home page, the user can go to the login page to login into the website
 If users don’t have an account, they can go to the register page and register a new account
 On the home page, the user can see all products or sort products by category or brand. Users can also view product
detail by clicking on the product.
 Users can add a product to their shopping cart. They can preview their order and choose a delivery to ship their
orders.
 At the end of the website, users can find support links or links to our bog and information.

Figure 4: Adminsite sitemap

Explanation:
 After login to the admin site, the user can choose to modify product, category, brand, delivery, and supplier. User
can view their profile by clicking the link in the navigation bar.


II.

Entity Relational Diagram

Figure 5: ERD image

Description: This ERD includes 6 primary entities:









Product Entity and its fields: ID, Name, Image, Description, Price, Date, Quantity, Category, Brand.
Category Entity and its fields: ID, Name, Description, Products.
Brand Entity and its fields: ID, Name, Image, Description, Products, Suppliers.
Supplier Entity and its fields: ID, Name, Image, Description, Brands.
Delivery Entity and its fields: ID, Name, Image, Description, Order.
User Entity and its fields: ID, User name, Password, Roles.
Order Entity and its fields: ID, Date, Delivery, Detail, User name.
Detail(Order detail) Entity and its fields: ID, Product ID, Product Name, Price, Quantity, Order ID.

Explanation:









A supplier can have none or more than one brand in the store
Brand must have one or many suppliers.
One brand can have many products but one product can only have one brand
One product can only have one category but one category can contain many products
A product can appear in many orders detail but one order detail can only contain one product
Order can have many orders detail but order detail can only have one order
A delivery can deliver many orders but one order can only deliver by one delivery


III.
Wireframes
1. Homepage wireframe:

Figure 6: Homepage wireframe

Explanation:
 Home page: Head of the website will have a logo of the store, a navigation bar, a searching bar At the start of the body
can be a picture of a new release product.


 Under the picture can be a list of popular products.
 User can view product detail by clicking the picture of the product or adding the product to the cart by clicking the cart
icon on the product picture.
 A large picture of the advertisement can be placed at the end of the list.
 Footer of the website can have a logo, navigation bar, and contact links.
2. Product detail wireframe

Figure 7: Product Detail wireframe

Explanation:
 In product detail, customers can view product image, name, price, brand, category, quantity, when the product is made,
and some information about the product.
 Customer can click on the button next to the price tag to add the product to the cart.


3. Product List wireframe

Figure 8: Product list wireframe

Explanation:
 Customer can view all products in the store. Customers can sort products by name or search for a product.
 If the system cannot find any results, a message will appear with a list of all product


4. Shopping cart wireframe

Figure 9: Shopping cart Wireframe

Explanation:
 In the shopping cart, customer can preview their order, manage their order by increasing or decreasing the quantity of
a product or removing that product.
 Customer can view a summary of the order, see the total price, choose a delivery
 Customer can place an order or continue shopping by clicking on the buttons.
5. Profile wireframe: Customer can view their profile, full name, email, contact link and other information

Figure 10: Profile wireframe

6. Login Wireframe

Figure 11: Login Wireframe

Explanation
 This is the login form for my website. Users need to input the right username and password to login into their account.
They can remember their account on the login page by clicking on the remember me check box. If the users do not have an
account yet, they can sign up by click to the signup button.


7. Register Wireframe

Figure 12: Register Wireframe

Explanation:
In the signup form, users need to fill in all information such as username, gender, email, phone number and password. After
filling in all information, they can signup and the website will automatically log in and redirect users to the home page.


8. Admin view

Figure 13: Admin view

Explanation
 This is a managing shop’s page for the admin where they can manage product, category, brand, delivery, supplier and cart.
There are many functions such as searching, adding new ones, editing and deleting. Additionally, they can log out of the
page by clicking on the logout button on the top right of the page.


9. OrderSite Wireframe

Figure 14: OrderSite Wireframe

Explanation:
This is managing all Orders of shop’s page for the admin or manager where they can examine Order requests sent from the
customer. Information of an Order will be displayed in form of a table in Order Site including Customer who orders, Order
Date and Delivery team. There is a function that is deleted. Additionally, they can log out of the page by clicking on the logout
button on the top right of the page.


CHAPTER 3 – SYSTEM IMPLEMENTATION
I.

Source Code
 Introduce about MVC design pattern in Symfony
 Definition: MVC design pattern is standing for Model-View-Controller design pattern - a well-known architectural
design pattern commonly utilised to develop as well as design interfaces and the format of a website(additionally
desktop app, mobile app and other applications).
 In Symfony, this pattern separates the web structure into three primary components(model, controller and view)
dependent and interconnected to each other. They are usually used to determine the presence of data from how the data
is transmitted from the user to the data shown. These components are also viewed as layers like a data layer, presentation
layer, and business logic layer (programmingdive, 2020 ).

Hình 1: MVC pattern Image

 MVC pattern overview in Symfony(my project)
 Project Structure:

Figure 15: Project Structure

 The model
 Model defines the business logic of the website is stored. It is anything from storing a website’s data to accessing
third-party services to meet its business requirements. Mainly all the heavy operations are performed within the
model regarding database operation (programmingdive, 2020 ).
 Model/data layer acts as a memory for the requested service. Request from a user who needs data manipulation must
be sent to the model via the controller to perform DB operations like storing data, accessing data, update/deleting
data.
 Folder which is a primary component of the model in Symfony is called Entity.

Figure 16: Entity folder

 Doctrine Entity – Basic Mapping with Annotation tells Doctrine the class represents the database table. In Symfony
(particularly in my project), before my project can apply this entity folder to perform object-relational mapping(ORM
Doctrine), it is essential to specify commonly used connection parameters DATABASE_URL:

Figure 17: env file source code


 In the .env file the most important thing that needs to get attention is DATABASE_URL. In my project, we used
MySQL to store and manipulate the database and the URL Structure was in the format: MySQL://username(string):
password(string)@Localhost: Port(integer)/Database name(string) (Docs, n.d.).

 To complete the connecting configuration process, each connection will be accessible through doctrine.YAML file:

Figure 18: doctrine.yaml source code

 In DBAL, there is a URL where DATABASE_URL will be resolved to determine and ensure the driver connection.
 Below the DBAL is the Orm where Doctrine ORM be configured. Additionally, there are lots of other configuration
options that can be utilised to overwrite certain classes, but those are for very advanced use-cases only. However,

several configuration options can be self-configured (Docs, n.d.). The following configuration options exist for
mapping:
 is_bundle: By default, this option is set to false and it's considered a legacy option (Jobeet, n.d.).
 Dir: It points to the absolute path to the mapping or entity files.
 Prefix: A general namespace prefix that almost of entities of this mapping share.
 Alias: Doctrine offers how to alias entity namespaces to simpler, shorter names that should be utilized in DQL
queries or for Repository access.
 After configuring these files (commonly these files are always self-configured by Symfony framework), my
project now could generate Doctrine Entities and configure them as manipulating directly to the database.
 For instance, below are some classes in the entity folder which represent for database table:


Figure 19: Order Entity source code

Figure 20: Detail Entity source code

 Each property of the Order class is mapped to each field in the Order table in the database via Doctrine ORM.
Commonly, the ID property automatically is set as the Primary key of this entity. Symfony also provides
datatypes(PHP primitive datatypes) which are corresponding to datatypes in MySQL.
 Additionally, these classes also have their getter and setter methods which help manipulate with data and ensure
encapsulation of these data.
 Doctrine Associations / Relations:
 Two Doctrine Entity classes above actually have a relationship between them. Specifically, property ID in Order
class is referenced by Orders property in Detail class; In other words, ID property is the field that has been set
as primary key in Order Table and Orders_id field from Detail Table is Foreign key of it. Moreover, each Order
can be associated with many Order detail; But, each Order detail can be associated with only one Order. This
relationship can be summarized that many Order Details to one Order(or equivalently, one Order to many Order
Details).
 This Relation also is one of four common relationships in Symfony including ManyToOne, OneToMany,
ManyToMany, OneToOne.

 To apply this relationship, Symfony provides relational mapping in the database with a foreign key
column(Orders has been a property but it has been set with Relation(ManyToOne) type which references directly
to Order class). This looks like only one association type appeared in Detail class, but seen from the two different
sides of the relation(Symfony has been automatically declared Details property in Order details with


OneToMany relation and it also returned details property as ArrayCollection Object). Once ManyToOne
mapping was initialized, it told Doctrine to utilise the orders_id column on the Details table to relate each record
in that table with a record in the Order table. Doctrine is performed in charge of managing the persistence of
this relationship.
 These instances above has been shown the way to set up the data model in my project; however, it seems to be not
enough for the data to be mapped to the database. To complete apply mapping in the model, it was very essential to
create and run Database migrations(by running Doctrine:Migrations: migrate in command line) to safely update my
project’s database schema both locally and on the website.

Figure 21: Migrations folder and migration file

 It is better to avoid performing SQL queries or heavy logical algorithms in the Doctrine Entity class. However, to
perform some SQL queries, this will be supported in Repository.
 Entity Repository which isolates queries to the database from other logic provides access to helper methods for each
property of the entity. It also supports performing DQL.

Figure 22:Example of Repository Source code

 The source code above is the example of performing a query into the database but as the project’s code. Particularly,
to make the connection to the database in PHP file, I must call to getEntityManager method which returns
EntityManager interface permits to retrieve, update or delete data from the entity and it I needed to call getConnection
which got an ExpressionBuilder used for object-oriented construction of query expressions. Thereby, I could perform
a query like above. “fetchAllAssociative” helped me to fetch any type of result from query to an array which was
easier to manipulate in code.

 Additionally, the get manager() method also provide some method to perform DB operation like storing data,
accessing data, updating/deleting data and they are “persist()” – “remove()” methods.


 The Controller
 The controller operates as an interface between view and model. Its responsibility(mostly) is to urge and handle the
request from view and send it to the model to perform a required operation. this implies it separates computer
programs from business logic and handles how the appliance will reply to user interaction within the view.
 Controller also performs as an entry point for each request because the request is first passed to a controller & then
models are going to be instantiated once we get the info the model returns data to the controller and its task is to
send to respective view (programmingdive, 2020 ).
 In Symfony, a controller is a PHP function that can be created automatically by running a command line in the
terminal(PHP bin/console make: controller). It examines information from the Request object(from view by user)
and creates and returns a Response object. The response returned by the controller could be an HTML page, JSON,
XML, a file download, a redirect, a 404 error or anything else. The controller runs whatever arbitrary logic the
application needs to render the content of a page.

Figure 23: Controller folder

 In my project’s source code, each controller is usually a function inside a controller class that extends
AbstractController(an abstract class that provides many useful helper methods such as addFlash(), render(),
renderForm(), getDoctrine(), redirectToRoute(), etc…).

Figure 24: Example of controller class in my
project


 In Symfony, accompanying controller action is Route. Particularly, as soon as my website has received a request
from clients, it calls a controller action to generate the response. The routing configuration determines what controller
actions are called to run for each incoming URL. It also provides other useful features, like generating SEO-friendly

URLs (e.g. /order/Detail/5 instead of order.Php?detail_id=5 in pure PHP code).
 The Symfony controllers Route is also configured in annotations. yaml.

Figure 25: annotation.yaml

 Symfony server will look for routes defined as annotations in any PHP class in the src/Controller/ directory if this
configuration is used. In the DeliveryController source code above, when a user accesses the /delivery URL, this
configuration determines a route’s name called “delivery_index”. When a match is found, the deliveryController
will run ViewAllDelivery() method. Thereby, it can be told that the Route’s name also is very essential in generating
URLs; hence, each route’s name must be unique in the application.
 For detail illustrating how the controller applied in my project, here are some code screenshots of cart controllers.

Figure 26: Cart Controller source code