Karthik J 2001107

EX.NO: 4.1 Installation of MongoDB Atlas

Date: 03. 01. 2023

AIM:
To install MongoDB Atlas in windows.

DESCRIPTION:
MongoDB has a cloud service also known as MongoDB Atlas. It is a cloud base database that
allows us to host up our database and serve us whenever we need it. It removes all our effort to
host our database on our local devices and can serve us anytime.
Features of MongoDB Atlas:
• Strong security
• More precise analysis of data
• Easy Scalability
• Technical support

PROCEDURE:
Step 1: Go to the MongoDB website and signup. Enter your credentials and click on create
account and then verify the account or just click sign up with google and select the Id from
which you want to register.
Karthik J 2001107

Step 2: Now select the Shared option and click on Create for free usage.

Step 3: Now select cloud provider AWS or Google cloud for free hosting and then select the
region in which it should be hosted. And in the Cluster tier select M0 Sandbox for the free
environment. And If you want you can rename the cluster. It will take 4-5 minutes to set up the
environment.
Karthik J 2001107

Step 4: Create a username and password then select database access to atlasAdmin and
network access to allow access to anywhere. That will be the username and password through
which the user can access the database given to who do you give access.

Step 5: Select Connect and then select connect with the MongoDB Shell then go to I have
MongoDB shell installed. Select the node version from there. And after that run the command
in the command line which is given. Then enter the password which the user has set earlier
with the username and password.
Karthik J 2001107

Step 6: Go to Connect then Connect your application select your node version. Now copy
the link given and paste it into your application where you connect MongoDB. And replace
<password> with your password .

RESULT:
Thus, the connection between MongoDB Shell and MongoDB atlas has been made
successfully.
Karthik J 2001107

EX.NO: 4.2 Running a MongoDB cluster in MongoDB Atlas

Date: 10. 01. 2023

AIM:
To run MongoDB cluster in MongoDB Atlas.
DESCRIPTION:

Setting Up a MongoDB Cluster on Atlas

Every application is different, and MongoDB Atlas provides you with numerous ways to set up
your cluster to suit your specific needs. Some particular configurations need to be thought of
ahead of time, while you can change others on the fly. Using these settings, you will put in place
all the best practices for Atlas in production. In this section, you will learn more about the
various configurations that you can adjust on your initial cluster creation.

Deployment Type

The deployment type is the first option you will need to pick. Based on what you decide for the
type of instance, the other configuration options will vary.

• Serverless: This type of cluster is the most flexible one from a pricing point of view. It’s
meant for applications that have infrequent or variable traffic. The possible
configurations are kept at the bare minimum.
• Dedicated: A dedicated cluster is meant for production loads. It can support a wide range
of server sizes as well as advanced configurations. You should choose this for your
production environment.
• Shared: These clusters are meant to be a way to explore MongoDB. They can provide
you with a sandbox where you can try out MongoDB for free. The server configurations
available are somewhat limited.

You can find more information about the different database deployment types in
the documentation.

Global Cluster Configuration

Karthik J 2001107

If you need multiple sharded clusters with read and write operations in specific locations, you
will need to enable Global Cluster Configuration. From here, you can choose exactly where you
want each of your clusters and configure the mappings between the user country and the server
they will use to access the data.

Cloud Provider and Region

No matter which deployment type you picked, you will need to choose the cloud provider, along
with the specific region in which you want to deploy your cluster. You can instantiate MongoDB
clusters on any of the three major cloud providers. If you want to ensure even better availability,
you can deploy each node of your cluster on different regions or even different clouds. To do so,
you will need to enable the Multi-Cloud, Multi-Region & Workload Isolation option. From here,
you will be able to configure the number and types of nodes (electable, read-only, or analytical)
that will be part of your replica set.

Cluster Tier

Now that you’ve picked a region and cloud provider, you will need to choose which tier you
want to use for the nodes in your cluster. This configuration will have the most significant
impact on the pricing of your cluster. There is a wide range of options available, and you can
further tweak each of them. Take into consideration the amount of CPU and RAM you will need.
Your resource needs will help you find the right tier for your cluster.

