独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Week 8

Yes we completed the SQL part in the previous week. Today we start the .NET core. We will explore more about this in this week.

(10/10/2022)

ASP.NET Core MVC is Microsoft’s Web Application development framework that is in great demand today. It is based on Model-View-Controller (MVC) architecture. It is used to integrate backend files with the frontend. Current version is .NET 6.0 version.

ASP.NET Framework → 2002 → only runs in windows
ASP.NET MVC → 2007 → runs only in windows and uses IIS for hosting. The best part of this MVC is we are doing the business and Design parts separately
ASP.NET Core → 2015 → This is best, because cross platform is introduced. It can be hosted on a number of web servers like IIS, Kestrel, Nginx and Apache.

MVC: We can have any number of MVC’s
M- Model → It contain the data for the application
V- View → Design part is given over here
C- Controller → Delete, insert, update are all done over here. It is like a brain of the action of MVC.

In this we are manually add a database and tables in SQL.

Creation of DAF:

On the right side we can observe some of the files being created. Now go through those files one by one.

So like this we create a DFA Core means Database First Approach. Then in the session we try to understand the coding part by part which is there in the different files. Somewhat we understood but from practice only we are able to understand perfectly. Actually TranieeController.cs is controlling all the pages. i.e. index, edit, create etc. But the outlook[navbar, footer etc.] of a page is given in the index.cshtml.

Tomorrow we see some more concepts in ASP like validation, How to use toasts[sweet alerts], Font awesome etc.

(11/10/2022)

Today’s session we learnt about the Toast notification and Validation in the previously created application. Then we look into the Web API with ASP.NET Core 6.0.

We write the validation coding in the Trainee.cs file. Which is there in the Models file.

Pallavi gave a task about the previous set of ASP .NET CORE Data First Approach concepts; it includes crud operation, Toast notification and also about the Validation. So here I just present the screenshot of that.

Till now in angular we use a json file as our backend. Now we look into the actual backend i.e. API. using ASP .NET. API does not have Views in it. It just has the Controller and Model. Instead of a normal controller we use web.API controller.
We can create a web API by two ways
1. Web API with MVC
2. Stand alone web API
Now we look into the Stand alone web API

It is actually a connection between our angular app and database. Using this project we can create a connection. So, Now we look into the creation of ASP .NET Core web API project in step by step

(12/10/2022)

Today we learnt about the code first approach in the database. Encryption and also about testing.

In this actually we create a database in the backend only. Like we are not adding a database in SQL and integrating that with our ASP. Here we create a database in the ASP and migrate it with SQL.

Creation of CFA:

Encryption means we convert some data to unreadable format. In this session we take a password as data in the same above example i.e. in the code first approach and we learnt how to do the encryption. When we do the encryption, the password goes to binary format so that other people cannot understand that. If we want our data to be in a readable format then we should decrypt that. In ASP we create a Utilities folder and create a class and name it as EncryptDecrypt. We get more codes online for encrypt and decrypt. We can just copy paste that in the EncryptDecrypt class. We use this particular code.

Then we have to do some modification in the TraineeController.cs

Unit Testing is the process of verifying that individual units of code work as intended. In this we see how the testing is done in the .NET i.e. using C#. We mainly focus on unit testing here. Unit testing is an essential part of the software development process. If this agile process is followed, this is a key part of that. We see practically how the testing is done.

Application which I created using Code First Approach.

(13/10/2022)

Today we learnt about Microservices and also we started the basics in React.

Take an example of an application which is very famous. If it has an API which is connected to single services then it may lead to crashes of that service. To overcome this, services are divided into different small services that is Microservices which act as a single unit when we connect all but all the microservices are independent to each other.

In the above diagram we can see the one random not famous website called ABC. Which has very less network connected to that. So we can manage that easily. This kind of architecture is known as Monolithic architecture. It means all the services or business functionalities would be tightly coupled within the single Solution. But if we take an example of amazon which is a famous application. So there is a chance of that amazon server crashing. For that reason all the APIs are connected to the micro service which is represented in the circle. We assume that as a micro service which has a different port number. That micro services are next connected to the main server so that we can avoid the crashing of a server. In this we can differentiate which is running using different backend like Register API has a SQL as a backend, Orders has an oracle as a backend. In this we can merge the different backend API to the main service through micro service. We can connect these micro services to the common port by creating an API gateway. For this we can create an Ocelot gateway. For example amazon has a gateway number as 45699. So it is now connected to different micro services like 45699/AmzonGateway/Orders [this gateway for orders] 45699/AmzonGateway/Register[this is for register].

Don’t use microservices for small applications, it is not a good practice. In monolithic if we do some changes in register then we cannot access any other pages like order admin anything. But in the microservices even though the register part is not working properly we are able to perform an order if we are registered already. These microservices can be shared with different applications like order microservice of amazon can be shared with bigbasket microservice.

Advantages of Microservices:

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. React works based on the Virtual DOM; it means updating the current page only. But in Real DOM if we update then it updates all the pages.

In a Model View Controller(MVC) architecture, React is the ‘View’ responsible for how the app looks and feels. MVC is an architectural pattern that splits the application layer into Model, View, and Controller. The model relates to all data-related logic; the view is used for the UI logic of the application, and the controller is an interface between the Model and View.

Extensions: React goes beyond just being a UI framework; it contains many extensions that cover the entire application architecture. It helps the building of mobile apps and provides server-side rendering. Flux and Redux, among other things, can extend React.

Data Binding: Since React employs one-way data binding, all activities stay modular and quick. Moreover, the unidirectional data flow means that it’s common to nest child components within parent components when developing a React project.

