Assignment 2 Cloud Computing 1644 Distinction

An assignment scored Distinction in cloud computing. This assignment presents a report of a toyStore website using Nodejs, MVC model, encryption methods, security, fullstack website, including decentralization

ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title Unit 16: Cloud Computing

Submission date 25/12/2023 Date Received 1st submission 25/12/2023

Re-submission Date Date Received 2nd submission

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

 Summative Feedback:  Resubmission Feedback:

Internal Verifier’s Comments:

Signature & Date:

2.1

Table of Contents

A Introduction 8

B Design 9

I Overview Function 9

1 Solution 9

2 Use-case diagram 9

3 Website Screenshots: 12

II Code implement and deploy process 24

1 Tools and framework 24

2 Deploy 28

3 Code Implement 35

4 Source code and website 52

III Difficulties which one can face during the development process and how to overcome them (M3-D2) 52

1 Programming 52

2 Debugging 55

3 Deploy 61

C Security 65

I Some issue of Cloud computing platform 65

1 Public Cloud 65

2 Private Cloud 66

3 Hybrid Cloud 67

II Security issues and solution in cloud computing environment (M4) 67

1 Cloud defense breaches 68

2 Misconfiguration 68

3 Data sharing risks 70

4 Lack of clear visibility 71

5 Cyberattacks 72

6 Data leakage hazards 73

7 Data privacy 74

8 Data management 75

III How an organization should protect their data (D3) 76

1 Using reputable Cloud Server service 76

2 Set Up Backup And Recovery Options 77

3 Encrypt Your Data 78

4 Set user Permissions 79

5 Set Up Property Passwords for users 81

6 Secure End User Devices 83

7 Avoid Uploading Confidential Data to cloud 83

D Summary 84

E Conclusion 86

References 87

Table of Figures

Figure 1: Admin use-case diagram 10

Figure 2: Customer use-case diagram 11

Figure 3: Login and Register page 12

Figure 4: Forgot-password and reset password 12

Figure 5: Dashboard page 13

Figure 6: Category management page 13

Figure 7: Add Product and Show Product page 14

Figure 8: Show order and Detail order page 14

Figure 9: Show feedback and send email user contacted with shop 14

Figure 10: Show user and add/edit user page 15

Figure 11: Home page 15

Figure 12: Profile Page 16

Figure 13: Product page 16

Figure 14: For example, the product detail page of a product in shop 17

Figure 15:Favorite product page 18

Figure 16: Cart Page 19

Figure 17: Order page 19

Figure 18: Contact page 20

Figure 19: Footer in interface customer 20

Figure 20: Function chat automatically 21

Figure 21: Order exported by pdf 22

Figure 22: Statistics on the amount of all orders from a user 22

Figure 23: Email bills 22

Figure 24:Use stripe for payment 23

Figure 25: Example about function asynchronous search in my website 23

Figure 26: Example about some sweetAlert notifications are used on the website 24

Figure 27: Example about session alert in my website 24

Figure 28: Visual studio code 25

Figure 29: Github 26

Figure 30: MongoDB compass 27

Figure 31: Render 27

Figure 32: Download Nodejs 28

Figure 33: Initial express project 28

Figure 34: New cluster in mongdb 29

Figure 35: Security Quickstart 29

Figure 36: Select IP to connect 30

Figure 37: Connect cluster 30

Figure 38: Copy string to connect mongoDB compass 31

Figure 39: Connect mongoDB compass 31

Figure 40: Git init 31

Figure 41: Git add 32

Figure 42: Git commit 32

Figure 43: Git remote 32

Figure 44: Git push 32

Figure 45: Result of configure git 32

Figure 46: Setup port to deploy web on cloud 33

Figure 47: Login to Render by github account 33

Figure 48: Create a new Web Service 33

Figure 49: Deploy code from a git repository 33

Figure 50: Choose project to deploy 34

Figure 51: Name and configure the run command 34

Figure 52: Deploy to render successfully 34

Figure 53: Render Web on internet 35

Figure 54: Config router 35

Figure 55: All model in my project 35

Figure 56: All views in my project 36

Figure 57: UserModel in my project 36

Figure 58: Function register in my project 37

