ASM 2 Application Development 1640 FPT Greenwich (Merit Super Sale)

ASSIGNMENT 2 FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Business

Unit number and title

Unit 30: Application Development

Submission date

27/12/2022

Date Received 1st submission

Re-submission Date

Date Received 2nd submission

Student Name

Nguyen Huy Hoang

Student ID

GCH200739

Class

GCH0908

Assessor name

Dinh Duc Manh

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
P4

P5

P6

M3

M4

M5

D2

D3



 Summative Feedback:

Grade:

Assessor Signature:

 Resubmission Feedback:

Date:


Internal Verifier’s Comments:

Signature & Date:


Table of Contents
Task 1 – Peer Review and Feedback Analysis (P4 – M3)................................................................................................................................................ 6
I. Introduction ................................................................................................................................................................................................................ 6
II. Peer review and feedback analysis ............................................................................................................................................................................ 6
1. List of questions ..................................................................................................................................................................................................... 6
2. Review and Interpret feedbacks ............................................................................................................................................................................ 8
3. Evaluate any new insights, ideas or potential improvements ............................................................................................................................. 16
Task 2 – Application Development (P5, M4)................................................................................................................................................................ 17
1. Folder structure of the application ...................................................................................................................................................................... 17
2. Source code samples of the application .............................................................................................................................................................. 19
Order Management/ Cart/ Checkout/ Owner feature: ....................................................................................................................................... 19
Other Controller: .................................................................................................................................................................................................. 24
View: .................................................................................................................................................................................................................... 26
3. Final screenshot ................................................................................................................................................................................................... 28
4. Screenshots of using GitHub to manage the source code ................................................................................................................................... 48

Task 3 – Application Evaluation (P6 – M5)................................................................................................................................................................... 53
1. Performance of the application ........................................................................................................................................................................... 53
1. Customer .......................................................................................................................................................................................................... 54
2. Store Owner ..................................................................................................................................................................................................... 61
3. Admin ............................................................................................................................................................................................................... 66
2. Strengths and weaknesses of the application ..................................................................................................................................................... 69
3. Gantt chart ........................................................................................................................................................................................................... 71


Task 1 – Peer Review and Feedback Analysis (P4 – M3)
I. Introduction
The project's creator will present and describe the system in this second section while also gathering data from a survey. We sell books on our
FPTBook, an online library, for a profit. We, a three-person team, collaborate to create this website.

II. Peer review and feedback analysis
1. List of questions
Question

Scope
Open Question. Add about the experience of user
when using FPTBook


Closed Question. Ask about the experience in
Homepage in which the books are showed

Closed Question. Ask about the detail pages.

Closed Question. Ask about the store owner page.

Closed Question. Ask about admin page


Open Question. Add about point of view of user
when using it.

Closed Question. Add about login feature.

2. Review and Interpret feedbacks

The survey states that this section is to find out 12 participated in the survey. According to the results, 60% of respondents prefer our project in
the range of 3 to 5, while 40% fall into range 2. This means that practically everyone has been pleased with our method.


The responses to this query show us that the system has only almost pleased everyone, most features are take opinion of 33.3% normal and
66.7% good.


We take pride in the fact that our system's user interface scored 100% on scales 4 and 5. That indicates that our page is attractive and appealing.


The Store Owner page, on the other hand, has 33.3% on the point 3, 4 and 5. This so us that our page for store owners has been worked very
well.


As we can see in this result, people vote for 4 is 66.7% of the admin page and the other is 3 has 33.3%. We shall preserve the design for the time
being since this is odd.


Based on the results of the poll, we should enhance every page and feature. All of 3 pages may continue to appear in that format for some time.

In this choice
phase of the register inquiry, 66.7% of the respondents want to add it and 33.3% are confused and don't actually want it. We still agreed that it
could be a good idea to introduce this feature.


We are aware that every user wants a reliable user cart. It is true that every system needs a cart feature. We want to upgrade that function very
shortly.

Most idea is about update interface from the survey result.


3. Evaluate any new insights, ideas or potential improvements
Everyone else like our website and believed it could be much better. Nearly everyone appreciates the cart feature. Additionally, the user needs
extra features, such as an automatic message for sales or enhanced search & sort. I think our method worked very well, and the survey taught us
a lot about actual customer experiences. We may be pleased of our effort while still knowing that we have a lot of room for improvement.
After analyzing and evaluation the answer from the survey, I decided to make some changes in the project in the future.
❖ Integrate ReactJs to overhaul the front-end of website
Advantages of Reactjs to my FPTBook project:
➢ Process streamlining To begin with, employing React makes component programming much simpler overall. The free syntactic
extension JSX makes it much simpler to display subcomponents and quote HTML.
➢ Each website owner is aware of how easy support, upgrades, and regular upkeep can develop into a stress pond that never seems to
dry out. A little adjustment to one component may have a significant impact on all the others, causing either a few undesirable
alterations or complete pandemonium. Because ReactJS reuses assets, developers may work less stressfully because they can utilize
the same digital items again. Not to add, utilizing already used parts speeds up the process and lowers the mistake margin.
➢ Developed a virtual document object paradigm to help high-volume, dynamic web applications perform smoothly with fewer (or no)
hiccups. A better user experience, better performance, and faster application are all benefits of the virtual document object paradigm.
➢ ReactJS comes with a full toolkit that not only provides slick performance but also enables developers to include cutting-edge
technology and solutions into their projects without experiencing any difficulties.

