Right. So very simple after you install them, you have to check whether it's installed or successfully or not
I already um installed that. OK. So you have to type C MD
your type no space. The the the version also displayed
right? It is installed successfully. Now, what I'm going to do is I'm going to go to create the node Js project
So first I'm going to get the uh D drive, you can uh you can select whatever drive you
you, you need, OK? You will be able to select the drive. OK
I'm going to create the new folder, file, new folder node projects right
here we are, we have created the project. So we have to type CMD here
you type the if you create the new project on uh no, you type MPM in it
placenta key here. This command, what does is it will be creating the package of J that is simple package
This, this package consists of uh consists of the packages, all the packages
right? All the relevant the it has the package name. If you
if you like, you will be able to uh give the version and all the things you can give
Uh if you don't like, you just press enter key, enter key and the key
OK? I no need to at the moment, I no need to fill this form
I just press enter key and the key right here. This is the package of GS when the package can present the key here as
well. Yes, you like it now, you will be able to see here
Now you package your DS N the file has been created. No project has been created here
the PT, right? So now what I'm going to do is here
I'm going to create the project, learn how to create the project
Um Right now this project, I'm going to open up the B BS code editor
You have to type C MD command code space dot Right now here are the things I'm going
to of only, we have to keep the above our new project only
right? This is the our package do this. You will be able to see, OK
You can see only that these are the packages there, nothing's there only that this package is there right now
you have to install that. Another thing is you have to install uh not project
you have installed that M PM installed, you have to install that
sorry, we have to install that uh relevant libraries. So first we have to install the library which is a uh express express
which is a server or node. Yes. OK. It is just a back end
It will communicate the front end. It will be go to the database mangoes
So first I'm going to uh download the respected department, go
to if you download the note packages, uh you have to type the co uh command M PM
After that, you have to type the name of the uh command. So I'm going to write uh down the server
so you have to write M PM Express. So here the Express click on this one
it goes to the respective website here. You no need to type
you just here. This is a copy. You just click on the here
get the copy and paste it over here, whatever
didn't copy it, copy it percent. You have to wait until the dependency installations
are uh completed. After complete these dependencies. After you go go back
you have to find another dependencies, Mangus, which is a database. This is a Mango DB
right? So you have to download the respective dependencies, the
dependency installation su successfully completed. Now, I'm going to go to install another one
sir Michaels. So
here this one man go click on here back here. Press it
present the key on your keyboard. You wait until the packages get installed
Uh After that uh the Mangoes installation successfully, uh That's it. Now
let's back to our project here. The Express installation
successfully so that we will get the version uh Mangos is still installing
Ok. It it's installing. After completed, you, you have a, you can get these packages as well right now here after install
the express, you will getting the node modules. So all the packages will be there
right? That's why it takes some time to install. Ok. Here this one accessible for mangoes
all the databases, database configuration. All the dependencies should be reside on this folder
which is a Mangos package. So this package needs to be installed. Now
the Mango's installation successfully. Now, what I'm going to go to is I'm going to go to uh go to the package dot You can
see here the dependent is to uh new dependent is you can see here like it installation successfully in the package dot J First
I'm going to create the file, which is a server dot Js here
we all the database and configuration, all things we are doing the server dot Js
right? Ok. Now, uh I'm going to go to do another thing is sir
we haven't in. If you are not install the Mango DB, you have to install the Mango DB server
right? So Mango DB, which is a database, OK. Uh While you are installing the node Js
uh there will be the uh check box which is a Mango DB compress
OK? You have to check on and install, you will be able to get the Mango DB uh compress compas here
If you are go to the, if you type mangoes, mango DB compass
you will be able to open it. Here we are, we will be able to create the database and all the things not
right. It's opening like it's open up. Uh Here, here there are some troubleshooting here
If you connect now, it will be connected. If there is any issues of the connection
there is there is some fix. Ok? So there is a one trouble shooting
You go and go to the service service. There is a Mango DB service
OK? There are all the database, there will be the service. OK? So here if the connection is not started
you you can search your service. The mango DB. Here the Mango DB start
If you are not started, you can click this one. I already started also with no need to click
So hit start, click start. It will be started right? Then you will be the connection will be there
Now, here I'm going to create a new database. Click here. Uh I'm going to create the databases
uh A BC, right? ABC. This is database, your collection. I'm going to create a collection as student
right? The collection which is a database, the database, which name is database collection
which is a table, right? Click database. Now, if your database and table has been created successfully
your database name is ABC collection is a student. That's the only thing we need
right? Perfect. Now, this scheme of all the things you are setting to model we architecture
No Js right, perfect. All right. Now let's back to our. So this is the one right now
First of what I'm going to do is here server first, I'm going to implement the uh here
1st 3 to 9 p.m. express. Sorry, we have to to resolve the
how to import the models here. It will be explained how to install the Express
how to implement the Express. If you just copy these two things, you have to put into your serve
So you have to call the Express Express library, you have to call the Express library
you have to use it. This is how you have to use it. After that, you have to use the mangoes how to make the
mangoes connection. Also, it will be done here. This is a Mangos connection
right? So copied lot of pastry go here below. That's the thing here
right? After that, what I'm going to do is after that, I'm going to write the connection
So connection, you write the connection. So connection and we have to write the routes and all
So first of all, I'm going to write the connection. So connection, we have to specify the port and all right
So here to instead of writing it takes too much time, you just go past it. So I write this one
I have to explain. So here you write like this for your write up dot Listen listen the port
first port, what is the port? You can give any port. So if I'm going to give the port here as 99 two
this is what I'm going to say, right? This is this your flight
So you tried to separate function, function check pure air that's in it
OK? You're bright here. You check whether it's error or not. You t like this error or not
You t like this. If yeah, that
comes all the log. Yeah, not
this one we import here. Yes. Start it. OK
You start right? Uh Here we are, right? It'll start, right? That's the thing we have
right? So here we are right? Uh function, right? So you have to
right? You write like this. OK? So now what I'm going to do is this
this is a simple function. You have created this function out to right inside here
Uh You just copy this one, this function come on, you base it out
These are you right here? Simple, right? Simple you, right? Like this
This is the logic here to follow it. OK? Right? Simple, simple logic
You follow it, right? Perfect. After that, what you're going to do is you have to get another one which is a Mango's connectivity
right? So Mango's connectivity, we let's check before they go to the mango is connected
whether the port is working or not. Uh Right here the board is working out here
Let's uh use the port working or not right now. Let's check
Right? Oh Let's file save. So I would run the node application
You go to the down, this is your application, how to run the application. So you asked your project just
say a word. I
have great wrongly. This is server dot Js. You just pick up uh cut off this one
you paste it. I ha I have created wrong created inside the wrong modules
You have to create it outside the non module, just copy and paste it outside
OK? I wrongly created, right? It's basic OK? If I have wrongly created that one
you are created inside here. OK? It's wrongly created, right? Accidentally create inside the nodule
Don't create inside the non modules outside the non model you have to create. Right? Right
Now, let's say that's why it, it won't show up over here. Now it's shown up
Now you go and run it C MD type node server dot Yes
Right. Your port is successfully working if it is started, right? We not
we don't have a problem with the for now let's now let's implement the database connection
We have established a database connection, right? Database connection. We outright like this
I just copy this one. I'll be explaining. Please sit over here
right? Database connection. We have uh already we have implemented that. Uh li we are uh mangoes here
This is the object but connect Mangos. This is the database connectivity
right? While we connect to the mango DB, this is the connectivity, right? This is lo lo this is the connectivity you put it here
your database name. What is the name we have created ABC which is a database name
your user pass through this one. Also true. We have to make this one as true
right? This is also same thing what I what I did it
we had to close it over here and we are comma and we are phd function
a function, the same function we have to, right? That's the thing you have to
This is we have to create the database connection. Now, the database connection, we have not
we have to check it. Uh Right now let's check bot save all
You make save all, then only it will be work. Um Now let's test that again here
Now I'm going to again up the server type type the command node
server God. Yes, the report is started here. It
will be telling the warning of the Mango de B. This warning we will be simply we will fix that
So we have to pass these dependencies. Mango set, stric quarry false
OK. While connect with the mango DB and express, there'll be the uh there will be the
if there are any issues, it will be strict or without a fault you set like this
the problem will be fixed, sorry, not this, the
problem will be solved. Now, let's again here. To the server cannot see to this one here to up the server here
It will be successfully connected for it connected for effective, right? It's connected for effective
Now, let's close it. It's connected for right now. What I'm going to do is uh I'm going to go to uh
do that first on that. Uh do use the registration part. So this is my folder inside the folder
I'm going to create that follow the mixer routes right. After that
we have to create another folder which is SRC inside the SRC folder
I'm going to create another folder which is sir. Uh sorry, this is not our fault
This is we gave them. OK? OK. The folder, this is a folding folder
SRC inside the SRC folder. We are getting another new folder which is a store
the student folder, we have to create another file which is a student model
After that you would create another one is a student controller after that
another one which is a student store and service. So
we need a three packages, right? These are we have created the model view architecture
So first what I'm going to see, we have a first you have to manage with the route when the request is coming via the
route. So what I'm here is you have to go to the route here
Let's I'll be explaining. Don't worry right here, right? I place the code inside the route
OK? So the routes, you can see that we have created the folder, which the route
right? So this is a folder, right? Uh So yeah, we have to instead of create the routes like this
you have to create a separate folder, mix the routes, right? This loud folder
Um Yes, of order the student folder, right? Yes, sir. Here. Not inside the student folder here
Yeah, you have to create a folder, new folder routes. I want to be successful
We asked for the refresh it this file. I'm going to
cut off you to create the new folder route inside the folder
I'm going to paste this file, right? OK. You have to create a separate file folder routes
route. OK? Inside the route, we have to create this file, right? OK
Now, here inside the route, we have five routes dot Js throughout the Js
We have the same express. Uh what I do, we here the same express
We have to call it here. After that, we have to do the path where you are uh controller is resided
My controller is resided inside the SRC folder. Student. You have a student controller
you are right student SRC student. This one should be stored and control right
after that. We have to call the routes like this concerned route express router or when the rus is coming
When the URL is coming slash URL create, it goes to the controller
create controller, it goes to the controller, create controller. After that, this route
we have to export the outside. So you have to model export the route
It will be this route. You have to export the route outside, right
You have to write the route, you have to write like this concerned route express
this express, you called the route, OK. Then only we the route will be working
This is the first thing you have to do it right. First you have to come the route after the route route will be calling
the which controller creates user controller. So go to the this is student control like student
controller create student your student controller
function. So let's go to the student controller, student controller. So right
Dysfunction, right. Right
You have to uh explain later on this one. So here we are back student like so you can see here when the request
is coming via the routes slash student create it goes to the post student controller
create student action method. This method it's coming here, this method, same method coming here
So your request and response, you get the request over here. OK
Then you have send the response, get the request via the request body status
Avoid your uh put it this one, right? It is sending to the user service to create the your service
OK? So you have the student service, you use the service so you have to try the student service
OK? You try this one so that student service, copied student service
OK. So here also you are a student service. You have to call the student service
OK. You have to call the student service. Student service. Also, you are a current student student DB service
student DB service. OK. Student DB service. So student service you have to create here as here
also, uh this is one should be the our student service. So let me change this one also required student model
right? So the service will be communicated with the model, right? First cloud will be com with the controller
Controller will be communicated with the service service will be communicated with the model model support
We are be comic with the database and fax data from the database and give it to the front end
So here second one key we have set the random key here
So here encrypt simple encrypted. OK. This one M PM you have to install the dependencies
So go to that Google search or type ATM simple encrypted. Click on this link
you to bring this, you would get the simple encrypted. Click on this one
you have to install them that particular dependency. So you have to, this one should be running your project control
C stop it here and again, you have to install them. But this is uh this dependency
We need to encrypt the password, password security pur purpose. We have to uh install this
dependencies, right? Perfect. Now what you're going to do is after done the staff uh we have to model export
create this one should be there create student DB service DB service
It will be called the student DB service. The student details here the student details
the student details you are passing via details, passing my other mo right
a model student details, right? Student details, you got the new promise promise
We have uh two things. So if you call from a function, not yet
we have a resolve and reject. OK? If the score, if if all the things are correct
it will be resolved. If you are in a failure, it will be reject. Right? First what we have created uh student model
student model data, new your student model student model. So your student model data
this one we have to get it here. So model data we have, right? Uh these things
first name, last name, email and password, right? You have set all things
these all things are in models, right? OK. Ok. This one should be aware uh this one
OK. This uh front details, different details, first name, front details, all the things
right? Ok, sir, encrypted this encrypted you have downloaded right? You have to install it right
Then encrypted successfully, right? Done. Perfect. OK. So here when you fill the form
all things are you fill on the form? Ok. First name, last name, email and password
When you type the password, it will be encrypted. So we have to do
we have to, if you insert this particular dependency, you will get the dependency you have
There will be a predefined method which is encrypt password only you have to assign here
OK? You have to give the password, it will be encrypted. OK. After that
you order the student model data, uh this current data, the student data model we
have to set, let's save it over here, right Function it will
be safe. That is the only thing we have to do it for
If there are any problem, if there are any problem, it will be dejected with all things of success
it will be resolved and improve after that this one model. So here use a model
right? So here this one I you have to model, you have to create a model student model
So you slide kick, you have to create student student model B case
So the ex exist model dot Js you are right? Like this write
student schema student schema. So student schema, right. Copy this one, your PT over here your
student schema schemas, first name, last name, email and pass these all things have have in our database fields
right? We have here the student, you have to export it, right
Only this thing you have to it. So this is the only thing you have to do it
Now we have we have to it's not working, we have to this one service also we have to export it outside
So controller service service, right? So it also we have already output
OK? So, OK. Now let's test that whether it's working fine or not, let's save all
Uh If you are not installed a postman for the checking part
you have to install that. This is mask postman. OK. We have all the restful API S we have to check on the postman
Now, here we are, you have checked the post request. So first you have to falsify the port
What is the port? Your server is running? This is a port where your server is running
This is a port port where the request is coming to and create
right? So the body, first name, last name, email and password, you have to give it like this
OK? Except some JSON format. You write like this in the post
right? So let's, I haven't, I haven't run that server yet. So you have run the server
not server. Your case like both successfully, you click send button. The
issues can't post to create. What's the problem? Right. The post, the problem will be uh what's the problem
Let's back to our project, right? The problem is the routes. We
we, we didn't call the routes. That's the problem, right? We didn't call the route routes
Also. We have didn't call, that's the problem. OK? The routes, the routes
we didn't call it in the server. So we have to call the route that is must
So you write to rouse the rout is where your router resided. So I give the route
the server, the server file is running. You mention your rout is where it resided
Routes, Rickard routes for you said the route folder, we have a route files there
right? So after that, what we're going to do this here, you have to import the routes
So you have to give the routes over here all the routes over here. Save all
Now let's back over here. Can we say to save? Conversate? Uh what's the problem
Uh Here, there will be the error here. Find error like this. Uh R post required a call back but not object uh undefined
The problem is here. What is the problem here is and call back in uh object undefined mean we didn't export it
That's the problem. So we have to export outside. So controller, yeah
model export. What I done? You have to export it, right? So you have to copy this one
I have paste it over here. You have to log in function. We create later on only create condolence to save after that
What I'm gonna do is we have to get there over here
Student service us a service. OK. Here we have to get there. You have to change this one as this
Uh this, this is the path of your services. Recited this path
We have to give this variable, this variable will pass it here, right
State uh student service is called the method service. Create student DB creates go to that particular method
right? So student DB method uh DB service, so it reside around the service
right? Go to service. You click on this service. Uh We have to service
She OK, let's go to here, right? It goes like this, right
So here the same model here, basic over here, right? Uh That's the only thing you want to do it
So go back to our uh service here. We have to implement the JSN then only it will be working
So here JSN this get use it app use Express J this Express
OK dot Js. Then you have to save all. Now let's run the for it again
Now it's working. There's no error. I'm going to execute the court
So I'm going to John bro Ram
at gmail.com. Take. Now you can see here the user created successfully the record added successfully right
Now, what I'm going to do is after done the stuff. Now let's back to our login login section
We have to do the login section. So you have to do the first time. Got routes
you implement the routes, route router user log in this one. We have to get it here
Talk for here, right? So you have tried student login if the request is coming
Uh student login, it goes to the student controller login action method
OK? So we have a student controller here is a student controller. We have to write this login action method
So we have to uh so we have to call the action method
So you have to write this one right
login controller to action method, right? Log in log in control, you have to import
you have to export it outside, right? So login controller request a response request you to use
a service. So log in DB get the request. So here we have to use a service
This is not a user service, this is a uh student service. You have to create the function login service
right? So you have to validate the function. So here we have to, we have to create another function which you said uh L OK
login function, right? The simple function you have to create this function
What does is here you get them over here. We have to this model
we have to check all the user name and password coming there. This is one with the student model
student model. It is coming from the student model, check the email ID
the email ID, if the email ID is match or not, this one should be the student detail
student detail. It it it will be checked whether your email ID is correct or not
right? If the if E email I DS exist, not exist, it will be rejected
If the email I DS exist, it go if the user name and password is correct
Ok. First you have to decrypt the password. You have to use the encrypted decrypt
What is password you have written and here check it. The user details is matched with this one
So details match with this password if it is matched student validated
invalidated, otherwise to invalidated fate. Right. That's the thing we are right here
Ok. That's the thing you have to write it. So, yeah, uh this is student credit
right? That's the thing out right over here. Ok. Just simple stuff
Don't I did it successfully get up right
now. Let's check, condolences, save all and check again. You have run the application color seats
close, run the application again. You have to check with the login when the request is coming
Store, log in post the guest click, send button
stone data successfully. It's working for if it is a user name and password wrong
it is clear identified, the correct user name and password is correct
It is working now your front and is back and is finish high today
I'm going to teach about the front end pa part which is uh react
We already complete the backend part node. Yes. So yeah, first we have to install the node
react in your computer. So here if you communicate with the uh front end and back end
you have to put your project name. So then the exercise. So here this is my uh back
end right here. You have to, you have to, you have to put your project name over here inside the project name
you have to create two different folders, which is one is a back end, another one is a front end
You have to make the professional way look like this. So here, I'm going to give the folder here that is a react front end
So here, right? So you have to do like this at front end up front right here
I'm going to install my front end application React. So how to install the React
You have to type by the command C MD, go to Google and type
we get started. React, get started. Yeah
Now you select, get started right here. Click on the uh
install, create new app. So here this one create a new reactor
So you have to, this is the this is how we upgrade the new app. So you have to this command
you just copy it this and also the copy uh go to your folder
this one your folder here, you upgrade your project of front end type the address bar on the C MD
You have to get the command from talk here, right? Click and you pay them
So you have to give the name of your so front, front eight
front it. Thank you. The name is front end that first enter key on your keyboard
You wait until the process completed. Now here react app installation is completed
Now here the front is created. Now you go inside the folder
you type the CD front and presently you go inside this folder
I'm going to open this folder folder structure in in my VS code
how to open it. You type the command code space dot Now
the entire project will be open on the VS right now
you can see see the entire project has been uh open at open onto the BS co the
right cross right now here here, all the folders actually will be open on my S code
Now, here this is S folder is the folder. You can see the app dot D component
right? These are for component, right? This component right now you can see here instead of public dot html index dot html
This is the our single page here. It's called the root. It's not loading the route
ok? So here the root loading. So it goes to the index or Js index do this here
It will be calling the road here. This element it loading the app V traffic will be loading this one after this
These are the program will be work right now. What I'm going to do is first
I'm going to do. The thing is uh I'm going to go to work
you install that first, first package. I'm going the first step, I'm going to create the route
route is important stuff, ok? If you are going to the registration page
home page and blogging. So first I'm going to go to create three different components
So you have to understand the routes. Now go to the SR folder
right? Click here, I'm going to create the new folder, which is a components you to create the components folder
component, right? Inside the components folder, right? Click new. I'm going to create the three different files
First, the in home page home dot JSXX, OK? You you can type Js also but the in in
React extension you right like this JSX then only you can see the React flow
OK? After that second compo I'm going to type here uh re your registration
What type of user registration or reg register? The very second order dot JSX
This is the extension. Third one, I'm gonna read login component. So login dot JSX
right? We we we created three different component home component, logging component fl as a log register component
right? First, after that, what you are going to do is here, I'm going to go into the app dot J here
I'm going to create the routes. So route. So how to create the route? You go to the Google
go to type M PM router off. OK? It's this goes to the N PM package
OK? Here this is the code. You don't type this all the things, OK? If you are leaving the spelling mistake
it won't install you just copy and paste it. Ok, so go here
This is your project folder. Ok. The project folder don don't install here
Ok. You have to insert inside the project folder, whatever uh package you have downloaded
you have to download, you have to uh install inside the company then only it should work
Ok. Here type M PM. I react, compress, enter key. Don't wait until the uh installation completed it
Installing, right? Your Riak dom is installed successfully. Now, what I'm gonna do is inside the package
you will be able to add the uh route. So back to the page
So here this all things. This is a React Welcome page. I'm going to remove all of this
but I've written over here. We are booked remote if you want to see the homepage
Now, which one, your test test your P test and how to run the saver
how to run the app application. Once you install, you have to tell them N PM start you right N PM start
Otherwise you can start with N PM branch start. Ok. NDM. Start
You have to type now you are React is configuring and loading
You wait until that process is completed. You can see the test has been printed successfully
What are you doing here right now? That, that this is not a wor that logo have removed the React logo
So you have to remove these all the things that we no need them
Just save all and check now that to go away, you can see they all go away
Now it will display. Ok. All right. Oh, here we are. I'm going to write it out right
Ok. Now, first you have to write the route. So, first, what I'm going to do is right
how to route the, how to write the route. First, I'm going to go here inside here
First you write it, write it here, import browser. Yes
all the package is coming from there. Yeah, routed up. Ok. So routed
If you're not into the router up package, you haven't, you, you can't, you can't access this uh compound th this this uh compounds
right? So the routes, this package has these, these are all the things this package is available
Routes not accessible from this package, other routes. Ok. After then after that
only we have to get there, we have to call them, right? You said the new tag you have
right? Is Bob browser, browser, open bracket and close bracket inside
here. You right, rouse open and close back. After
that, you have to write. Another thing is that route a path
you have to give the path. So you write route as you write like this router router
path slash form element within the bracket. You right here like this
Yeah, before we have to write, give the element here, we have to this
all the page pages are blank. So this page I'm going to write this all things are copied basically the home page instead of f
what is the name here? Home here, home it uh export outside home
right? Inside the day we now need this one. Is that right
H one tag or any tag, H one tag ha right? Same thing
copy, paste, the login component as well. This is a login here also log
So here you go to press if two key on your keyboard instead of changing like this
If two, OK. If you, if you have a laptop, if N plus if or on the key down and press uh F
two, you will be able to get it. Now here, a few change here plus the key everywhere register also
So these are the feed, copy control way to paste over here here
Also click here a fun. Hold on the fngfgfng down and click F two ko to select register
present the key with all things to catch your change. Here has raised
All right, perfect. Now let's shave off all the components, three components
you operated successfully different components. Now you have to access the pages, set up the home home component
you're right element. There is another field element. If the if you if you type the you are like the
slash home, it goes to the component which is a home component
you type a component like this form. So yeah, you have to click on this one
The component is for imported successfully. Here we are, you have to close the component like this
That's it. That's the thing you applied. Same thing. Another one is instead of writing each time you copy and paste this standard for your
weight. Second is a register. If the, if the test coming register like this is called the register component
you type to register, register trust. And here path has been automatically important
OK. Copy and paste it. here. We have to write another one sir
which is a log in when the request is coming, log in here
log in when the page is open. It's called the login page
OK? That is uh that is the way I have with it. Uh Not in beach
So right. So you're right slash slash. Then it, when the page is open
it's called login page. It's a log in. All right. All right
So log in. So sorry, protect log in from here you type this look quite like this
you copy and paste it, it, it won't export it. You write like this logging press
on your keyboard, then only the component will be important. OK. Right
So this is all the things that done, right? OK. Right. Perfect
Simple route. These are the route works. Now, let's check whether it's work the fine or not
So let's back to your right here. Login is working. So register can
you start, you finish that home? Because so successfully the res is work Now the router
is working successfully. Now, I'm going to go to first go to the registered page
I'm going to design the register page all how to design the register page
Simply it simply I have already registered page is there? I'll be explaining
OK, without wasting the time. Simple, I have this simple page. I just copy and paste it
I will explain. Don't worry about that one, right? If I do it step by step
it will be returned. It. Take too much of time to come to this project. That's why I just copy and paste it right now
I'll be explaining uh format document, right? Perfect. Right. Now, what I'm going to do
is you can see here we start that here. This, this this all the things also react
This is the plane html file, OK? This is a plain html file
OK? The fly plane html file, the html file, there's ad tag
it has ad tag is that the D tag, we, we need only one D tag
We don't need the sub through one, right? It's ad tag. We have tried to do class boot up which is a class empty MP
four, right? Sorry. One thing I have forgot, forgot the things which is that we uh I forgot to implement the boot style
So where I'm going to implement the boost up style, you have to go to the public for the index dot html
This is our single main application. So here inside that attack, we have implemented that
So how to implement that one, you go to the respective website
which is a bootstrap website. So a bootstrap your type bootstrap. OK
Boo Scrap Placenta key. This is a G booster. Click on this one
It goes to the respective inside over here, right? So here you have to go under the topic include via serial
Here you can see the link and script. This is for CS S
this is for javascript. I need this one for CS S only
Yeah, you just copy the clip, clip, book, keyboard, copied successfully. Now you're back to your project
your pace inside the attack control B only. OK? So paste. Now after
paste, you just go to file, say what, OK, you have to save all this thing
You must do it right after done the stuff. Now let's back over register page again
Now this this all a boos TRP this a boost up class container MT four
OK. Right after that, you have to write a class car, you have to write a class card
OK? You have an idea about what is the, how the cards work in bootstrap
OK. If you don't have any idea about what's the card, you just go to the Google it and you have to type the Google
move up car. Now you can get the result, all the cards look like
So this is the card look like here, this is a simple card look like
OK. Right. If you like, you can put it, put on your project or otherwise you can remove it
OK? That is your wish. Right now inside the car, we have to write the adding which is a student registration
This is it and this is the H one T OK. H one is Ed Intech
OK. It's called dash inch. This is, it is nothing but a edit
OK. Right. This is a form, the form tag is nothing but a form tag
This form is started. OK. Form is closing right after you can see the each
this new T 22 taxes started this D 3D taxes. They are
you, you, it, you must close it below these three things, whatever due T you are started
you must close it. OK? OK. Some students are doing, once you start
they are not closing. OK? Once the project is ended, they are going to close each deck each due guy and you take too much
of time to complete the project. OK? You are struggling at that time. OK
Once you start the new tag, you must close it. That's a professional way to do the project
right? OK. Inside the form, you have four fields. OK? We have a
it consists of four form fields. What one is a first name? Second one is the last name
Third one is the email. Fourth one is a password, right? But first name
OK. Here the label, first name, it has a input field, input field type text
This is a class which is a BF controller control, sorry, phone control
right? ID I given as if name, OK? The first name I written the short name
I written the short form as if here place order, which is the interna interna you write pass
instead of the inter name, you write, enter first name, right Value if name
OK, value have the same same thing on change. Even your right set
If name like this one, I am going, I will be uh explain in a few minutes
OK? Right. This this is the things which is coming from. This is the simple stuff we are coming to our react
OK? React application. OK? On change. OK? What what is, what is this method
Does all things? I will explain it in a few minutes. Wait, this this these are all the things you have to uh yeah
go get your mind. These are all the things, sir. Your same html the same thing here
The last name. Yes sir. OK. I no need to explain again like the last name here
Also value on this one. I will explain it out of email
email field, email type here, the last name here to the type path text but this is email
OK? The in in uh Bora that should be the validation automatically
So if you are not type on the text box uh without the email format
Ok. Without the email format, it's getting error so that they are implemented the bootstrap
they are implemented. Yeah, type email. Ok. We no need to check any validation part
It automatically error should be displayed. This is not your email format, right? So here you have to have email
The standard C I did the same thing. This is that enter the name now
email place, order, order that password. It's a password here
password. Also the boost app implemented as a type password. It automatically boost up
recognized as this one is filled as a password. It automatically understand this field of password but very simple
But this is small design after that. And finally, we have written a simple button
the submit button, we have that boot cap primary style. We are given it has a one on click method
right? That's it. Buttons, open and close it your phone tag. And finally we are closing very simple code there
be this in B right? Inside the return, we have paste this code
This all the html is working right inside the function. This function we have written our logic
OK? Inside the written only we have the html is working. You say the function about the written
we have a function inside the function we have right to logic programming logic right now
I'm going to communicate with the A PS API APR RV comi uh coming from in my back end
So what I'm going to lose here, I have, I'm going to install another dependencies
which is A A X Os. So you type type in P MA X I
OS. This is a dependency. We have to uh communicate with that
It, it will be successfully com it with the restful A P A. OK
So here simple M PM. I mean, I stands for install. It's a short form of I OK
Copied back to my project. So sorry, back to my, this is my project director
You have to open the C MD. Press the command present the key
this dependency getting installed this they they in the front end framework and uh they all are
they are implemented there N PM packages dependencies, all the depend they implemented one dependency
If you are calling the school A P A, they are uh in 11 dependency
And uh if it is uh uh if, if you are install the bootstrap also they invented one package
OK? That's very simple, right. Right, perfect. Right. Now, what I'm going to do is
after installation successfully, you have to import that package. OK. Just names
please. So this is the name that you have to import that. I'll explain it
So don't worry, import A X OS. This is coming from after install
you have to use this package, right? This is the user state
use state from this is coming from react after the it will be after install the react
it will be already available in the package. You don't worry about that right after done the staff in the registration form
we are simply I will explain, don't OK. Now
you can see we have to create that. This is this should be the function component
We are doing the project as a function component, we have uh do react project in two different ways
Uh class component are this function component but function component is a very famous one
So here we have quite a function component. How to write the function component first
You right, we have to maintain with the state, the state which God has used a state
OK? So if you here this now you now I'm coming for this this line
Now you will be understand right this line, you will be able to understand you value your name on change event set if name
OK? What type of value you are type on this particular text feed
What's the name? You are type on this particular text feed? What happened is this name should be store here
OK. This set if name, OK. Set F name pass in here the same thing
whatever thing you type on this text field which textiles last name
text field value, you set it here. It will be set this function
This take OK, after the email address and password. OK? If you are not implemented these lines value on change and event
OK. The value should be changed. OK? Then only it will be stored in the state
The values are stored as a state in React, what are value or type on the particular text field
It is that that particular value, store, asset store as a state
OK. In react. OK. So here are also the same email, also the same whatever email you type
the particular text field is stored as a on change. Even this function
it will be store and get them over here and pass it
It maintained the state. All the things we are made in the state
That's, that's the thing we have put right after that, we have one on click method
We have written inside the bar. So on click save. When you click the save button
it goes to the save function. What what what what is save function
We are written over here, right? It go and click here here your credit event
OK? Here, event prevent default. What is, what is mean by that? This is if you are uh you are already aware of Java and
Shia, all they are, which is called as action event. OK? The same action event in uh React here we
are event prevent default. If you are not called this, this one
if you, if when you click the button, nothing will be up so that we have tried this one
you put this assign. So you're right and white. OK. After that
you are trying to try and catch block. This is important stuff. OK? Try and catch uh uh when the errors come
what kind of error, we easily understand the error of the uh despair inside the catch block
right? Try block. What I did here is first avoid associate post
This is the request which will be we have, we have already uh discussed about our back end application through postman
OK. This is the request. We we we create the records. So you have to go along this port
we go to the port. OK? Right. This is the route, the routing the student create
So here you can see this all the things we have to show in the same thing in our postman postman
What thing is this called uh our database feeds? OK. Database schema
What is schema? You are, you are type on your schema, schema
All the stuff you have done in our not. Yes. If you are not, you have forgot that one
the same name, you can check it. This is the same name. Maybe you are type on the scheme
First name, last name, this this is all that uh student model
OK. This is chosen model model dot Case you just go and check with this with the same name of your type
different name, we have different name it the it will be error getting error
the same name you check it, this is a database field. These are are the form field F fields name here
First name I'm going to set the versie here here to lead us if me
yeah, I need email and pass it this a database fields. The four database field
we are setting the form fields. OK? Right. So when you type on the particular text fields
data, when you click that button is all the data should be coming to set it over here
right? And go to this this uh it it goes to jail this API and add that according
to the database. After done the stuff student registration. That is simple stuff we have done here
Very simple. This is the this is simple stuff, right? If you have written this one
you take too much of time to complete that. That's why I have just copy and paste it. Don't worry this all the source code
I provide you. Now let's see all no, no le le let's say what now
what I'm going to is uh let's run the project and check whether it's working fine or not
Uh back to our react here. I'm going to type register present here
It's successfully going to went to register page. OK? Here this is the card
it's called a card, OK? The F score de card, right? This form surrounded as a border
this is called as a car. OK? This is code and registration
It consists of four different text fields. Right now, let's test that whether the data is added added into your database
or not. So first name I got is John, last name Peter email John at gmail.com password
your type but password. I just use 123 click save button. Yes
student registration, successfully student registration. Successfully done. Perfect. Right. Ok. Now the request is successfully done
If you can check it, impact if you get any error, right? Click and impact go to the console tab
you can check it there. Uh What is uh when you click the save button getting error
you will be checking what kind of uh error on the consult app
Ok. Consult it easily. You can find there, you can follow up there
Ok? Right now, after done the registration part, you have to go to the login
ok? The login model, right. Right. Now what you're gonna do is after that you have to go
Uh Right now what I'm gonna do this, I'm going to go to work logging
component inside the login component. What you can do is I'm going to press
this code this simple go. Ok. This code consists of simple fees
Ok. So here, right? You can see here
Now let's try it and form a document right now. You can see here
Do you start and you close it? This is this class D class container which is a boost up bootstrap
style. So boost up as row row after that, we, we have written the ending which is a logging
This is called as a each one, our hr type which is called as uh hola
Ok. Under the login, we have a small underline. So you have right
Each are te after that, we have write another, we are called this new started here and close it here
After that, we have to write another deal. Ok. Inside the deal
we have to call as a co Callum small six. Ok. We have to
we have to mention the size over here, whatever size you need, we have to mention the size over here
Ok. After that, inside here, you have to a small d small form
This form consists of email address and password and two fees. Right now
You have an idea. This is a small html file. Ok? It's a type email class which is a booster ID place order
in the email. These all these are all the things I already explained
What WW why we have called this one. OK. This is React
OK. This is we have to maintain with the state in React
We have write this function on change, right? The same thing, the password asset
OK. I no need to explain more. These are, these are all the things I already explained in my form
registration part. So here also we have one button which is a login uh submit uh log in button
Ok. Log in your name it as log in, it has one on click method login
right? That's it. OK. That is a design. But we have done successfully
Now, let's go to the programming logic. So logic, we have to update over here
uh go back to, right? But these are all the things we already installed there
A Xio is package the same thing I just this user that we don't need
we are not using at the moment. Let's get rid of this one
Let's copy this one back to our um application over here, your past but
not yet it past it and all the function. OK? So the things right
OK. Let's go straight run. But now here log in. I'm going to be ill be explaining
Don't worry, copy and paste it. Now let's for me the document
right? OK. Perfect. Like no. Yeah, you can see here. Also you can see the states
you create the state, the states but uh why we create the state we have discussed in react the value whatever value you type on
the particular text field. OK? This that value should be stored as a state
OK? If you type the email on this particular email, text field
it will be stored as a state. It will be stored in this function set
email function, this function passing the email over here, it maintain as a state
OK? The same thing as a password as well. After that, we have to create another things function you code as you have to create
the another object you are called as navigate. So navigate. Also we have to
you have to uh the navigate. Also if you are installed the react router
do this package, then uh use Navigator component is there. So we have to get it and use it concert navigate
OK? Navigate, right? You use your uh use this object navigate after that
what I'm going to do is here inside. We have created one function log in
OK? When one, once you add, enter the email along with the password
click log in button, it goes to the function which is a login function
OK? This is a one click method. Even prevent default. You can type the uh write the try and catch block here
You right, right here. This is a post request for the login and the respect you API S this
this API already we had discussed about our back end, which is not. Yes
OK. This is the log in API. So here this one should be the email and password
This is the database field, database schema. OK? This is a data based scheme
OK. Here you have 10, these values are coming from your phone. This is form values
Ok? Whatever name values you have, set it here. It's coming here, email and password
You have to say email and password, you have to hit, then you type dot Then you get the data
Ok. Get the data. You can check through the console whether the data is successfully displayed or not
If you enter the user name and password. After that, you check it
OK. Data, you are putting the value data. Just get this data
This uh uh res dot data, you check it if the data dot status
Ok? Da data dot status equal through mean log in successfully. After logging successfully
it navigate to it moving to that home page. If the login fail
it displays the error messages login fail. Ok. That's it. If there is any issues with any code issues
it's called the fail fail method and display there. That's it. That's a simple stuff
You have to do it here. Now let's save all these all things
Let's check whether it's working fine or not before that. Go to the home page
Ok. Home is there? All right, all things are done. Now, let's check it right here
Log in your track right here. Log in sum will come complete successfully
Now, write the different login and password. Click here, login file. Ok
Now let's create the register login user again. I'm going to register the login user
Raja Steam email Raja at
gmail.com password. I give you one password. Ok. Keep, remember this, use an email and password
Then only you will be able to log in click save right now. Let's back to the user
your go to the home page. Now you type Raja at gmail.com password
What's your password you're given you type here. Click log in, log in successfully
Click here it goes to that home page. See your back end
One thing, I forgot to tell that your back end is working here in the back end here
I'm going to go to the server dot Js here you have to change
the poet. This is, this is for the above. React. So React is working 3004
You are sending the post over here, OK? 3000 then it works for
Perfect. That's the thing you have to do like 3000 saver again
you have to start the server. Not Yes, sir. OK. Once you change anything in the back end control
see to stop to your back end and you have to type not server dot Yes
Again, that's the thing. Help. Thank you for watching. If you have any doubt
you can ask me that. Thank you