Figure 59: Function Login in my website 39

Figure 60: Router forgot password 40

Figure 61: Router reset password 41

Figure 62: Router handle upload file 42

Figure 63: Utils in my project 43

Figure 64: Function cash order in my website 46

Figure 65: Order by credit card 48

Figure 66: Use ajax to build function search 49

Figure 67: The router handles the search process 50

Figure 68: Function print_pdf in my website 51

Figure 69: Difficulty in dividing the layout when using hbs 53

Figure 70: Use view EJS for this project 54

Figure 71: Solution for choosing database 55

Figure 72: The main routers in my project 56

Figure 73: Callback hell in my project 58

Figure 74: Use async / await in my project 59

Figure 75: Example of how nodemon detects errors in my project 60

Figure 76: Example of code using try catch on my website 61

Figure 77: Mongoose warning error when deploying web to render 62

Figure 78: Set up IP address for cluster 62

Figure 79: Config connect with mongoDB 63

Figure 80: Outdated library warning 64

Figure 81: Install puppeteer library 64

Figure 82: Websites review Render service provider 77

Figure 83: Office 365 79

Figure 84: Use middleware to authorize the website 81

Figure 85: Use strong passwords for websites 82

A Introduction

We live in a modern society where everything is modern and innovative Every day, there is a lot of innovation, especially in technology When it comes to technology, we must admit that

it has permeated every aspect of our lives, from simple devices such as phones and computers

to complex programming applications Currently, digital transformation technology is gaining popular in a variety of disciplines, particularly e-commerce system While offline stores are progressively becoming outdated, online shops are an excellent solution for developing this model

In this assignment, I will demonstrate the design and process of building a fullstack toyStores website for ATN company, specifically how I design and apply the MVC pattern in nodejs, using the api for the project along with accompanying supporting technologies such as boostrap, ajax and jquery to build a complete website for users and deploy it on cloud render My website has two main interfaces, admin and customers, and I have authorized for them so that customers can go to the website to purchase and the administrator can receive data about orders as well

as perform other tasks, functions like add, edit, delete, send email, export orders , etc

Figure 1: Admin use-case diagram

In my website, admin can add, delete, update products and categories on the website,

in addition, censoring customer information is also very necessary Administrators can also add/edit user accounts and delete accounts and users that violate the terms Administrators can read customer feedback on products, email them to customers or delete them once read Admins can also approve and export orders as pdfs, view order details, or delete canceled or long-delivered orders

2.2 Customer use-case diagram

Figure 2: Customer use-case diagram

When accessing the website, customers can view products as well as search for products they want to buy Customers will not be able to access the shopping cart page

if they do not have an account in the system Therefore, customers can register, log in

to use the website, update their personal information, view information about items on the website and place an order, and can also delete products added to the cart Customers have 2 forms of payment: cash or credit card After placing an order, customers can view the orders they have purchased as well as their shipping process and can send feedback to the shop to evaluate the quality of the items

3 Website Screenshots:

3.1 Login and Register Users can log in or register to create an account Forgot password function so users can retrieve their password by entering the email registered on the system to reset the password

Figure 3: Login and Register page

Figure 4: Forgot-password and reset password

3.2 Interface admin

a Dashboard page

When the admin enters the website, the first interface will be the Dashbroad page, which will display the statistics of the entire website including: revenue, total products, total customers, total feedback, etc

Figure 5: Dashboard page

b Category management page

When the admin clicks on the category item on the slider, it will be redirected to the category management page Here they can add, edit or delete product categories at their discretion They can also search categories by name Below is the category page after successfully adding Lego:

Figure 6: Category management page

c Product management page

When the admin clicks on the product section here, there will be 2 options: add product and display product When they click on the add product option, they will be taken to a page to add or edit products Data when adding or editing products on the product add page will be displayed on the product display page On this page they can remove defective products or repair them The edit page is the same as the add page If the user wants to edit a product on the system, they will click the edit button on that product and the data will be returned to the add page

Figure 7: Add Product and Show Product page

d Order management page

When the admin clicks on orders, they are redirected to the order management page, where they

can view order details, export orders to pdf or delete old orders that have been shipped or

