unit 30 application development 2

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

Unit number and title Unit 30: Application Development

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Grade: Assessor Signature: Date:

<b>Internal Verifier’s Comments:</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Signature & Date:

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

P5 Develop a func onal business applica on based on a speci ed business problem. ... 6

1. En ty Rela onship Diagram (ERD)... 6

2. Develop a func onal business applica on ... 6

3. Folder structure of the applica on ... 11

4. Code source samples of the applica on with an explana on ... 14

5. Final screenshots of the applica on ... 37

6. Screenshots of using GitHub to manage the source code ... 42

P6 Review the performance of your business applica on against the Problem De ni on Statement and ini al requirements. ... 43

1. Review the performance of the applica on ... 43

2. Conclude whether the applica on adapts all requirements, or it needs to be improved later ... 43

3. Analyze the factors that in uence the performance of the applica on ... 43

Reference ... 45

Figure 1:En ty Rela onship Diagram ... 6

Figure 2:Visual studio ... 7

Figure 3:SQL Server ... 8

Figure 4:HTML ... 8

Figure 5:CSS ... 9

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

Figure 15:Book Model ... 14

Figure 16:Category Model ... 15

Figure 17:OrderProduct Model ... 15

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Figure 23:CategoriesController ... 21

Figure 24:Home Controller ... 22

Figure 25:Home Controller ... 23

Figure 26:Home Controller ... 24

Figure 27:Home Controller ... 25

Figure 28:Home Controller ... 26

Figure 29:Home Controller ... 27

Figure 45:Admin Page ... 40

Figure 46:Add NewBook Page ... 41

Figure 47:Add NewCategory ... 42

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

de inition statement, proposed solution and development strategy. Use this questionnaire as part of a peer-review and document any feedback give n.

In this sec on, the user's jobs are sorted by their role. Here is a list of roles:

- User: view books, , manage shopping cart, order,

- Admin :, manage products, manage category, manage order,manage category. Ques on about the FPT bookstore applica on:

Website layout 1. In your opinion, should the design of this application interface be exclusive to laptops and desktop computers, or should it also be optimized for mobile devices? aJust on laptop anddestop b. Just on mobile c. All interfaces

laptop and desktop-30% Just on mobile -50% All interfaces

8/3/2024

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Website layout Is the application'sinterface difficult to use? a.Interface Easy to operate and useinterface b.Difficult to operate and use

Easy to operate and use Interface -40$ Difficult to operate and use

8/3/2024

Function rating How easy are these functions to use?

a.Easy to use b.Difficult to use

-20% Difficult to use

-25% Normal

8/3/2024

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

c.A part

P5 Develop a functional business application based on a speci ied business problem.

1. En ty Rela onship Diagram (ERD)

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<small>Figure 1:Entity Relationship Diagram </small>

2. Develop a func onal business applica on❖ Develop tools:

I use Visual studio tools to code. Visual Studio is an Integrated Development Environment(IDE) developed by Microso to develop GUI(Graphical User Interface), console, Web applica ons, web apps, mobile apps, cloud, and

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

released in 1997, named as Visual Studio 97 having version number 5.0. The latest version of Visual Studio is 15.0 which was released on March 7, 2017. It is also termed as Visual Studio 2017. The supported .Net Framework Versions in latest Visual Studio is 3.5 to 4.7. Java was supported in old versions of Visual Studio but in the latest version doesn’t provide any support for Java language.

<small>Figure 2:Visual studio </small>

Data is a collec on of facts and gures and we have humungous data available to the users via the internet and other sources. To manipulate the data, Structured Query Language (SQL) in short has been introduced years ago. There are di erent versions of SQL available in the market provided by di erent organiza ons. In this ar cle, we shall see the version of SQL provided by Microso .

I use SQL built in Visual Studio. Data is a collec on of facts and gures and we have huge data available to users through internet and other sources. For data manipula on, Structured Query Language (SQL) was introduced

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

many years ago. There are di erent versions of SQL available in the market provided by di erent organiza ons. In this ar cle, we will see the SQL version provided by Microso .

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<small>Figure 3:SQL Server </small>

Technique:

I use HTML in my website build.HTML stands for Hypertext Markup Language. It is used to design web pages in markup language. HTML is a combina on of Hypertext and Markup Language. Hypertext iden es links between web pages. The markup language used to de ne text documents in tags de nes the structure of web pages. This language is used to annotate (take notes for the computer) text so that the machine can understand and manipulate the text accordingly. Most markup languages (e.g. HTML) are human readable. The language uses tags to de ne what opera ons must be performed on the text.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<small>Figure 4:HTML </small>

I use Css in my website build process. Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers de ne how it behaves, including how elements are posi oned in the browser.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<small>Figure 5:CSS </small>

