Assigment 2 - Application Development - Pass, Assignments of Computer Science

Download Assigment 2 - Application Development - Pass and more Assignments Computer Science in PDF only on Docsity! Huynh Minh Huy GCD1001 | UNIVERSITY OF GREENWICH Assignment 2 APPLICATION DEVELOPMENT HUYNH MINH HUY 1 ASSIGNMENT 2 FRONT SHEET Qualification BTEC Level 5 HND Diploma in Computing Unit number and title Unit 30: Application Development Submission date 28/04/2023 Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Huynh Minh Huy Student ID GCD210173 Class GCD1001 Assessor name Nguyen Van Loi 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 Huy Grading grid P4 P5 P6 M3 M4 M5 D2 D3 HUYNH MINH HUY 4 Table of Contents CHAPTER 1: INTRODUCTION. .......................................................................................................................... 12 CHAPTER 2: PEER REVIEW AND FEEDBACK ANALYSIS. ......................................................................... 12 I. Formal questionnaire to reviews the business application, problem definition statement, proposed solution and development strategy. ..................................................................................................... 12 II. Collect review feedbacks. ..................................................................................................................................... 13 III. Interpret peer – review feedbacks. .............................................................................................................. 18 CHAPTER 3: APPLICATION DEVELOPMENT. .............................................................................................. 20 I. Folder structure of the application. .................................................................................................................. 20 II. Source code samples of the application with explanation. ..................................................................... 30 1. Overview and wireframe of the application. ............................................................................................ 30 2. Customer Role. ..................................................................................................................................................... 34 3. Store Owner Role. ............................................................................................................................................... 40 4. Admin Role. ........................................................................................................................................................... 50 III. Final screenshots of the application. ........................................................................................................... 59 1. Customer Role. ..................................................................................................................................................... 59 2. Store Owner Role. ............................................................................................................................................... 73 3. Admin Role. ........................................................................................................................................................... 84 IV. Screenshots of using Github or GitLab to manage the source code. ................................................ 96 V. Screenshots of using IIS or Azure for the application deployment. .................................................. 100 CHAPTER 4: APPLICATION EVALUATION. ................................................................................................ 104 I. Review the performance of the application. .............................................................................................. 104 II. Conclude whether the application adapts all requirements or it needs to be improved later. 115 S02) UNIVERSITY of = GREENWICH . e ances Lg, 00 By i EC CHAPTER 5: CONCLUSION, vsssssssssssssssscssssseesssssenssssesssssuesssnseesssueessnssersssnssssssuesssnscesssuessrseesssnseessnuesesnavessaseesss 116 HUYNH MINH HUY  HUYNH MINH HUY 6 Table of Figures Figure 1: Survey form for application. .......................................................................................................................... 13 Figure 2: First Question. ..................................................................................................................................................... 13 Figure 3: Second Question................................................................................................................................................. 14 Figure 4: Third Question. ................................................................................................................................................... 15 Figure 5: Fourth Question. ................................................................................................................................................ 15 Figure 6: Fifth Question...................................................................................................................................................... 16 Figure 7: Seventh Question. .............................................................................................................................................. 16 Figure 8: Eighth Question. ................................................................................................................................................. 17 Figure 9: Feedbacks of customers about experiment. ........................................................................................... 18 Figure 10: Folder structure of the application. ......................................................................................................... 20 Figure 11: Properties folder. ............................................................................................................................................ 21 Figure 12: wwwroot folder. .............................................................................................................................................. 21 Figure 13: Areas folder. ...................................................................................................................................................... 22 Figure 14: Controller folder. ............................................................................................................................................. 23 Figure 15: Data folder. ........................................................................................................................................................ 23 Figure 16: Mail folder. ......................................................................................................................................................... 24 Figure 17: Migration folder. .............................................................................................................................................. 24 Figure 18: Model folder. ..................................................................................................................................................... 25 Figure 19: View folder. ....................................................................................................................................................... 26 Figure 20: appsettings.json file. ...................................................................................................................................... 26 Figure 21: appsettings.Development.json file. .......................................................................................................... 27 Figure 22: Program file....................................................................................................................................................... 27 Figure 23: Initialize file. ..................................................................................................................................................... 28 Figure 24: libman.json file. ................................................................................................................................................ 29 Figure 25: Overview of the system. ............................................................................................................................... 30 Figure 26: Wireframe for home page. ........................................................................................................................... 31 Figure 27: Wireframe for login form. ............................................................................................................................ 32 HUYNH MINH HUY 9 Figure 86: Option for store owner. ................................................................................................................................ 74 Figure 87: Manage book. .................................................................................................................................................... 74 Figure 88: Create book. ...................................................................................................................................................... 75 Figure 89: View in detail. ................................................................................................................................................... 75 Figure 90: Edit book information. .................................................................................................................................. 76 Figure 91: Edit price success. ........................................................................................................................................... 76 Figure 92: Delete book........................................................................................................................................................ 77 Figure 93: Manage category request. ............................................................................................................................ 77 Figure 94: Create category request. .............................................................................................................................. 78 Figure 95: View each category in detail. ...................................................................................................................... 79 Figure 96: Edit category request. ................................................................................................................................... 79 Figure 97: Delete category request................................................................................................................................ 80 Figure 98: View the customer’s information. ............................................................................................................ 80 Figure 99: View customer’s information in detail include the ordered of that customer. ....................... 81 Figure 100: Manage order. ................................................................................................................................................ 83 Figure 101: Home page for admin when they login into the system. ............................................................... 84 Figure 102: Admin Option. ................................................................................................................................................ 84 Figure 103: Manage role. ................................................................................................................................................... 85 Figure 104: Create new role success. ............................................................................................................................ 85 Figure 105: Edit and Update. ........................................................................................................................................... 86 Figure 106: Edit & Update success. ............................................................................................................................... 86 Figure 107: Delete role name. .......................................................................................................................................... 87 Figure 108: Manage User Page. ....................................................................................................................................... 87 Figure 109: Add new store owner. ................................................................................................................................ 88 Figure 110: Add store owner success. .......................................................................................................................... 88 Figure 111: View user's information in details. ........................................................................................................ 89 Figure 112: Disable account. ............................................................................................................................................ 89 Figure 113: Disable success. ............................................................................................................................................. 89 Figure 114: Reset Password. ............................................................................................................................................ 90 HUYNH MINH HUY 10 Figure 115: Manage Category. ......................................................................................................................................... 90 Figure 116: Create new category.................................................................................................................................... 91 Figure 117: View detail category. ................................................................................................................................... 91 Figure 118: Edit Category. ................................................................................................................................................. 91 Figure 119: Edit category success. ................................................................................................................................. 92 Figure 120: Delete Category. ............................................................................................................................................ 92 Figure 121: Delete success. ............................................................................................................................................... 92 Figure 122: View category request. ............................................................................................................................... 93 Figure 123: View request in details. .............................................................................................................................. 93 Figure 124: Option: Approve. .......................................................................................................................................... 94 Figure 125: Approved success. ........................................................................................................................................ 94 Figure 126: Make new request. ....................................................................................................................................... 94 Figure 127: New request from store owner. .............................................................................................................. 95 Figure 128: Option 2: Reject. ............................................................................................................................................ 95 Figure 129: Rejected success. .......................................................................................................................................... 95 Figure 130: GitHub Project Home Page. ...................................................................................................................... 97 Figure 131: All git commit. ................................................................................................................................................ 98 Figure 132: All branch have been merged into project. ........................................................................................ 99 Figure 133: Deploy project by Azure. ........................................................................................................................ 100 Figure 134: Authorize the Azure app with github account. .............................................................................. 100 Figure 135: Configure networking. ............................................................................................................................. 101 Figure 136: Configure monitoring. ............................................................................................................................. 101 Figure 137: Configure Tags. ........................................................................................................................................... 102 Figure 138: View detail. .................................................................................................................................................. 102 Figure 139: Deployed successfully. ............................................................................................................................ 103 Figure 140: Performance of the system. ................................................................................................................... 114 HUYNH MINH HUY 11 Table of Tables Table 1: Review feedback of customers. ...................................................................................................................... 19 Table 2: Test Case. ............................................................................................................................................................. 105 Table 3: Test Result. ......................................................................................................................................................... 113 HUYNH MINH HUY 14 Based on the survey results of 50 individuals, it appears that the ease of navigating and finding what they were looking for on the website varied. The majority of respondents (52%) rated their experience as a 4 or 5 out of 5, indicating that they found it relatively easy to navigate the site. However, over a third of respondents (38%) rated their experience as a 1 or 2 out of 5, suggesting that significant improvements could be made to the website's navigation and search functionality. It is important for the us to take these results into consideration and make necessary improvements to ensure better user experience for all visitors. Figure 3: Second Question. It is surprising that a total of more than 85.7% of people have made a purchase in our system, a pretty high number for a newly established system like us, because compared to the data First of all, more than a third of respondents (38%) rate their experience as 1 or 2 out of 5 so with 85.7% of people making a purchase is something that we are very surprised. However, there is still a small percentage (14.3%) of people who did not purchase from our system. This suggests that our website or store may be effective at converting visitors into customers, and that efforts should continue to be made to maintain or increase this conversion rate. It is also important to consider the reasons why some respondents did not make a purchase, as this feedback can be used to make necessary improvements to the website or store to attract more customers. HUYNH MINH HUY 15 Figure 4: Third Question. The data shows that the majority of respondents (62%) rated their satisfaction levels as a 3 or 4 out of 5, indicating they were moderately satisfied with the products they received. However, a sizeable proportion of respondents (24%) rated their satisfaction levels as a 1 or 2 out of 5, suggesting that they were dissatisfied with their purchase. This feedback is valuable for us to improve on product quality and customer satisfaction. Understanding the reasons behind the dissatisfaction can help us make necessary improvements to prevent such negative experiences in the future. Figure 5: Fourth Question. It can be observed from the data that 76% of respondents rated their likelihood of recommending the website and store as either a 3 or 4 out of 5, indicating that they were relatively positive about sharing their experience with others. However, a significant percentage of respondents (18%) rated HUYNH MINH HUY 16 their likelihood of recommending as a 1 or 2 out of 5, suggesting that they were not satisfied with their experience. We should take this feedback seriously and make necessary improvements to improve customer satisfaction levels and increase the likelihood of customers recommending their website and store to others. Figure 6: Fifth Question. Here are some problems that user encountered when they visit our website. We will look into all the problems that users face to quickly fix and provide a good user experience. Figure 7: Seventh Question. HUYNH MINH HUY 19 The application looks to be using the system's default design, which makes it too simplistic and incapable of attracting new clients. We have used CSS to support system decoration and we have used it to redecorate based on its original design so that customers can view it very easily and without the necessary qualities. And in the future, we will update the CSS frameworks for the system to replace the CSS which becomes relatively difficult to maintain the system look and feel. When I register new account and login by this account, I can't add book to cart. After logging in, the user can either add books directly from the book page or only after viewing the content on the website. I can't add another book to my cart once I've added a book to it. You mean when you added a book to the cart and you want to add that book again? When a consumer adds a book to the shopping cart, the system displays the shopping cart for the user to validate the book they have just added, and they may raise or reduce the amount or remove the product they do not like. Table 1: Review feedback of customers. HUYNH MINH HUY 20 CHAPTER 3: APPLICATION DEVELOPMENT. I. Folder structure of the application. Figure 10: Folder structure of the application. The launchSettings.json file, which is located in the Properties folder, contains all the data required to start the program. Configuration information, such as IIS settings, application URLs, authentication, SSL port information, and others, that specify what should happen when the program is run. HUYNH MINH HUY 21 Figure 11: Properties folder. The "wwwroot" folder serves as the root directory for a website or web application. It's the default location where web servers look for files to serve to users who visit the site. Typically, the "wwwroot" folder contains all the static files of the project, which are files that don't change dynamically based on user input or server-side processing. Figure 12: wwwroot folder. HUYNH MINH HUY 24 Figure 16: Mail folder. The "Migrations" folder is used to manage database schema changes using Entity Framework (EF) Core Migrations. Figure 17: Migration folder. The "Migrations" folder contains files that represent individual database schema changes, which can be applied or rolled back using the EF Core Migrations commands. These files contain code that modifies the database schema, such as adding or removing tables, columns, indexes, or constraints. The Model represents the application's data and business logic. It is responsible for managing the data, retrieving and storing it from the data source, and applying business rules to that data. In other words, the Model contains the code that represents the application's domain logic, such as classes, objects, and data access layers. It defines how the data should be structured, validated, and manipulated. The Model provides data to the Controller, which is responsible for handling HUYNH MINH HUY 25 user requests, coordinating with the Model to update or retrieve data, and returning the data to the View. The Controller uses the Model to retrieve data, update data, and perform business logic operations. Figure 18: Model folder. The View represents the user interface (UI) of the application. It is responsible for rendering the model data to the user, typically using Razor syntax to generate HTML. Views can contain a mix of HTML, JavaScript, and CSS, along with ASP.NET server-side code that processes user input and generates dynamic content. Views are typically organized in the Views folder of the application and can be customized and extended to meet the specific needs of the application. HUYNH MINH HUY 26 Figure 19: View folder. appsettings.json file provides program settings, such as logging and database connection information. Figure 20: appsettings.json file. appsettings.Development.json file is also provides program setting, such as logging and the mail setting which is the main email that will send information to user’s email that have been registered. HUYNH MINH HUY 29 Figure 24: libman.json file. By using the "libman.json" file, we can easily manage the client-side libraries in our project and ensure that they are up to date with the latest versions. The tool also allows for the use of CDN- based libraries, which can help improve performance by leveraging caching and other optimization techniques. HUYNH MINH HUY 30 II. Source code samples of the application with explanation. 1. Overview and wireframe of the application. In Assignment 1, we discussed various options for deploying our system and suggested using Microsoft Azure as a cloud platform to make the release process simpler. After careful evaluation of different platforms, we decided to leverage the capabilities of Azure due to its extensive features and support for ASP.NET web applications. Azure is a cloud computing service provided by Microsoft that offers a wide range of services, including virtual machines, databases, storage, and networking. It is a scalable and flexible platform that enables us to easily deploy, manage, and monitor our web application. It also provides seamless integration with other Microsoft products and services, making it an ideal choice for us as an ASP.NET development team. We explored several other cloud platforms, including Heroku, but found that they did not fully support ASP.NET web applications. Heroku, in particular, is known for its ease of use and deployment for various web technologies, but unfortunately, it lacks support for ASP.NET. Therefore, we opted to modify our project design and use Microsoft Azure instead of Heroku for this publication. Overall, we believe that Microsoft Azure is a reliable and efficient cloud platform that will help us simplify the deployment and management of our system. Its support for ASP.NET and other Microsoft technologies, combined with its extensive features, make it an excellent choice for hosting our web application. Figure 25: Overview of the system. HUYNH MINH HUY 31 MockFlow is what I use to create the wire frames for each page of our application. Figure 26: Wireframe for home page. HUYNH MINH HUY 34 2. Customer Role. When users visit the system, the program will display a brief overview of the system and suggest some outstanding books for further reading. This information will be shown on the screen via the function below. Figure 29: View Book Index. Here is a source code that handles the HTTP GET request for the "Book" page. HUYNH MINH HUY 35 Here is source code for an action that handles a POST request for book searching. Here is source code for an action method called "Details". HUYNH MINH HUY 36 Here is the source code for a controller action that adds a book to a user's shopping cart. Here is source code for view cart. Here is a source code for update cart. HUYNH MINH HUY 39 Here is source code for deleting order. HUYNH MINH HUY 40 3. Store Owner Role. Here is the main layout for store owner page. Figure 30: Store Owner Layout. Here is source code to display details of a category request when the store owner wanted to create request to admin to add category. Figure 31: View category request in detail function. Here is source code to defines an HTTP GET request handler for the Create action. HUYNH MINH HUY 41 Here is source code to defines an HTTP POST request handler for the Create action. Figure 32: Create category request function. Here is source code responsible for editing an existing category request in the system. HUYNH MINH HUY 44 We created customer controller for store owner to search the customer’s information and can view the customer’s information in details. Here is the source code for viewing the customer information. Figure 35: View and search customer function. And here is the source code for function to view details customer’s information. HUYNH MINH HUY 45 Figure 36: View detail customer's information function. In addition, we created book controller for store manager to manage book. Here is source code for view book in store owner page Figure 37: Display all book in database. Here is source code to defines an action method to handle HTTP GET requests to display details of a specific book in a web application. Figure 38: View book detail in store owner page. HUYNH MINH HUY 46 Here is source code to returns a view to create a new book. Figure 39: Create new book in store owner page. HUYNH MINH HUY 49 Here is source code that handle the completion of orders. HUYNH MINH HUY 50 4. Admin Role. The main layout for admin is similar with store owner, we just change the title from store owner into admin. Figure 43: Admin main layout. Here is source code for view category in detail. Figure 44: View category in details. HUYNH MINH HUY 51 Here is the source code that allows the admin to create a new category. Figure 45: Create category in admin. Here is source code allows the admin to edit a category. Figure 46: Edit category in admin. HUYNH MINH HUY 54 Here is source code for deleting a role in the system. Figure 51: Delete role. Here is source code for function view detail category request when the store owner request to admin. Figure 52: View detail category request in admin. HUYNH MINH HUY 55 Here is source code for function approve category request when the store owner request to admin. Figure 53: Approve category request. HUYNH MINH HUY 56 Here is source code for function reject category request when the store owner request to admin. Figure 54: Reject category request. Here is source code that handles creating a new store manager. HUYNH MINH HUY 59 Figure 59: Reset password function for user. III. Final screenshots of the application. 1. Customer Role. Here is the program's homepage for the first-time customer browses. Figure 60: Customer Home Page. If this is the first time for the customer, they will need to register the account. HUYNH MINH HUY 60 Figure 61: Register Account. When the customer has finished creating the account, the website will display Register Confirmation Page to ask customer confirm their account. Figure 62: Register Confirmation. HUYNH MINH HUY 61 In this situation, customer will have 2 options. For option 1, they will confirm their account by clicking the section “Click here to confirm your account” and then the website will display this page. Figure 63: Option 1 - Confirm account in website. When the customer has finished confirm their account they can login again by the account that they registered. For option 2, they will need to go to their email to confirm their account. Figure 64: Option 2 - Confirm account in email. HUYNH MINH HUY 64 After that, customer just go to their email to press the login link that have been sent by the system. Figure 69: Login link have been sent to customer email. If a user forgets their password, our system provides a "Forgot Password" function to resolve this issue. Figure 70: Forgot password. When a user clicks on this function, they will be prompted to enter their registered email address and when they have finished entering their email address, it will display this page. HUYNH MINH HUY 65 Figure 71: Forgot password confirmation. Once verified, the system will send a reset password link to their registered email or phone number. The user can then click on the link and reset their password to regain access to their account. Figure 72: Link to reset password. And here is page to reset password. HUYNH MINH HUY 66 Figure 73: Reset password page. Here is the profile setting page for user. Figure 74: Profile setting page. In this page, customer can manage their email, change their password, setup two-factor authentication (2FA) for their account to keep their account more safety and the last option is HUYNH MINH HUY 69 The customer just scanned the QR code by using any authenticator app and then enter the code in the box. Figure 79: Manage Personal Data. And last not but least, the most important things in any e-commerce website is product page. Here is our product page for customer. HUYNH MINH HUY 70 Figure 80: Book page for customer. Here is our product detail page for customer. Figure 81: Product detail. The customer can press the add to cart button in the product page or they can press the add to cart button in the product detail page. It will depend on their choice. HUYNH MINH HUY 71 Here is the product cart when customer add their product. Figure 82: Product cart. In this page, user can increase or decrease the quantity and in addition this page also have the update and remove product for the user. When their want to increase the quantity of product they want to buy, they will need to set the quantity they want and then press update to update the information. On the other hand, if they don’t want to buy that book anymore they can press remove to remove that book from the cart. HUYNH MINH HUY 74 Here is the option for store owner. Figure 87: Option for store owner. Here is the option 1 which is manage book. Figure 88: Manage book. HUYNH MINH HUY 75 I will create new book for the website. Figure 89: Create book. And here is the book that I have input into the system. I can view the book’s information in details, edit and even can delete the book if the book doesn't sell much. Figure 90: View in detail. HUYNH MINH HUY 76 I will edit the price for that book from 23.24 to 19.56 Figure 91: Edit book information. Figure 92: Edit price success. HUYNH MINH HUY 79 In this page, I can view each category in detail, edit and also delete. Figure 96: View each category in detail. Figure 97: Edit category request. HUYNH MINH HUY 80 Figure 98: Delete category request. And that is the option 2 for store owner which is manage category request. We will move on to the option 3 which is view customer’s information. Here is the page to view the customer’s information. Figure 99: View the customer’s information. HUYNH MINH HUY 81 We can view customer’s information in detail include the ordered of that customer. Figure 100: View customer’s information in detail include the ordered of that customer. Store owner can also search the name of the customer they want by search customer’s name in the search bar. Here is the page before search. HUYNH MINH HUY 84 3. Admin Role. Here is the home page for admin when they login into the system. Figure 102: Home page for admin when they login into the system. Here is the option for admin. Figure 103: Admin Option. HUYNH MINH HUY 85 Here is the manage role for admin. In this page, the admin can create new role for the website. Figure 104: Manage role. I will create new role which is security guard. Figure 105: Create new role success. HUYNH MINH HUY 86 The admin can edit and delete role too. Figure 106: Edit and Update. Because we use API for this page so it will not reload the page when admin working in this page. Now I will click edit to rename the role and then update that new role. Figure 107: Edit & Update success. HUYNH MINH HUY 89 The admin now can view user’s information in detail, disable or activate account and reset password. Figure 112: View user's information in details. I will disable the account that I just create for new store owner. Figure 113: Disable account. Here is the detail for that user. You can see the account status is now Banned. Figure 114: Disable success. I will login into that account to see the result. HUYNH MINH HUY 90 The account now has been banned. For the last option for this page is reset password and now I will reset password the account for new store owner. Figure 115: Reset Password. That is for option 2 and now we will move on to option 3 which is view category. Figure 116: Manage Category. HUYNH MINH HUY 91 In this option admin can create new category for the website, edit, detail and delete. Figure 117: Create new category. I have created new category which is Romantic and now I view detail that category. Figure 118: View detail category. I will edit that new category that have been inputted into system. I will change the name of the category from Romantic to Horror. Figure 119: Edit Category. HUYNH MINH HUY 94 Figure 125: Option 1: Approve. You can see the approved status is now “Yes”. I will log in to the store owner again to see if that category has been approved or not. Figure 126: Approved success. The Romantic category has been approved. For option 2 is reject, I am currently login into store owner and I will make a new request which is Art & Music. Figure 127: Make new request. HUYNH MINH HUY 95 I will login into admin page again to reject that request. Figure 128: New request from store owner. You now can see the new category which is Art & Music has been requested by store owner and now I will reject that request. Figure 129: Option 2: Reject. Figure 130: Rejected success. HUYNH MINH HUY 96 You now can see that, the new category request which is Art & Music is now rejected and has been removed from the request list. I will re-login into the store owner to see the result if that category has been rejected or not. The Art & Music category has been rejected. IV. Screenshots of using Github or GitLab to manage the source code. Effective source code management is essential when working on a team, as it helps ensure that everyone is working on the same version of the code, and allows for easy collaboration and tracking of changes. After careful consideration and discussion among team members, we decided to adopt GitHub as our primary source code management solution. One of the main reasons we chose GitHub is its popularity and widespread use in the software development community. This means that many developers are already familiar with the platform and can easily contribute to our project. Additionally, GitHub has a user-friendly interface that allows for easy navigation, issue tracking, and collaboration. Overall, that is the reason why our team decided that GitHub was the best choice for our source code management needs due to its popularity, ease of use, features, and community support. Here is the github’s link to our project: https://github.com/andynguyen1103/FptBook.git This is the GitHub interface page, which displays all the required features for managing source code in the most convenient manner