canceled When the admin clicks the Details button in the orders management page of any order,

the website will take you to the details page of that order

Figure 8: Show order and Detail order page

e Feedback management page

When the admin clicks on the feedback item, they will be redirected to the feedback management

page where they can see the customer feedback for the website, they can perform Mark Read,

Delete or Feedback operations If admin clicks on the feedback button of any feedback, it will be

redirected to the send Email page of the email with that feedback to send emails in response to

customers who have provided feedback

Figure 9: Show feedback and send email user contacted with shop

f User management page

When the admin clicks on the user section, they will be redirected to the user management page, where they can add accounts, edit user rights as well as delete violated user accounts in the system The admin account cannot be deleted

Figure 10: Show user and add/edit user page

3.3 Interface Customer

a Home page

When customers log in successfully, they will go to the home page, where they will be able to

perform all the functions of the customers page

Figure 11: Home page

b Profile

This profile page allows customers to update their account information:

Figure 12: Profile Page

When users select any product on the products page, they will be redirected to that product's detail page Here they can see details, add to cart, add to love, comment product, reply comment

Figure 14: For example, the product detail page of a product in shop

d Favorite Product

After a user clicks on the add to love button on the product detail page of any product, that product will be added to that user's favorites Users can find this page by clicking account and selecting favorite to go to the page This will contain all the products that the user has selected They can click to buy or cancel their favorites at will

Figure 15:Favorite product page

e Cart Page

When people click on the cart icon on the navbar, they will be redirected to the checkout page, where they can delete or edit the products they have previously selected, then choose a payment method by cash or credit card

Figure 16: Cart Page

f Order Page

Once users have placed their order, they can go to the ordering section of the navigation bar to see the progress of their order This page contains all the order information that users have placed on the shop, where they can cancel or delete previously delivered orders

Figure 17: Order page

g Contact Page

When the user clicks on the contact item on the navbar, it will be redirected to the contact page where the user can enter information to contact the shop, the data will be displayed on the feedback management page in the admin interface

Figure 18: Contact page

h Footer in interface customer

This is a common footer to display for all pages in the customer interface

Figure 19: Footer in interface customer

i Some other functions in my website

In addition to the basic functions like CRUD, search, sort I mentioned above My website also has some unique functions as follows:

• Integrate AI chat bot:

I used google dialogFlow's API to integrate into my website and train it, helping my website to

automatically answer questions from users

Figure 20: Function chat automatically

• Feature to export invoices to pdf :

I use Puppeteer, a library for Node.js developed by the Google Chrome team This library provides an API for controlling Chrome or Chromium browsers through JavaScript source code It helps me export orders

to pdf files When admin clicks on the download icon in any order in the order section, it will automatically download the information of that order in pdf format

Figure 21: Order exported by pdf

• Statistics function for the total bet amount of a user:

Continuing with the order section, the admin can type in the email name of the user who

purchased the product from the shop to find statistics on the amount of money they ordered the product from the shop

Figure 22: Statistics on the amount of all orders from a user

• The function automatically sends invoices to email upon payment

I use Nodemailer, a library for Node.js used for sending emails This library simplifies the process of creating and sending emails through JavaScript source code in a Node.js

environment I configured the email server parameters (SMTP server), authentication

information, email content, and many other options to customize email delivery according to the needs of the website When the user successfully checks out, the order will be sent to the email notifying them of successful payment

Figure 23: Email bills

• Visa card payment function

I used Stripe, a widely used online payment service to process payments over the internet It provides a series of APIs and tools for developers of my app and website payment solutions If the user selects the payment method card, the cart page will be redirected to the storm page, where the user can enter the visa card to pay for the product

Figure 24:Use stripe for payment

• Function Asynchronous search

Like other e-commerce sites, my website also has a product search function without having to reload the page, often called "Ajax search" or "asynchronous search" I used Ajax (Asynchronous JavaScript and XML) technology to send and receive data from the server without having to refresh or reload the entire website Ajax allows my website to interact with the server asynchronously, meaning it can send requests and receive data without shutting down or reloading the page This creates a smoother user experience and helps reduce wait times when searching or interacting with website content