ASP.NET is a web applica on framework designed and developed by Microso . ASP.NET is open source and a subset of the .NET Framework and successor of the classic ASP(Ac ve Server Pages). With version 1.0 of the .NET Framework, it was rst released in January 2002. So a ques on comes to mind that which technology we were using before the year 2002 for developing web applica ons and services? Answer is Classic ASP. So before .NET and ASP.NET there was Classic ASP.

ASP.NET is built on the CLR(Common Language Run me) which allows the programmers to execute its code using any .NET language(C#, VB etc.). It is specially designed to work with HTTP and for web developers to create dynamic web pages, web applica ons, web sites, and web services as it provides a good integra on of HTML, CSS, and JavaScript.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Methodologies

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

also used for designing mobile apps.

<small>Figure 6:Model-View-Controller </small>

Controller: The controller is the component that enables the interconnec on between the views and the model so it acts as an intermediary. The controller doesn’t have to worry about handling data logic, it just tells the model

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

what to do. It process all the business logic and incoming requests, manipulate data using the Model component and interact with the View to render the nal output.

View:The View component is used for all the UI logic of the applica on. It generates a user interface for the user. Views are created by the data which is collected by the model component but these data aren’t taken directly but through the controller. It only interacts with the controller.

Model: The Model component corresponds to all the data-related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic-related data. It can add or retrieve data from the database. It responds to the controller’s request because the controller can’t interact with the database by itself. The model interacts with the database and gives the required data back to the controller.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<small>Figure 7:Controller </small>

Models folders: This folder is used to declare the Cart, Category, ErrorViewModel, OrderProduct, Navbar , Product, ProductCart, Sidebar.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Here is the detailed display of the view folders:

+ Categories folder: includes interfaces such as:_ViewStart, Create, Delete, Details, Edit,Index

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<small>Figure :OrderProducts 11</small>

+ Products folders: Includes interfaces such as: Create, Delete, Details, Edit,Index

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<small>Figure :Products 12</small>

+ Shared folders: Includes interfaces such as: Components folder, _Admin,_Layout,_Product, _Valida onScriptsPar al

<small>Figure : Shared 13</small>

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

wwwroot folder: This is the folder to store the source css, fonts, js, libraries as well as images (in uploads folder) to serve the website.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<small>Figure :wwwroot 14</small>

4. Code source samples of the applica on with an explana on

To get a website up and running using the ASP.NET Core framework. First we create the necessary models for the project like: Cart, Category, ErrorViewModel, OrderProduct, Product, ProductCart,

❖ Model: a. Book Model

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

b. Category Model

</div><span class="text_page_counter">Trang 53</span><div class="page_container" data-page="53">

<small>Figure :Home Controller 29</small>

c.OrderProductController

</div><span class="text_page_counter">Trang 54</span><div class="page_container" data-page="54">

+ Create():This func on is used to add a new product to an OrderProduct + Edit() : This func on is used to edit OrderProduct informa on + Delete(): This func on is used to delete OrderProduct

+DeleteCom rm():This func on is used to con rm that you want to Delete OrderProduct

</div><span class="text_page_counter">Trang 60</span><div class="page_container" data-page="60">

<small>Figure :OrderProductController 32</small>

</div><span class="text_page_counter">Trang 61</span><div class="page_container" data-page="61">

<small>Figure :OrderProductController 33</small>

d.ProductController

</div><span class="text_page_counter">Trang 62</span><div class="page_container" data-page="62">

+ Create():This func on is used to create a new Product + Edit() : This func on is used to edit Product informa on +Detail():This func on is used to view detailed Product informa on + Delete(): This func on is used to delete Product

+DeleteCom rm():This func on is used to con rm that you want to Delete Product

</div><span class="text_page_counter">Trang 63</span><div class="page_container" data-page="63">

<small>Figure :ProductController 34</small>

</div><span class="text_page_counter">Trang 65</span><div class="page_container" data-page="65">

<small>Figure :ProductController 35</small>

</div><span class="text_page_counter">Trang 70</span><div class="page_container" data-page="70">

<small>Figure :ProductController 37</small>

❖ View

A er crea ng Controller, we create les in the Views folder.

</div><span class="text_page_counter">Trang 72</span><div class="page_container" data-page="72">

<small>Figure :View 38</small>

❖ Connect database

The next step is to connect the data to the database; to do this, we connect to SQL Server using the following statement in the appse ngs.json le:

</div><span class="text_page_counter">Trang 73</span><div class="page_container" data-page="73">

<small>Figure :database 40</small>

5. Final screenshots of the applica on There are all pages of my website: Homepage:

</div><span class="text_page_counter">Trang 74</span><div class="page_container" data-page="74">

<small>Figure :Homepage 41</small>

ProductDetail Page:

</div><span class="text_page_counter">Trang 75</span><div class="page_container" data-page="75">

<small>Figure :ProductDetail 42</small>

Cart Page:

</div><span class="text_page_counter">Trang 77</span><div class="page_container" data-page="77">

<small>Figure :OrderProduct 44</small>

Admin Page

</div><span class="text_page_counter">Trang 79</span><div class="page_container" data-page="79">

<small>Figure :Admin Page 45</small>

Add NewBook Page:

</div><span class="text_page_counter">Trang 81</span><div class="page_container" data-page="81">

<small>Figure :Add NewBook Page 46</small>

</div><span class="text_page_counter">Trang 83</span><div class="page_container" data-page="83">

<small>Figure :Add NewCategory 47</small>

6. Screenshots of using GitHub to manage the source code Link : h ps://github.com/baanh0111/Demo/tree/master/Demo The project's source code is hosted on GitHub.

</div><span class="text_page_counter">Trang 85</span><div class="page_container" data-page="85">

before to change, following change, and following project comple on: No Use

(User) ^{Can view}books, search books and view book details

Can view books, search books and view book details

2 Cart

(User) ^{Can add}and remove products and order

Users can add products by clicking on the (+) sign and reduce books by clicking on the (-) sign and press the Check Out bu on to order.

2. Conclude whether the applica on adapts all requirements, or it needs to be improved later

</div><span class="text_page_counter">Trang 86</span><div class="page_container" data-page="86">

The system's primary opera ons remain steady. It has login and logout func onality, CRUD, role management, the ability for the admin to accept or reject the shop owner's request for a new book catalog. Based on data about each customer, company owner, and administrator, we want to introduce more services in the future, such as a more pleasurable user experience and online payments.

3. Analyze the factors that in uence the performance of the applica on

The so ware's opera on was assessed in light of a wide range of scenarios and poten al outcomes that may occur during user use. To encrypt data as e ec vely as possible while elimina ng uninten onal mistakes, the developer has solved a number of concerns. A customer, for instance, won't be able to use or access the admin capabili es since they don't have the privileges listed in the required paperwork. However, the developer lessens the

</div><span class="text_page_counter">Trang 89</span><div class="page_container" data-page="89">

GeeksforGeeks. (2020). Introduc on of MS SQL Server. [online] Available at:

h ps://www.geeksforgeeks.org/introduc on- -of ms-sql-server/.[Accessed 8 March 2024].

GeeksforGeeks. (2022). MVC Framework Introduc on. [online] Available at: framework-introduc on/.[Accessed 8 March 2024].

Contributors (2019). User interface design. [online] Available at: h ps://en.wikipedia.org/wiki/User_interface_design. [Accessed 8 March 2024]. www.diagrams.net. (n.d.). Features of diagrams.net and draw.io. [online] Available at: h ps://www.diagrams.net/features/.[Accessed 8 March 2024].

h ps://www.skillshare.com/en/blog/what-is- gma-a-complete-introduc on-for-beginners/ W3Schools (2022). Introduc on to HTML. [online] W3schools.com. Available at: h ps://www.w3schools.com/html/html_intro.asp. [Accessed 8 March 2024].

www.w3schools.com. (n.d.). Introduc on to React. [online] Available at: h ps://www.w3schools.com/react/react_intro.asp. [Accessed 8 March 2024]. Pinegrow Web Editor. (n.d.). Introduc on to Tailwind CSS. [online] Available at:

h ps://pinegrow.com/docs/tailwind/introduc on-to-tailwindcss/ [Accessed 8 March 2024]. Wikipedia Contributors (2019). Apache HTTP Server. [online] Wikipedia. Available at: h ps://en.wikipedia.org/wiki/Apache_HTTP_Server. [Accessed 8 March 2024].

InterviewBit. (2021). Top MySQL Features. [online] Available at: h features/.[Accessed 8 March 2024].

</div><span class="text_page_counter">Trang 90</span><div class="page_container" data-page="90">

ps://www.interviewbit.com/blog/mysql-MongoDB. (n.d.). MongoDB Features & Key Characteris cs. [online] Available at: h ps://www.mongodb.com/features. [Accessed 8 March 2024].

Stackify. (2017). Top 13 ASP.NET Core Features You Need to Know. [online] Available at: h net-core-features/.[Accessed 8 March 2024].

ps://stackify.com/asp-Lewis, S. (2019). What is waterfall model? - De ni on from WhatIs.com. [online] SearchSo wareQuality. Available at: h ps://www.techtarget.com/searchso warequality/de ni on/waterfall-model . [Accessed 8 March 2024].

</div>