ASM Project Web WEBG301 FPT Greenwich (Merit Super Sale)

Điểm của bài asm còn tùy thuộc vào người chấm. Chỉ cần paraphase bài này là có thể pass. 1 trong nhưng tool paraphase mình recommend là quillbot.The submission is in the form of 1 document.● You must use the Times font with 12pt size, turn on page numbering; set line spacing to 1.3 andmargins to be as follows: left = 1.25cm, right = 1cm, top = 1cm, bottom = 1cm. Citation andreferences must follow the Harvard referencing style. ASSIGNMENT FRONT SHEET Qualification BTEC Level HND Diploma in Computing Unit number and title Unit 2: Networking Infrastructure Submission date Date Received 1st submission Resubmission Date Date Received 2nd submission Student Name Student ID Class Assessor name 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 Grading grid P1 P2 P3 P4 M1 M2 D1 ❒ Summative Feedback: Grade: Lecturer Signature: ❒ Resubmission Feedback: Assessor Signature: Date: Table of Contents I Network Network definiton Ξ First of all, network also known as computer networking, which can be understand as a group of computers utilizing a principles of general communication protocols over digital connections for the intention of sharing resources located upon or accommodated by network nodes ... https:www.dnsstuff.comdatabreach 10 1 Dobran, B., 2 019 Information Security Risk Management: Build a Strong Program Online Available at: https:phoenixnap.combloginformation security riskmanagement garg, r., 20 21 Threats... List and give examples with dates 12 Propose a method to assess and treat IT security risks (M1) 18 TASK DESCRIBE AT LEAST ORGANIZATIONAL SECURITY PROCEDURES (P2) .20 Definition... Dan Swinhoe, 20 21 The 15 biggest data breaches of the 21st century, s.l.: s.n Ohri, A., 20 21 What Is DMZ Network Online Available at: https:www.jigsawacademy.comblogscyber security whatisdmz

GROUP PROJECT FRONT SHEET

❒ Summative Feedback: ❒ Resubmission Feedback:

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

User story

No

4 Customer Click on the product image to show

all of its information

Know all the information about the product I care about

5 Customer View all categories in the store Know what types of products they have in the

store

category in the store

Compare products

8 Customer View a brand’s product in the store Buy from their product

about the order

21 Customer Choose which delivery will ship my

order

Get my order as soon as possible

II Use case diagram

1 Customer use-case diagram

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

Figure 1: Usecase diagram Customer

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

Figure 2: Admin Use-case diagram

CHAPTER 2 – SYSTEM DESIGN

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

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

Figure 3: Site map image

Figure 4: Adminsite sitemap

II Entity Relational Diagram

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

Figure 5: ERD image

 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

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

Figure 7: Product Detail wireframe

3 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

Figure 8: Product list wireframe

4 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 9: Shopping cart Wireframe

Figure 10: Profile wireframe

6 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

Figure 11: Login Wireframe

8 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

Figure 13: Admin view

9 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

Figure 14: OrderSite Wireframe

CHAPTER 3 – SYSTEM IMPLEMENTATION

 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 )

 MVC pattern overview in Symfony(my project)

 Project Structure:

Hình 1: MVC pattern Image

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

 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 16: Entity folder

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:

 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 18: doctrine.yaml source code

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

 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

 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

Figure 22:Example of Repository Source code

Figure 21: Migrations folder and migration file

 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