Figure 25: Example about function asynchronous search in my website

• Friendly notification interface

I use SweetAlert, a JavaScript library that helps create alerts that are more effective and intuitively interactive than the browser's default notifications Help users have a better

experience on my website:

Figure 26: Example about some sweetAlert notifications are used on the website

In addition to sweetAlert, I also use session alerts in Node.js to catch input errors during user input:

Figure 27: Example about session alert in my website

II Code implement and deploy process

1 Tools and framework

• The interface is simple, easy to use and can be flexibly customized to my personal needs

• It supports many programming languages and frameworks, not limited to Node.js but also includes HTML, CSS, JavaScript and many others such as PHP, Java, Python

• It has built-in integration with Git, allowing me to manage source code and perform Git operations conveniently

• Additionally, it offers a powerful IntelliSense feature that speeds up my programming process by providing smart suggestions, code completion, and error checking right as I type the code

• It has a built-in terminal, which allows me to run command lines without switching

to a separate terminal window

Figure 28: Visual studio code 1.2 Framework

For this project, I use the nodeJS framework EpressJS It simplifies and speeds up web application development using Node.js, by providing useful features and

tools Express.js is not part of official Node.js, but it is a popular and powerful

framework built on top of Node.js The reason I chose it is because:

• It has a simple and easy-to-understand syntax, helping me reduce learning

time and deploy projects faster

• Express's powerful middleware system allows me to add middleware functions and processing (like permissions, etc) easily, helping to manage web

application logic effectively

• It provides an easy way to define and manage application routes, giving me good control over request processing

• In this project, I used express's main template engine, EJS, to implement views, helping me easily create beautiful user interfaces and maintain my code

• It is a popular choice for building RESTful APIs, with the ability to handle HTTP methods such as GET, POST, PUT, DELETE

• It doesn't force me to use a specific database, which creates flexibility in

combining with different databases like MongoDB, MySQL, PostgreSQL

1.3 Source code Manager

I use github to store and manage my source code:

Figure 29: Github 1.4 Data server

In this project, I will utilize MongoDB as my database for the following reasons:

• It provides support for online databases, where you simply need to create a MongoDB account and Mongo Atlas, then obtain a connection link

• It offers robust security measures

Figure 30: MongoDB compass 1.5 Cloud computing module

In the final stage, I will use the dump to deploy the project on the internet Because:

• Render provides an easy-to-use interface that helped me deploy the website quickly and easily without needing too much technical knowledge

• It provides a high-performance deployment environment with a combination of optimized services and technologies, making my website run smoothly and quickly

• It integrates many backend tools and services, including databases, environment variable management, and many other useful features, helping me manage the website easily

• It also ensures the security of my project with protections and regular updates

Figure 31: Render

2 Deploy

2.1 Config framework express

Express is a Node.js framework so the first step is to download and install Node.js

I installed nodeJS version 20 to make this project

Figure 32: Download Nodejs After completing the initial phase, the next step involves creating the project and using terminal commands to install Express I initialize the express project along with the template engine EJS in VSCode's terminal using the following command: “npx express-generator view=ejs”

Figure 33: Initial express project 2.2 Config and connect with mongodb

The subsequent step involves establishing a connection to the database For this project, I opted to use MongoDB Atlas as it aligns more effectively with the project's requirements compared to setting up MongoDB locally Consequently, I set up a MongoDB Atlas account Step 1: Create new cluster option: MO (FREE)

Figure 34: New cluster in mongdb

Step 2: Security Quickstart: enter manual username & password or use generated info => Create User

Figure 35: Security Quickstart

Step 3: Select: My Local Environment: Add My Current IP Address, IP Address: 0.0.0.0 (anywhere) => Add Entry =>Finish & Close

Figure 36: Select IP to connect

Step 4: Connect to database you created

Figure 37: Connect cluster

Step 5: Copy the encrypted connection string to the mongoDB compass connection

Figure 38: Copy string to connect mongoDB compass

Step 6: Connect to mongoDB compass

Figure 39: Connect mongoDB compass

2.3 Config git and upload file to github

To register a project as a local Git repository the first thing I need to do is perform the following command at my project

Figure 40: Git init