➢ Not to add, ReactJS gives developers the option to test and debug code using native tools.
❖ When a user wishes to delete or remove an item from their shopping cart, display a confirmation box. When a user clicks the delete or
remove button, I will show a confirm box to prevent miss clicks. Three roles will play in the system: Admin, Staff, and Customer Every
position will have unique features, functions, and user interfaces. Administrators and employees of the system may add, modify, and
remove things. Items may be found by the customer and added to the shopping cart. The website will include a navigation bar.
❖ Apply Soft Delete for owner and admin site. Soft deletion mainly provides you a chance to retrieve data after deletion and delays the
permanent destruction of backup material. Soft delete retention period refers to the length of time during which this erased material is
still accessible. If you require the deleted data after deletion (when it is in a soft erased state), you may undelete. This resets the data's
protection while retaining its current state. Then, you may utilize it to carry out restoration operations or, in this case, resume backups.
❖ Apply JWT for token-based authentication-authorization:
▪ Stateless authentication means that no data about user sessions is kept on the server.
▪ not restricted to certain servers, pathways, or domains. No problems with cross-origin resource sharing (CORS).


▪

When opposed to XML-based SAML (Security Assertion Markup Language) information sharing, which is often used with
cookies, JSON-based JWT is more condensed.
▪ Using systems for authentication and authorization like Auth0, JWT may additionally provide user rights for certain
resources. So, in addition to authentication, JWT may also be used for authorization.
❖ Need to show confirm before deleting anything in owner, admin page.
❖ Complete confirm account by Email.

Task 2 – Application Development (P5, M4)
We are utilizing the Visual Studio 2022 IDE to code for our project. In order to build the web application, we utilize the ASP.NET Core 6.0 framework.
This is a Linux, Mac, or Windows-compatible open-source framework for creating web applications. We begin the app's development using SQL
Server 2019 by Windows.

1. Folder structure of the application
Because this project is based on MVCVM architecture model pattern, this pattern separates the web structure into 4 primary components (model,

controller, view and view model) 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.


Each controller has a view folder, and the folder has an intuitive structure. Because this project is based on MVCVM model, the controller defines
the business logic of the website is operating. 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. Controller also performs as an entry
point for each request because the request is first passed to 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. 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.
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.


The "wwwroot" subdirectory contains everything else, including bootstrap, front, and JavaScript.

2. Source code samples of the application
Order Management/ Cart/ Checkout/ Owner feature:
This functionality enables customers to add quantity-based orders to an order list. He or she may see all of the orders from various accounts on
the Store Owner page. If I'm a customer, all I can see is my own account's order list.


Each property of the Order class is mapped to each field in the Order table in the database via available ORM feature of ASP.Net core. Commonly,
the ID property automatically is set as the Primary key of this entity. ASP.Net core also provides datatypes which are corresponding to datatypes
in MS SQL server.
Additionally, these classes also have their getter and setter methods which help manipulate with data and ensure encapsulation of these data.
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).
To apply this relationship, ASP.Net provides relational mapping in the database with setting the order details in order as a ICollection(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 ICollection Object). Once ManyToOne mapping was initialized, it
told Doctrine to utilize the orders_id column on the Details table to relate each record in that table with a record in the Order table.


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?detail_id=5 in pure C# code).

ASP.Net IIS server will look for routes defined as annotations in any class in the Controller directory if this configuration is used. In the cart controller
source code below, when a user accesses the /cart URL, this configuration determines a route’s name called “index”. When a match is found, the
cart Controller will run index() 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.


Cart controller could be viewed as one of the most special controllers in my project because it has been coded not in the general format of other
controllers. If other controllers have fully action to control sites (render index - detail views, render form, call to “formType” to add or edit), the
cart controller is more like an API controller (controller implicitly handles intermediary layer that processes data transfer between systems.) and
almost the action of this controller will be called or fetch from front-end using AJAX.
This controller has been applied Session (used to store the cart item view model of each product when adding it to cart, it will be stored as a list
with each element as each book item). Start with the AddToCart action in the cart controller (route’s name ‘AddToCart’), this function uses the
session to store and add the info of products in form of cart item view model object sent when the user clicks on “add to cart” in each product.
Particularly, this function actually used the Request of HttpContext which is configured in ClientHelper class to perform the Set() method to
manipulate with this Session. To apply this approach, I have needed to install ASPNETCORE SESSION package from Nuget. The ASPNETCORE
SESSION package system automatically looks for a service whose id exactly matches the type-hint. With this package, my project could manage