You can then further tweak the cluster configuration by adjusting the storage size, toggling the
auto-scaling options and the IOPS that you will need. On AWS higher tiers (M40+), you will
also be able to choose the class of servers (low-CPU, general, or local NVMe SSD), which will
also impact the number of CPUs, RAM, and storage capacity.

PROCEDURE:
Step-1: Create a cluster in MongDO Atlas by signing in to it.
Step-2: Connect the mongoDB Atlas with mongDB shell using the provided connection
string.
Step-3: After making the connection in the shell create a database in the cluster.
Step-4: Create collections in the database.
Step-5: Insert and retrieve document from the collections.
Karthik J 2001107

RESULT:
Thus, the MongoDB cluster in created in the MongoDB Atlas and successfully connected
with the MongoDB Shell.
Karthik J 2001107

EX.NO: 5 Communicating Components Through Binding in

AngularJS
Date: 24. 01. 2023

AIM:
To create and communicate between components in AngularJS.
PROCEDURE:
Step-1: Define a model name using ng-model directive
Step-2: Create textboxes to add name in it.
Step-3: Add a controller to display the names entered names.

PROGRAM:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

</body>
</html>
Karthik J 2001107

OUTPUT:

RESULT:
Thus, the creation of communication between components in AngularJs has been
completed and executed successfully.
Karthik J 2001107

EX.NO: 6 HTTP Services in AngularJS

Date: 31. 01. 2023

AIM:
To use HTTP services in AngularJS.
PROCEDURE:
Step-1: Create a html page
Step-2: Include the angular js cdn
Step-3: create a app variable using module().
Step-4: Use $http.get() to receive the data from the server. On successful retrieval display
the data. Else display the error.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app ="myApp">
<h1>AngularJS $http Demo: </h1>
<div>
<div ng-controller="myController">
Response Data: {{data}} <br />
Error: {{error}}
</div>
</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller("myController", function ($scope, $http) {

var onSuccess = function (data, status, headers, config) {

$scope.data = data;
};

var onError = function (data, status, headers, config) {

Karthik J 2001107

$scope.error = status;
}

var promise = $http.get("/demo/getdata");

promise.success(onSuccess);
promise.error(onError);

});
</script>
</body>
</html>
OUTPUT:

RESULT:
Thus, the http service has been successfully used in the AngularJS and executed
successfully.
Karthik J 2001107

EX.NO: 7 Installation of Node.JS

Date: 07. 02. 2023

AIM:
To install node.jS in windows
PROCEDURE:
What is Node js?
Node.js is an open source, cross-platform runtime environment and library that is
used for running web applications outside the client’s browser.
It is used for server-side programming, and primarily deployed for non-blocking, event-driven
servers, such as traditional web sites and back-end API services, but was originally designed
with real-time, push-based architectures in mind. Every browser has its own version of a JS
engine, and node.js is built on Google
Chrome’s V8 JavaScript engine. Sounds a bit complicated, right?
In simple terms, what this means is that entire sites can be run using a unified ‘stack’, which
makes development and maintenance quick and easy, allowing you to focus on meeting the
business goals of the project.

The fact that Node.js is open source means that it is free to use and constantly being
tweaked and improved by a global community of developers.
An important thing to understand about Node.js is that it is actually neither a framework or a
library - as with traditional application software -, but a runtime environment.
A runtime environment (sometimes shortened to RTE) contains Web API’s that a developer can
access to build a code, and a JavaScript engine that parses that code. This makes it lightweight,
flexible and easy to deploy, all features that will help to optimize and speed up your application
project.

What is NPM?
NPM is a package manager for Node. js packages, or modules if you like.
www.npmjs.com hosts thousands of free packages to download and use. The NPM program is
installed on your computer when you install Node.js. npm install downloads a package and it's
dependencies. npm install can be run with or without arguments. When run without arguments,
npm install downloads dependencies defined in a package. json file and generates a node_modules
folder with the installed modules.
Karthik J 2001107