This will create a git folder at my project root and will allow me to start using Git in that repository Add the files in my new local repository This stages them for the first commit

Figure 41: Git add

Commit the files that I've staged in my local repository

Figure 42: Git commit

At the top of my GitHub repository's Quick Setup page, click to copy the remote repository URL In the Command prompt, add the URL for the remote repository where

my local repository will be pushed

Figure 43: Git remote

Push the changes in my local repository to GitHub if there is a remote branch called main

Figure 44: Git push

Figure 45: Result of configure git

2.4 Deploy web on Render from github

In preparation for deploying the project to the cloud, considering that your web application will be accessible on the internet, it's necessary to modify the PORT setting to 'process.env.PORT' in the 'app.listen' function

Figure 46: Setup port to deploy web on cloud

Then, log in to render with your github account:

Figure 47: Login to Render by github account

After logging in, I will go to the render home page I will select new a web service project:

Figure 48: Create a new Web Service

Next, choose to build and deploy from the git repository to bring the web to the cloud

Figure 49: Deploy code from a git repository

Next, choose project to deploy

Figure 50: Choose project to deploy

Then proceed to name the website, and start command is node app

Figure 51: Name and configure the run command

Then click create Web Service and wait result:

Figure 52: Deploy to render successfully

After push or connect successful to your project You can click "open app" and see your project

Figure 53: Render Web on internet

3 Code Implement

First is the path configuration in app.js I divided it into small routers to easily develop my project

Figure 54: Config router

The next step is to create a model to process the data:

Figure 55: All model in my project

Next, create a view to display the website for users to use I use the template engine EJS and divide the view into 3 main folders: auth, frontend and admin

Figure 56: All views in my project

I will go into detail about specific functions in my project:

a Register

To perform this auth function, I must first have a UserModel model so I can save data when users register for an account to access the website

Figure 57: UserModel in my project

Next is processing in the router, I will write a register function for users to register for

an account Before creating the registration router, I will have to create some extra functions first I will create the generateToken() function, which will generate a random 20-character crypto code

Next is the sendVerificationEmail function, this function sends mail to the person to verify the account I use the nodemailer library to do this

After the configuration is complete, I will start performing router registration

Figure 58: Function register in my project

To register an account, I first have to check if the user account's email already exists in the system If not, please register During registration, I validated input data like a valid email must contain the @ character using a validator library or a username containing only alphanumeric characters using the official form I use regular expressions to validate names and passwords when users sign up I want the username to contain only letters (not case sensitive) and no numbers As for the password, I want to create a strong password layer before the data is encrypted to enter the database I want the password to have at least 9 characters, including numbers, uppercase letters, lowercase letters and a special character

I use bcrypt to encrypt passwords, const saltRounds = 10; This is the number of salting rounds, usually chosen from 10-12 to encrypt passwords before pushing data into the database generateVerificationToken() will receive the token and send a verification message via the user's mail to verify the password using the sendVerificationEmail function After the user clicks on verification in the email, the account will be successfully registered

b Login:

After the user has an account, the next step is to log in In this function, I will also check whether the user's email already exists on the system or not, if not, it will print an error message If so, then compare the password If the password is correct, then divide it into two cases

• In case one: user has already verified, the website will create a cookie token to access the home page I use json web token to do this

• Case two: if the user has not verified their account, they will be redirected to a notification that they must verify before they can log in Just like registering, an email will be sent to their email to verify their account

Figure 59: Function Login in my website

c Forgot and reset password

First, I would have middlware check if the user is logged in or not If they are already logged in, they will be redirected elsewhere

If there is a message stored in the session (for example, from a previous request), it is retrieved and then deleted from the session Show the "forgot password" page to the user, along with any messages available from the session

Figure 60: Router forgot password

Router post performs the following process: collects email from the form that the user entered Then search the database to determine if there is a user with that email If the email is invalid, an error message will be printed If valid, create an authentication token and update the emailToken code in the database Then send an email with a link to reset the password to the user Set up success notifications and redirect users to the forgotten password page Handling if the user is not found will print an error message and redirect the user to the forgot password page

After the user receives the email, and clicks on the password reset link here, they will be redirected to the password reset page