services in the controller with minimal configuration of the session. It read the type-hints in controller functions and passes the appropriate services
to each method automatically.
Based on this, methods in the controller can call directly to Session. Back to the AddToCart function, to make the data in the cart reusable, this
was necessary to check it in session. “Carts” methods has been declared and it has been assigned to method get() via Session. Particularly, the
system has been checked and examined the session’s name ‘cart’ with type is List of CartItem VM. If this session’s name ‘cart’ had existed, this
variable immediately increase with one unit, if not this variable wit set to one unit. Using the Set method to add the list with new item and this
will return the metadata in JSON format to be handled in front-end.


After adding completed, the Session-set method will be called to set the variables ‘myCart’ into Session’s name ‘cart’ to ensure that when
AddToCart method is called again, the session checking will receive the cart Session before. This Function will return the redirectToAction(allows
to return a redirection based on the name of the route) with the name ‘cart’(the main interface of the cart).
The PlusCart and MinusCart methods operate quite similar to the AddToCart function. They just differ to AddToCart that: in AddToCart, the number
of new instance of ‘cartitemVM’ will be declared, but in PlusCart or MinusCart, it will be decreased or removed with other using ways of set
method.
Come to index function, which functions need to handle session and manage data from session storage. To perform these tasks working with
Session was seeming to be not enough, I needed to implement ISession as dependency injection(a powerful and flexible session subsystem that
provides session management via a clear object-oriented interface utilizing storage drivers) in client helper class to manage the session which was
existed in server.

To get the data from the session, it was also necessary to call the get() method via the ClientHelper object to examine the Session’s name ‘cart’.
However, just getting data was not enough to generate the products with full information and quantity in the cart; hence, one multiple dimension
array has been initialized to store this information.
For more realistic, all books in the cart and their quantity needed to be automatically calculated to provide the exact total price. Additionally, to
handle all data from the cart(books, quantity, total prices and etc,…) another method action will be in charge of this task and it is the CheckOut
action(route’s name “CheckOut”). When mapping Url via Route with the name ‘CheckOut’, this action immediately is invoked. The main tasks of
this action are handling data from the session and inserting them into two tables which are the Order table and Detail table in the database. To
perform these tasks, this function needed to initialize some objects in parameter and they include Identity User claim (Identity platform help to

get information of user account which are signing in system), Identity User claim (interface provides session mange service), Order Db context and
Order DB context.
Two instances of two class model (Order and Detail) were initialized. “deliveryOption” and “paymentOption” have been hard fix code. With data
in session, the way to handle was similar to in Cart controller but in each looping time, one more foreach loop has been used to fetch information
from the “Carts” List and set them to object of the Detail entity class. After that, the AddAsync() method(which is a method of EntityFramework
help insert the object into an db) inserts these data of two objects. The SaveChanges () method has been used to confirm.
After all, the remove() method will be called to remove this cart session and the function also returns redirectToAction(‘home index) (redirect
immediately to route’s name homepage).

Other Controller:


The Confirm action updates the status of the order in the database after adding the order object produced by the ASP.NET MVC model binder to
the Orders entity collection. A model binder is an ASP.NET MVC feature that simplifies working with data provided by a form by converting posted
form values to CLR types and passing them as arguments to the action method.
This Delete action invokes the Remove function to change the entity's status to Deleted after retrieving the chosen object. A SQL DELETE command
is created when SaveChanges is invoked. Additionally, it calls the action method from DeleteConfirmed to Delete. In order to give the HttpPost
method a distinctive signature, the code titled the HttpPost Delete function DeleteConfirmed. (The CLR mandates that methods that are
overloaded have unique method arguments).

The intricate information that our shopping cart controller must provide to its views doesn't neatly transfer to the items in our model. Model
classes should reflect our domain, not the user interface, thus we don't want to change them to fit our views. One way would be to use the
ViewBag class to transfer the data to our views, like we did with the Store Manager dropdown data. However, delivering a lot of data through
ViewBag becomes difficult to manage.
The ViewModel design may be used as a remedy for this. With the help of this pattern, we can develop strongly-typed classes that are tailored to
our particular view situations and that provide attributes for the dynamic data that our view templates need. These view-optimized classes may
then be filled up by our controller classes and sent to our view template for usage.