STEPS TO INSTALL
NODE:
Step-1: Download the installer
The first step to install Node.js on windows is to download the installer. Visit the
official Node.js website i.e) https://nodejs.org/en/download/ and download the .msi file according
to your system environment (32-bit & 64-bit). An MSI installer will be downloaded on your
system.

Step-2: Running the Node.js installer.

Step 3: Verify that Node.js was properly installed or not.

To check that node.js was completely installed on your system or not, you can run
the following command in your command prompt or Windows Powershell and test it:
C:\Users\Admin> node -v
Karthik J 2001107

Step 4: Updating the Local npm version.

The final step in node.js installed is the updation of your local npm version(if
required) – the package manager that comes bundled with Node.js.You can run the following
command, to quickly update the npm

npm install npm –global // Updates the ‘CLI’ client

Result:
Thus Node.JS has been installed successfully.
Karthik J 2001107

EX.NO: 8.1 Module Creation in Node.js

Date: 14. 02. 2023

Aim:
To learn and create modules in Node.js
What is a Module in Node.js?

Consider modules to be the same as JavaScript libraries.

A set of functions you want to include in your application.

Built-in Modules

Node.js has a set of built-in modules which you can use without any further installation.

Look at our Built-in Modules Reference for a complete list of modules.

PROCEDURE

To include a module, use the require() function with the name of the module:
var http = require('http');

Now your application has access to the HTTP module, and is able to create a server:
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);
Create Your Own Modules

You can create your own modules, and easily include them in your applications.

The following example creates a module that returns a date and time object:
Create a module that returns the current date and time:
exports.myDateTime = function () {
return Date();
};

Use the exports keyword to make properties and methods available outside the module file.
Karthik J 2001107

Save the code above in a file called "myfirstmodule.js"

Include Your Own Module

Now you can include and use the module in any of your Node.js files.
Use the module "myfirstmodule" in a Node.js file:

PROGRAM:
myModule.js
exports.myDateTime = function () {
return Date();
};

myFirstModule.js
var http = require('http');
var dt = require('./myModule');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/html'});
res.write("The date and time are currently: " + dt.myDateTime());
res.end();
}).listen(8080);

OUTPUT:

RESULT:

Thus the module has been created and used successfully.

Karthik J 2001107

EX.NO: 8.2 Interaction with file system in Node.js

Date: 21. 02. 2023

AIM:
To create a node js application to interact with the file system and serve a webpage from
a file.
ALGORITHM:
1) START
2 )First install all the necessary packages such as express mongoose using “npm – I”.
3) Create a main file to be starting point of the projecct and other sub files are connected
to the main file.
4) Using express() function create a route in all files.
5) Using app.listen() we can handle the port of which it is running.
6) Create a model for every document to be stored in the database using
mongoose.schema.
7 )Inside the model give the required fields and type of data.
8) Now create function to get and post request to the database or to the frontend
application.
9)END

PROCEDURE:
File Paths
Managing the file system means we have to deal with relative paths, absolute paths,
resolving file paths by providing file names, joining file paths, etc. We can get these using the
path module. The path module takes care of all this irrespective of the operating system such as
windows, Linux, Mac, etc. Here is a simple example of using the path module.

Joining Paths
You can pass as many arguments as you want to the join method and this will create the
full path depending on the platform. In the above file, we have used the join method to create
paths at line numbers 4 and 6.
Karthik J 2001107

Relative Paths
You can find the relative path between two absolute paths using the relative method. The
first argument is the from the path and the second argument is the to path and the result would be
a relative path from the first argument to the second argument.

Resolving Paths
This accepts multiple string arguments and resolves the path and prints the whole path.
This is like going to the location and printing the current working directory. For example, in the
above example, we have given three string arguments folder1, folder2, folder3 and it prints the
complete path.