Debugging: Since a broad developer community exists, React applications are straightforward and easy to test. Facebook provides a browser extension that simplifies and expedites React debugging.

It has some in build files like we have in the Angular project. node modules, public, src, .gitignore, package-lock-json, package.json[version of react script all these are mentioned in this file] and README.md[this file helps to store information about our application]. In the src folder we have App.js which is the default component. For styling of that particular component it has a App.css file. In Angular if you create a component it automatically creates a css file. But in React we have to manually create a css file and import that particular file in the js component. Like imports ‘./App.css’; For usage of images we use property binding concept. Like import logo from ‘.’react.png’;
<img src=[logo] className=“App-logo” alt=“logo”>. App.test is a file which is used for testing App components. index.js is like a routing component for React.

(14/10/2022)

In the morning we got a happy message i.e. We have a holiday tomorrow. Omg first weekend holiday means sat in training weeks. One more happy news is that we are going to the office to get together. So we can again meet our friend. That was nice right. Coming to the session today we learnt about the Components in react.

In angular we have a component but in react we don’t have a file which is named as component but each and every file is a component here. In these two types of components: 1. Function components and 2. Class component

Create a folder named it as Components in that create a file functional.jsx. When we create a component and alias its first letter should be an uppercase. Then we should import the react in the functional.jsx. Like
import React from “react” for the working of components. We use a function with a function keyword.

Here we must remember that a component can only have a single export. If we use two functions then we are able to export only one function by using export followed by function name. Here in the above example we use 2 functions FunctionalComponent and FunctionalComponent1. In that we use an export function as FunctionalComponent. So if we want a second function content to be rendered in the output we should call that particular function in the first function i.e. in the FunctionalComponent. For exporting we use “export default FunctionalComponent;”. Then in the App.jsx file we should import the component functional.jsx. like
import FuncComp from ‘./components/functional’;
Here FuncComp is an alias to access the functional component.
<FuncComp><funcComp> by using this we can access our functional component in the App.jsx or any of other components.

In React for styling we should create a separate css file and call that file in our jsx file. So that we can apply a styling to content which is there in the jsx file. To maintain a styling of different components better we create a file named it as Styles and in that we create a css file. In that we can give a styling. For example we create a styling for a functional component as functional.css then calling that particular css file we can give the styling.
import ‘../Styles/functional.css’;

In React we can use the arrow function also. It works similarly to the normal function. Here we use a => symbol to create a function. In the below example we can see that <p> is enclosed with a <div> function. If we didn’t do that it shows an error. So if we use any two or more tags(<h1>,<p> etc) that should be enclosed within a <div> tag.

If we want to avoid unnecessary elements to be rendered, that is usage of <div> is not preferable because it is an extra thing right. So to avoid that we use React fragments. These fragments are used for displaying the set of child elements without a parent element.

If we run the above code and with <div> instead of <React.Fragment> when we inspect that code it shows the <div> element along with <td> tag. Here we use a <React.Fragment> and inspect that output; it won’t show the <React.Fragment> and it does not show an error. We can use < > </> for the React fragments.

We create a class by using a class keyword. To show the working of class we create a component named it as ClassComponent. We can also call the other component by importing that in ClassComponent. We can also call other classes and function inside the class.

Here we include all the cdn and script files in the index.html file. So that we can access the bootstrap code. Because we use navbar to explain the routing concept. Now create a nav component inside the Components folder and name it as NavBar.jsx. Inside a function write a navbar code and import this component in the App.js. For routing purposes we should install router-dom by using a command npm install react-router-dom in the command prompt. Then in index.js
import {BrowserRouter} from ‘react-router-dom’;
Then comment below code in the index.js and enable the routing configuration. Like

Then in the App.jsx import {Route, Routes} from ‘react-router-dom’; Next we can we set a route path for different component for example, for functional.jsx we import that component in App.jsx as <FuncCom> so
<Route path=”funcom” element={<FuncComp/>}></Route> by using this command we can give the routing. This is for the React 18 version. But in the previous version route configuration is different.

In NavBar we copy-pasted the bootstrap but in that we should replace all the classes as className and all <a> to <Link>. The React class is called by using className. For working of link we should import link in the NavBar component like <Route path=”funcom” element={<FuncComp/>}></Route>
By using Link and className with in the NavBar we can access the routing
<Link className=”nav-link” to=”funcom”>Functional Component</Link>

We are able to set a page not found concept by just using this code in App.jsx and by creating a component. In App.jsx we should type this
<Route path=”*” element={<PageNotFound/>}></Route>
Then in the Components folder create a PageNotFound component. In that just create a class and return a message Page Not Found. If we didn’t set a route to the component in the navbar and we mention that component in the navbar when we click the navbar at that time this Page Not Found message will appear from the PageNotFound component. It is like a Default setting.

Ya in this we completed the ASP .NET Core concepts and started with Reacts. Anyways, tomorrow is a holiday we have two days to work on this React concept and also for our team project. Thanks to Pallavi🙏🙂 and Arun🙏. Happy weekend guys🥳🥳🥳.

Add a comment

What is your view?

Send

Related posts:

Best water leak detectors for smart homes

Fire might be a homeowner’s greatest fear, but any insurance company will tell you that water is the far more common cause of property damage, even if you don’t live in an area subject to flooding…

The Day I Met an Ancestor

The last few weeks before our mother died, she started “seeing” deceased relatives and friends. Most of the “visitors” were individuals she had known and loved. Our mother talked about these…

New year so New what?!

I took part in a multi-day outside training course in New Hampshire’s White Mountains. Relegated to a little group of enthusiastic individual explorers and a learned teacher, all influencing under…