Parsing Paths
If you want to deconstruct the path and return the object that contains a directory, file
name, and extension, etc. You should use the parse function from the path module.

PROGRAM:

File Paths1:

const { join, relative, resolve, parse } = require('path');

console.log('File ', join(__dirname, 'files', 'sample.txt'));
console.log('File ', join(__dirname, 'files', 'files2', 'files3', 'files4', 'sample.txt'));
// Finding the relative paths between Absolute Paths
console.log('Relative Path ', relative('/Users/bhargavbachina/Projects/nodejs/nodejs-
filesystem/file1.js', '/Users/bhargavbachina/Projects/nodejs/nodejs-file-system/files/sample1.txt'))
// Resolving the Path
console.log('Resolving the path', resolve('folder1', 'folder2', 'folder3'));
// Parsing the patsqa0h
console.log('Parsing the path', parse('/Users/bhargavbachina/Projects/nodejs/nodejs-file-
system/file1.js'));

File Paths2:

const { join } =
require('path'); const
fs = require('fs');
fs.readFile(join(__dirname, '../files/sample1.txt'), {encoding: 'utf8'}, (err,
data) => { if(err) {
console.log('Error ', err)
}
Karthik J 2001107

console.log(data);
})

PROMISED BASED:

const { join } =
require('path'); const
fs =
require('fs').promise
s;
const fileContent = fs.readFile(join(__dirname, '../files/sample1.txt'), {encoding:
'utf8'}); fileContent
.then(data => console.log(data))
.catch(err => console.log('Error ', err))

WRITING FILES:

const { join } = require('path');

const { readFile, writeFile } = require('fs');
readFile(join(__dirname, '../files/sample1.txt'), {encoding: 'utf8'}, (err,
data) => { if(err) {

console.log('Er
ror ', err) }
writeFile(join(
__dirname,
'../out/out1.txt')
,
data.toUpperCa
se(), (err) => {
if(err) {
console.log('Error:::', err);
}
});
})
Karthik J 2001107

STREAM BASED:

const { join } =
require('path'); const
fs = require('fs');
const readableStream = fs.createReadStream(join(__dirname, '../files/sample1.txt'),
{encoding: 'utf8'}); readableStream.on('data', (data) => { console.log('Data Received
', data);
}) readableStream.on('end', () =>
console.log("No more data!!!"));
readableStream.on('error', (err) =>
console.log('Error ', err));

OUTPUT:
Karthik J 2001107

RESULT:

Interaction with the file system and serving a webpage from a file has been successfully
executed.
Karthik J 2001107

EX.NO: 9 Installation of Express JS

Date: 28. 02. 2023

AIM:
To install Express JS in windows.
PROCEDURE:
Step-1: Install the express framework globally to create web application using Node
terminal. Use the following command to install express framework globally.

npm install -g express

Step-2: Use the following command to install express

npm install express –save

Karthik J 2001107

The above command install express in node_module directory and

create a directory named express inside the node_module. You should install some
other important modules along with express. Following is the list:

o body-parser: This is a node.js middleware for handling JSON, Raw, Text and
URL encoded form data.
o cookie-parser: It is used to parse Cookie header and populate req.cookies
with an object keyed by the cookie names.
o multer: This is a node.js middleware for handling multipart/form-data.

npm install body-parser –save

Karthik J 2001107

npm install cookie-parser –save

npm install multer –save

Step-3: Create a simple express which starts a server and listen on a local port. It only
responds to homepage. For every other path, it will respond with a 404 Not Found error.
Karthik J 2001107

PROGRAM:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Mina San, Konnichiwa!');
})
var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})

OUTPUT:

RESULT:
Thus, the installation of Express JS has been completed successfully.
Karthik J 2001107

EX.NO: 10. 1 ExpressJS Middleware functions

Date: 07. 03. 2023

AIM:
To understand the concepts of ExpressJS middleware and to implement them.

DESCRIPTION:
Express.js Middleware

Express.js Middleware are different types of functions that are invoked by the Express.js
routing layer before the final request handler. As the name specified, Middleware appears in the
middle between an initial request and final intended route. In stack, middleware functions are
always invoked in the order in which they are added.

Middleware is commonly used to perform tasks like body parsing for URL-encoded or
JSON requests, cookie parsing for basic cookie handling, or even building JavaScript modules on
the fly.

What is a Middleware function

Middleware functions are the functions that access to the request and response object (req,
res) in request-response cycle.

A middleware function can perform the following tasks:

o It can execute any code.

o It can make changes to the request and the response objects.
o It can end the request-response cycle.
o It can call the next middleware function in the stack.

Express.js Middleware
Following is a list of possibly used middleware in Express.js app:

o Application-level middleware
o Router-level middleware
o Error-handling middleware
o Built-in middleware
o Third-party middleware
Karthik J 2001107

PROGRAM:
var express = require('express');
var app = express();

app.get('/', function(req, res) {

res.send('</h1>Mina San, Konnichiwa!</h1>');
});
app.get('/help', function(req, res) {
res.send('<h1>We are proud Weebs</h1>');
});
var server = app.listen(8000, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
OUTPUT:

RESULT:
Thus, the ExpressJS middleware functions have been implemented successfully.
Karthik J 2001107

EX.NO: 10. 2 ExpressJS Middleware functions

Date: 14. 03. 2023

AIM:
To understand the concepts of Express.JS Scaffold and to implement them.

DESCRIPTION:
What is scaffolding

Scaffolding is a technique that is supported by some MVC frameworks.

It is mainly supported by the following frameworks:

Ruby on Rails,OutSystems Platform, Express Framework, Play framework, Django,

MonoRail, Brail, Symfony, Laravel, CodeIgniter, Yii, CakePHP, Phalcon PHP, Model-
Glue, PRADO, Grails, Catalyst, Seam Framework, Spring Roo, ASP.NET etc.

Scaffolding facilitates the programmers to specify how the application data may be used.
This specification is used by the frameworks with predefined code templates, to generate the final
code that the application can use for CRUD operations (create, read, update and delete database
entries).

Express.js Scaffold

An Express.js scaffold supports candy and more web projects based on Node.js.

Install scaffold

Execute the following command to install scaffold.

Karthik J 2001107

npm install express-scaffold

It will take a few seconds and the screen will look like this:

After this step, execute the following command to install express generator:

npm install -g express-generator

PROCEDURE:

Step-1: Create a directory name myApp. Create a file name app.js in the myApp directory
having the below mentioned program.
Step-2: Open Node.js command prompt, go to myApp and run init command
Step-3: Fill the and entries and press enter
Step-4: It will create a package.json file in myApp folder and the data is show in JSON
format.
Karthik J 2001107

PROGRAM:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Welcome to JavaTpoint!');
});
app.listen(8000, function () {
console.log('Example app listening on port 8000!');
});

OUTPUT:
Karthik J 2001107

RESULT:

Thus, the ExpressJS Scaffold has been successfully implemented.

Karthik J 2001107

Web Application using TypeScript and ASP.Net

Date: 21. 03. 2023

Aim:
To create a web application using typescript and ASP.Net

Install ASP.NET Core and TypeScript

First, install ASP.NET Core if you need it. This quick-start guide requires Visual Studio 2015 or
2017.

Next, if your version of Visual Studio does not already have the latest TypeScript, you can install
it.

Create a new project

1. Choose File
2. Choose New Project (Ctrl + Shift + N)
3. Search for .NET Core in the project search bar
4. Select ASP.NET Core Web Application and press the Next button
Karthik J 2001107

5. Name your project and solution. After select the Create button

6. In the last window, select the Empty template and press the Create button
Karthik J 2001107

Run the application and make sure that it works.

Set up the server

Open Dependencies > Manage NuGet Packages > Browse. Search and
install Microsoft.AspNetCore.StaticFiles and Microsoft.TypeScript.MSBuild:

Open up your Startup.cs file and edit your Configure function to look like this:

public void Configure(IApplicationBuilder app, IHostEnvironment env)

{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseDefaultFiles();
Karthik J 2001107

app.UseStaticFiles();
}

You may need to restart VS for the red squiggly lines

below UseDefaultFiles and UseStaticFiles to disappear.

Add TypeScript

Next we will add a new folder and call it scripts.

Karthik J 2001107

Add TypeScript code

Right click on scripts and click New Item. Then choose TypeScript File and name the
file app.ts

Add example code

Add the following code to the app.ts file.

function sayHello() {
const compiler = (document.getElementById("compiler") as HTMLInputElement)
.value;
const framework = (document.getElementById("framework") as HTMLInputElement)
.value;
return `Hello from ${compiler} and ${framework}!`;
}

Set up the build

Configure the TypeScript compiler

First we need to tell TypeScript how to build. Right click on scripts and click New Item. Then
choose TypeScript Configuration File and use the default name of tsconfig.json
Karthik J 2001107

Replace the contents of the tsconfig.json file with:

{
"compilerOptions": {
"noEmitOnError": true,
"noImplicitAny": true,
"sourceMap": true,
"target": "es6"
},
"files": ["./app.ts"],
"compileOnSave": true
}

• noEmitOnError : Do not emit outputs if any errors were reported.

• noImplicitAny : Raise error on expressions and declarations with an implied any type.
• sourceMap : Generates corresponding .map file.
• target : Specify ECMAScript target version.

Note: "ESNext" targets latest supported

Karthik J 2001107

noImplicitAny is good idea whenever you’re writing new code — you can make sure that you
don’t write any untyped code by mistake. "compileOnSave" makes it easy to update your code in
a running web app.

Set up NPM

We need to setup NPM so that JavaScript packages can be downloaded. Right click on the
project and select New Item. Then choose NPM Configuration File and use the default name
of package.json.

Inside the "devDependencies" section of the package.json file, add gulp and del

"devDependencies": {
"gulp": "4.0.2",
"del": "5.1.0"
}

Visual Studio should start installing gulp and del as soon as you save the file. If not, right-click
package.json and then Restore Packages.

After you should see an npm folder in your solution explorer

Karthik J 2001107

Set up gulp

Right click on the project and click New Item. Then choose JavaScript File and use the name
of gulpfile.js

/// <binding AfterBuild='default' Clean='clean' />

/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Karthik J 2001107

Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007

*/
var gulp = require("gulp");
var del = require("del");
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"],
};
gulp.task("clean", function () {
return del(["wwwroot/scripts/**/*"]);
});
gulp.task("default", function (done) {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
done();
});

The first line tells Visual Studio to run the task ‘default’ after the build finishes. It will also run
the ‘clean’ task when you ask Visual Studio to clean the build.

Now right-click on gulpfile.js and click Task Runner Explorer.

If ‘default’ and ‘clean’ tasks don’t show up, refresh the explorer:
Karthik J 2001107

Write a HTML page

Right click on the wwwroot folder (if you don’t see the folder try building the project) and add a
New Item named index.html inside. Use the following code for index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="scripts/app.js"></script>
<title></title>
</head>
<body>
<div id="message"></div>
<div>
Compiler: <input id="compiler" value="TypeScript"
onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
Framework: <input id="framework" value="ASP.NET"
onkeyup="document.getElementById('message').innerText = sayHello()" />
</div>
</body>
Karthik J 2001107

</html>

Test

1. Run the project

2. As you type on the boxes you should see the message appear/change!

Debug

1. In Edge, press F12 and click the Debugger tab.

2. Look in the first localhost folder, then scripts/app.ts
3. Put a breakpoint on the line with return.
4. Type in the boxes and confirm that the breakpoint hits in TypeScript code and that
inspection works correctly.

Congrats you’ve built your own .NET Core project with a TypeScript frontend.

Result:
Thus, the webpage has been created successfully using TypeScript and ASP.Net.