right
so very simple after install them you have to check that it is installed successfully or not
i already uninstalled that ok so you have to type cmd you have to type now space b
the version also display right it is installed successfully now what i am going to do is
i am going to go to create the nodejs project so you can go to the
d drive you can select whatever drive you need you will be able to select the drive ok
i am going to create the new folder file new folder node project right
here we have created the project so we have to type cmd
here you have to type if you have created the new project on nodejs
you have to type npm init press enter key here this command what does is
it will be creating the package of js that is a simple package
this package consist of consist of the packages all the packages right all the relevant
it ask the package name if you like you will be able to give
the version all things you can give if you don't like you just
press enter key ok i don't need to at the moment i don't need to fill this form
i just press enter key right this is the package of json
right the package of json press enter key yes now you will be able to see here
now your package of json has been created now project has been created right
so now what i am going to do is here i am going to create the project
right you have to create the project right now this project i am going to open up
the vs code editor type cmd command host space dot right now here other things i am going to off
only we have to keep the above the new project only right this is the
package of json you will be able to see now here you can see only the
these are the packages there nothing here only this package is here
right now you have to install the another thing you have to install
node project you have to install the npm install you have to install the sorry
you have to install the relevant library so firstly you have to install the library which is a express
express which is a server on nodejs ok it is a backend
it will communicate the frontend it will be working with the database mongo so
first i am going to download the respective dependencies go to if you download the node packages
you have to type the command npm after that you have to type the name of the
command so i am going to write down the server so you have to write
npm express so here the express click on this one it goes
to the respective page here you no need to
type you just this is the copy you just click on this here get the copy
and paste it over here what happened didn't
copy it press enter key you have to wait until the dependency installation process completed
after complete this dependencies after that you have to go back you have to find any
dependencies mongo which is a database this is a mongo db right so you have to
download the respective dependencies so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so
so what is target? it will be telling the warning of the
MongoDB, this warning will be simply you have to check, so we have to
pass this dependencies MongoDB strict query false ok
once with MongoDB and express, there will be the there will be the
10 issues it will be strict query, you have to call so check like this, the problem
will be fixed sorry sorry the problem will be solved, now let's
again we have to up the server from the C to this one, we have to up the server
it will be start to fully connected it connected first actually right, it's connected perfectly
now let's close it now it's connected perfectly now what i'm going to do is
i'm going to go to do the first one is user registration part
so this is my folder inside the folder i'm going to create the
folder which is a route right, after that we have to create another folder which is a src
inside the src folder i'm going to create another folder which is a a sorry
this is not a folder, we are doing then we have to create a folder, this is a new folder src
inside the src folder we have to create another new folder which is a sudam
in the sudam folder we have to create another file which is a sudam model
after that we have to create another one which is a sudam controller
after that another one which is a sudam sudam service so
we need a three packages, right, first of all we have to
create the modelview architecture so first what i'm going to do is
first we have to manage the route when the request is coming via the route so
what i'm going to do is, we have to go to the route here
so let's try the explaining, don't worry right, here, right i paste the code inside the route, ok
so inside the route, you can see that we have created the folder which is a route, right, so this is a
folder, right we have to, instead of creating the route like this
we have to create a separate folder which is a route right, this route folder
we have to folder the sudam folder, right here, not inside the sudam folder
here, we have to create a folder new folder, route already this folder is
exist, so we have to folder refresh it this file i'm going to
cut off, we have to create a new folder, route inside the folder, i'm going to
paste this file right, ok, you have to create a separate file called a route, route, ok
inside the route, we have to paste this file, right ok, now here
inside the route, i have route.js, route.js we have the same express, what i
did here, the same express, we have to call it here, after that
you have to give the path, where your control is resided, my control is resided
inside the src folder student, we have a student controller, you have to write
student, src student this one should be student controller after that you have to call the routes
like this, confirm route, express route, right or when the request 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, you have to export the
output, so you have to model, export you have to give the route, it will be
this route, you have to export the route output, right, you have to write
the route, you have to write like this, confirm route, express this express, you have to call the route
ok, then only the route will be working, this is the first thing you have to
do it, right, so you have to confirm the route, after the
route, route will be calling there this controller creates user controller, so
go to the this is student controller, student controller, create student
you have to create student controller function so let's go to the student controller
student controller so try this concept this concept
right you have to explain later on this one, so here we have a
student, right so you can see here when the request is coming via the route
this method student create, it goes to the student controller, create student
action method, this method it's coming here, this method, same method coming here, so you have to
request and response, you have to get the request over here, ok, then you have
send the response, get the request via the request body status, avoid
putting this one, right it is sending to the to create the your service
ok, so you have the student service user service, so you have to write
student service, ok, you have to write this one with the student service, copy
student service ok, so here also here that is student service, you have to
call the student service, ok you have to call the student service, student service
also, you have to get student student db service ok, it's also
student db service, so student service, you have to create here as
here also this one should be the student service let me change this one also
request student model right so the service will be communicate with the model, right
the route will be communicate with the controller controller will be communicate with the
service, service will be communicate with the model model is the part where it
communicate with the database and track data from the database and give to the
front end, so here second one c, you have to set the random c here
so here encrypt simple encrypt ok, this one npm you have to install the dependencies, so go to
the google search, so type npm simple encrypt click on this link
you have to bring this you have to get the simple encrypted
click on this one, you have to install that particular dependency, so you have to
this one should be running ok control c should stop it here
again you have to install them right, this is this dependency we need to encrypt the password
password security purpose you have to install this dependency, right, perfect now what you are going to do is, after
done the task you have to model export create, this one should be there
create student db service student db service, it will be called student db service, student details
you have to write student details student details you have to pass in the other details
pass in the other model, right so model, student details right, student details
you have to return new promise promise you have two things if you have called promise function
not yes, you have resolve and reject, ok, if the score, if all the things are correct
it will be resolve, if you assign a failure it will be reject, right
first what you have to student model student model data, new student model
student model student model data, this one you have to get it here, student model data
you have to write this thing, first name, last name email and password, right, you have to take all
these all things are in the other model, right ok, this one
should be other this one, ok student details student details, first name
student details all these, right ok, so encryptor this encryptor is downloaded, right, you have to
insert it, right, then encryptor successfully write, done, perfect ok, so here
when you fill the form, all things are filled 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 have a particular dependency, you have to get the dependency
so you have, there will be three different methods which is encrypt, student password
only you have to assign here so you have to do the password
it will be encrypted ok, after that you have to, the student model
student data, this student data this student data model, you have to
save it this is save it also this is save it also
right, function it will be saved that is the only thing you have to do it
so, if you have any problem, it will be rejected if all things are success, it will be resolved
and proof, after that this one, model, so here use of model, right, so here this one
I am, you have to student model, you have to get model, student model, so here right click
ok, student student model .js sorry, student model .js you have to write like this
you write student schema student schema so student schema you have to write
copy this one, you have to paste it out here here student schema
student schema has, last name, last name, email and path, this all things are here
in the database piece, right you have student schema here student schema, you have to export it
right, only this things you have to do it so, this is only thing you have to do it
now here, we have to see, it is not working, we have to
this one service also, we have to export it outside, so controller
service, service right, service also we have ok, so now let's test it, whether it is working or not
let's save all if you have not installed the portman for the
checking path, you have to install it, this is portman ok, we have all the
restful APIs, we have to check on the portman now if you have idea of such a
port, so first you have to classify the port, what is the port your
server is coming, this is the port where your server is coming, this is the port port
where the request is coming, student create right, so body first name, last
name, email and path, you have to do it like this, ok, it is some
JSON format, you have to write like this in the portman, right
so let's I haven't run that server yet so you have to run the server, node server.js
right, both connect successfully so click send button we have to choose
card, post, student create what is the problem, right the problem will be problem
list back to our project right the problem is the route we didn't call the route, that's the problem, right
we have to call the route route also we didn't call, that's the problem
ok, the route we didn't call it in the server server we have to call the route
that is must, so you have to write the route your route is here, your route is beside
so give the route in the server the server file is coming
you have to mention your route is here, beside route, which are
route folder inside the route folder, we have a route file is there, right, so after that
which we are going to do, this here you have to import this route, so you have to
give the route over here, call the route over here save all, now let's back over here
can't see the save can't see the what is the problem ok, there will be the error
you have to find the error like this route post which are the callback but not the
object undefined the problem is here, what is the problem here is callback
object undefined mean we didn't export it, that's the problem so we have to export
outside, so controller here, model export whatever done, we have to export it
right, so we have to copy this one i have pasted over here, you have to login
function will create later on and create controller save after that what I am going to do is
we have to get the error which is front service, rear service
ok, here we have to get the this one, this this is the path of the
which is decided, this path we have to give this variable this variable will pass it here
right, status student service, it goes to the method service create student db
which go to that particular method so student db method db service
which decided on the service so the service you click on this service
where this service is ok, it goes to here right, it goes like this
so here, the same model we have pasted over here right, just
only thing we have to do is go back to our service
here you have to implement the json then only it will be working
so here json this that you see, app use express json ok, that json
then we have to save all now let's run the project again
now it's working, there is no error now I am going to
execute the code, so I am going to john ram ram
at email dot com password, ok now you can see, user created successfully
the record error successfully right, now what I am going to do is
after done the job, now let's back to our login, login section
we have to do the login section, so we have to do the first time
go to route, so to implement the route router user login
this one, we have to get it here route over here right
so you have to write student login if the request is coming
student login, go to the student controller login action method, ok so we have to student controller
we have to write this login action method so we have to
so we have to call the student action method, so we have to write
this one right right, login controller
student action method, right login controller, login controller we have to import, we have to
export it outside right, so login controller request a response, request we have to
user service, login db get the request, so here we have to
user service, this is not a user service, this is a student service
we have to create the function login service, right, so we have to validate
the function, so here we have to create another function which is a login
ok, login function right, this simple function we have to create, this function
what it does is here, we have to get them over here, we have to
this model, we have to check all the username and password coming the, this one should be the student model
student model data is coming from the student model, it check the email id, so email
id is, if the email id is match or not, this one should be the
student details student details it will be check whether the email id is correct or not
right, if the email id is exist, not exist it will be rejected, if the email id is exist
it go if the username and password is correct ok, first we have to decrypt the
password, we have to use the encrypted decrypt written what is password we have written and we have to
check it, the user details match with this one, so user details match
with this password, if it is match student validated student validated, otherwise student validated failed
right, that is the thing we have to write here ok, that is the thing we have to write here
so here now this is student created right, that is the thing we have to write
over here ok, just simple stuff still I will do it cycle fully
right, now let's see convolution save all and save again we have to run the application
ctrl c post, run the application again we have to check it the login, when the request is coming student login
post picture click send button it shows validated successfully it is working for popular
if it is a username and password drawn it is saying validated successfully
if it is a username and password is correct it is working, now your front end
back end is finished hi, today I am going to teach about the front end of
artificial react we already completed the back end part of this, so here
first we have to install the node react in your computer so here, if you communicate with your
front end and back end we have to put your project name
for the exercise so here, this is my back end right here we have to
we have to put your project name over here, inside the project name you have to
create two different folders, one is the back end and another one is the front end
because make the operation look like this so here I am going to
give the folder here that is the react front end, so here right
so we have to do like this, that front end that front
here I am going to install my front end of the application react, so how to install
the react, you have to type by a command cnd go to
google and type react get started react get started get started
now you select get started right, here click on the a
install create new app so here this one, create a new react app
so this is how you have to create a new app so you have to
this command, you have to copy this command and also you have to copy
go to your folder this one is your folder, here we have to update your
project of front end so here you have to paste the address bar
on cnd, you have to get the command from the out here, right click
and you have to paste here so you have to give the name of the app
front end front end front end I give the name as front end
so now press enter key on your keyboard so wait until the process completed
now here now here react app installation completed, now here your content is
created, now you have to go inside the folder, you have to type the key front
end, press enter key you go inside this folder I am going to open this folder
folder structure in my vs code, so I have to open it, you have to type
the command post space dot now the entire project will be open on the right
right, now you can see see the entire project has been open
open on to the vs code so type task
right, now here all the folder structure will be open on my
vs code, now here this is the src folder this is the src folder, you can see
that hash dot gx right, this is called as thumb point right, this is thumb point
right, now you can see here inside the public dot html index dot html
this is the our single page application, this is the each folder root
this is the loading the root ok, so this is the root loading
so it goes to the index dot gx index dot gx will be calling the
root here, this element it will be loading here, see it will be loading this one
at the base, this is the program ready to go, right, now what I am going to
do is, first I am going to do the thing is, I am going
to go to install the first package I am done, first step I am going to
create the route, route is important stuff ok, if you are going to the
registration page, home page and route, so first I am going to go to
create three different components so you have to understand the route now
go to the src folder right click, here I am going to place a
new folder which is the components you have to take the components
folder, components right inside the components folder right click new, I am going to
create three different files first of all name is home page, home
dot gxh ok, you will type gxh also but in react extension you have to type
gxh, then only you can see the react route, ok after that
second component I am going to write here wait, you registration, so type
registration or register so register dot gxh dot gxh this is the
extension, third one I am going to write logging component, so logging dot gxh
right, we created three different components, home component, login component, registration component, right
so first after that, what you are going to do is, here I am going to
add dot gxh, here I am going to create the route, so route
this is the route, you have to go to google type npm
router. ok see, it goes to the npm package, ok this is the code, you don't type
this all the time, ok, if you are doing a spelling mistake, you can't
install, you just copy and paste ok, so go here, this is your
project folder, ok project folder, don't install here ok, you have to install inside the project folder
whatever package you have downloaded you have to download, you have to
install inside the package, that is how it should work ok, type npm i
react-dom plus enter key, you have to write the installation command it is installing right
here react-dom is installed successfully, now what happens inside the package, you will be able to
add the route, so that's ok so here, this all things, this is the react welcome
page, I am going to remove all things whatever written over here
we have to remove it, now if you want to see the home page, now
which one, you have to type text and how to run the saver
how to run the application once installed, you have to tell them
npm start, you have to type npm start, otherwise you can start it, npm run start
ok, npm start you have to type, now your react app is configured
and loaded, you have made the process completed you can see the test app is
successful, ok, whatever we have been doing right, now there is a
error, the logo has removed the react logo, so you have to
remove this all things, now we don't need them, hit save all and save
now that error go away, now you can see the error go away, now it will
display, ok, right now in this new app, I am going to write the route right
ok, now first you have to write the route, so first what I am going to
do is right, how to route the, how to write the route
first I am going to go here, inside here first you have to write the package here import
browser if all the package is coming from there here, route the route
if you are not using the route the route package you have a, you can't
you can't you can't, you can't you can't, you can't you can't
access this compound, this compound, right, so route, this package this all things, this package
anywhere, route, you have to access from this package other route ok, all the things, after that
only, you have to get them, you have to call them, right, if there is a new tag, you have to
write, this route, browser route browser route browser route open bracket and close bracket
inside here, you have to write route route open and close bracket
all the rest, you have to write another thing is that route the path
you have to give the path, so you write route as you have to write like this router router
router path slash home element within the bracket, you have to write like this here
before you have to write give the element, here you have to
if all the package pages are blank, so the page I am going to write this whole thing as copy ok
instead of path, what you have to give here, home here home, you have to export outside home right
inside the route, you no need this one just write h1 tag or any tag
h1 tag, home right, same thing copy, paste the login component as well, this is the login
here also log, so here, you have to press F2 key on your keyboard
on your keyboard, instead of changing like this F2, ok, if you are here on your
laptop, press F10 hold down the F10 key down and press F2 key
you will be able to get it, now here if you see here
press enter key, everywhere switch register also sorry this all been kind of copy
component paste over here here also, so here F1, hold down F1 key, F2 key down
and press F2 you will be able to register press enter key
with all of these keys just change here as well alright perfect, now let's
save all all the components, key components we have pasted successfully, root and components
now you have to access the pages here is the home component
you have to write very much, here you have to enter key
very much if you have type the URL like this, slash home, it goes to
the component which is the home component you have to write the component like this home
home component here, you have to click on this one so component is called, component
successfully, so here you have to copy and paste the components like this, that's it
that's the thing you have to write, same thing another one, instead of writing
each time, if copy and paste is in standard way, you have to do it
second is the register, if the register key is coming register like this
it goes to the register component, you have to type register register
press enter key here, pass as the automatic input, ok copy and paste it
here you have to write another one is the login when the register is coming login
here login, when the page is open it goes to login page
ok, that's the way how to login page, so right, so you have to write slash slash
then when the page is open, it goes to login page, so login
right, so what so login so sorry, because login is over here
so type this right so copy and paste it if you want export it, just write like this
login press enter key on keyboard, generally the component will be imported, ok
right, so this just type it down right, so here, perfect simple now, this how
we have a browser, now let's take the final mark, so let's back to our browser, here login
is working, so the register register
if it is a form it goes to home successful that the out is working
now that the out is working, successful now I am going to go to first
go to the register page, I am going to go to the register page, perfect
how to do the under register simply simply I have already register, page is there, I will be
explaining, ok, without wasting the time simple, I have this simple page, I just copy and paste it, I will be
explaining browser, that one right, if I go step by step, it will be written, it takes too much
of time to complete this project, that's why copy and paste it, right, now I will be explaining
right right, now what I am going to do is, you can see here
this part, here this all things also left this is the plain HTML file
ok, this is plain HTML file, ok, that's right plain HTML file, the HTML file
has a view tag, it has a view tag inside the view tag, we have
only one view tag, no one in the type, true and false, inside view tag
you have to try to do plus bootstrap, which is a plus will be
right, sorry, one thing I have forgot to change, which is that
the, I forgot to implement the bootstrap file so where I am going to implement the bootstrap file
we have to go to the project folder intx.html, this is our single field, main
so here, inside that rstack, we have to implement that so how to implement that one
so it goes the respective excel which is a bootstrap file, so bootstrap
type bootstrap ok, bootstrap, present a key this is get bootstrap, click on this one
it goes to the respective excel right, so here you have to go under the topic
include yaml so you can see the link and script this is for
css, this is for javascript I did this one for css only, here you just
copy the script, clipboard clipboard copy, cut and paste now you back to your project
your page inside the app control V on it, ok so it is pasted
now after paste, you just go to file save all ok, you have to save all
this thing you must do it watch, after done the stuff, now let's back over
register page again now this, this are bootstrap, this is a bootstrap file, container
mp4, ok right, after that you have to write a class start, you have to write a
class start, ok, you have a idea about what is a, how the class works
in bootstrap, ok, if you don't have an idea about what is a class, you
just go to google it and you have to type the google
bootstrap start now you can get the result how the class look like, so this
is the class look like, here this is simple class look like, ok
right, if you like you can put on your project otherwise you can remove it, ok
that is your wish, right now inside the class, you have to
write a heading, which is a two line registration this is a
h1 tag, ok h1 is a heading tag ok, it is called a heading tag
it is nothing but a heading tag ok, but this is a form
it is a form tag, it is nothing but a form tag if form is started
ok, form is closing right, otherwise you can see the, this view tag, two view tags
is started, this three view tags is there, you you must close it below
this three things, whatever view tag you have started, you must close it, ok
ok, some of you are not going, once it is started, they are not
closing, ok once it is ended, they are going to close each tag
each view tag, right, it takes too much time to complete the project, ok
you have started it at that time, ok once you start the view tag, you must
close it, that is a progression related to the project right, ok, inside the
form, we have four fields, ok we have, it consists of four form fields
one is a first name, second one is a last name, third one is a email, fourth one is
a password, right, so first name ok, this is a label first name
it has a input field input field, type that text, this is
a class, this is a booster form controller form controller, right id, I have given as
list name ok, the first name I return the show I return the show
format as list name here, placeholder this is an intending your project, instead of
the entire name, your project interface name right, value if name, ok value
I am just saying same thing on change event, your project set if name, right, this one I
will be explain in few minutes ok, right, this is the thing which is coming from other
this is a simple stuff you are coming to other, react ok, react, ok
on change, ok, what is this method done, all things I will explain in few minutes, right
this all things you have to get your mind, this all the stuff, your
same HTML, the same thing is the last name as well ok, I
no need to explain again, let the last name here also value
on change event, this one I will be explaining how does email, email
is, email, the last name you have to the type as text, but this is email
ok, in bootstrap they are giving validation automatically, so you cannot type on the
text box without the email format ok, without the email format it getting error, so that
they are implemented in bootstrap they are implemented here type email ok, we no need to take any validation for
it automatically error should be this, this is not your email format, right
so here you have to type email and this time, here id
the same thing, this is email, right you can you know email, placeholder
how does password look at password look at password here password also, the bootstrap
you must type password it automatically, bootstrap recognize as, this one is filled
as a password it automatically understand this is a password it is very simple, so this is small
design, how does it, and finally you have written the simple button
it is a simple button, you have written this, bootstrap primary, you type the argument
it has a one on click method that's it, that is the open and close it, your own type
and finally you have to this is simple code this is very simple code watch
inside the return we have paste this code, this is all the
HTML is working, right inside the function, it is function we have written our logic
ok, inside the return only we have the HTML is working inside the function, above the return
we have a function, inside the function we have write our logic, program logic
right, now I am going to communicate with the API API versus
where coming from in my backend so, what I am going to do is here
I am going to install a another decoder asos so you have to write
type, npm asios ios this is the definition you have to communicate with the
it will be successfully communicate with the rest of the API ok, so here simple npm
ie, i stands for install it is a short form of I
ok, copies that's for my project sorry, that's for my this is my project directly
you have to open cmd paste the command, press enter key this dependency get installed
ok, they in the front end framework and they implemented the npm packages, dependencies
all the dependencies, we have implemented one dependency if you are calling the full API
we have one dependency and if you are bootstrap ported, they have implemented
one package ok, it is very simple right right, perfect right, now
what I am going to do is after installation successfully we have to import the package
ok, this name piece so, this is the name piece we have to
import that, I will explain it, so don't worry import asos this is coming from after install we have to
use this package, right this is the user state, user state this is coming from react
hopefully, if we have to install the react it will be already available in the react package
you don't worry about that, right after that, in the registration form
we have to simply I will explain down the way ok now you can see
we have to create this should be the function component, we are
going to project other function component we have react project in two different ways
class component and function component, but function component is a very famous one
so, here we have to write the function component how to write the function component first
we have to make a user state, the state is called as user state, ok
so, if you see this, now I have come to this line, now you will be
understand, right, this line you will be understand, to write res name on change then
set res name, ok, what type of value you have type on this particular text
piece, what is the name you have type on this particular text piece, what happens
this name should be stored here ok, this set is named, ok, set
this name path in here the same thing, whatever thing you have type on this text piece
it's the same last name text piece, so the value has to
be here, it will be set this function, this state ok, how to
generate and pass it, ok if you have not implemented this line
value on change and there ok, the value should be changed, ok
then only it will be stored in the state, the value is not stored
as a state in react whatever value you have type on the particular
text piece, it is the, that particular value stored as a stored as a
state, ok in react, ok so, here also the same email also the same
whatever you have type on this particular text piece it's stored as a
on change event, this function it will be stored and get name over here and
pass it, it maintains the state all things we have maintained the state, that's it
that's the thing we have done right, after that we have one on switch method we have written
inside the button, so on switch save when you click the save
button, it goes to the save function whatever save function you have written
over here right, it goes and click here, here you type event
ok, say event prevent default, what is what is mean by that
this is, if you have you already aware of java and github all this, java
after this is called as action event, ok, the same action action event in
react, here we have written event prevent default if you have not called this one
if you, when you click the button nothing will be happen, so that we have
tried before, you have put in this assign so you have to avoid, ok
how to do try and catch this is important stuff, ok try and catch
when the error come what kind of error, you easily understand the error of
mistake inside the cache right, try block, what I did here is
first avoid access here, post this is the request which we we have already
discussed about our dashboard application to postman ok, this is the request
we have to create the record so you have to go along this post, you have to go to the post
ok, right this is the route, you have route it go and create, so here
you can see this all, you have to show in the same thing in our
postman, postman what are these this co-ordination of the database piece ok, database schema, what is
schema, you have type on your schema schema all stuff you have done in our
if you have not, you have forgotten that one the same name you can check it
the same name you have type on the schema, first name, last name, this is called as
student model ok, this is student model model.js, you just go and check
it is the same name or you have type different name see a different name, it will be
error, getting error same name you have checked it, this is database field, this also
the form field, form field is name here first name I am going to type the what is the id here
you have to read that, first name ok, real name email and password
this is database field, the whole database field you have checked in the form field
ok, right so, when you type on the particular set piece data
when you click that button, this all the data should be coming to set it over
right, and go to this this, it goes to here this API, and
as I have put into the database, I have done the task, school of registration type of
that is simple task you have done very simple, this is very simple task, right
if you are using this one it takes too much of time to complete that, that's why I
ask you to copy and paste it, don't worry I will provide you
now let's save all now let's let's save all, now what I am going to do is let's
run the project and check whether it is working or not back to our react here
I am going to type register, press enter key see it successfully
going to, went to register page, ok see this is the task
it is called as task, ok score, score right, task right, the form, come on the top of the board
this is called as task ok, this is school of registration it consists of four different
text fields right, now let's check whether the data is added into database or not, so first name
I am going to run, last name Peter, email john at email.com
password you have typed whatever password, I just you have to enter this
click save button yes, student registration successfully, student registration successfully done, score right
right, ok now the registration is successfully done you can check it, intact, if you get any
error, right you can intact, go to transfer tab, you can check it error
what is error when you click the save button getting error, you will be
checking what kind of error on the transfer tab, ok transfer tab, very easily you can
find error, you can solve error ok, right, now after done the registration part
you have to go to login ok, just login model right, right
now, what you are going to do is, after that, you have to
go, ah right, now what I am going to do is I am going to go to
I am going to go to login component login component which was my address
I am going to take this code this simple code, ok
this code consists of simple piece ok, so here right you can see here
now, let's right click and format document, right now, you can see here, view started
and view loaded this is the heading this class, view class contains, which is the booster
booster, style say, booster path row, so row, row whatever, we have written the heading, which is the login
this is called as heading, this one is tag or hr tag, which is
called as underline ok, under the login, we have a small underline
so, we have to write hr tag after that, we have to write another row, we have to called as
this is, started k and loaded k, after that, we have to write another view
ok, inside the view inside the view, we have to called as a column
column, small 6 ok, we have to mention the size of it, whatever size you need
you have to mention the size of it, ok after that, inside there
we have written a small view, small form this form consists of
email address and password and two fields right, now, you have the idea
this is a small HTML file, ok, it is a type email
class, which is a booster id, place order type email these all, these all the things I have already
explained, but why we have called this one ok, this is a react
ok, this is we have to make an interface in react you have to write this function functions
right, the same thing the password aspect ok, I no need to explain more
these all the things I have already explained in my home registration part
so, here also we have one button which is a login, some
login button ok, login, you name it as login it has one on-pitch method login
right, catch it ok, that is a design part we have done successfully, now let's go to the
program login so, login key we have captured over here go back to file
this all the things we have already installed there a style package, the same thing
I just used we are not using at the moment let's get rid of this one
let's copy this one back to our application over here, we have paste it first
paste it above the function paste all the things, right ok, let's use paste
now here login I am trying to explain the ground logic copy and paste it
now let's form a document ok perfect, right, now you can see
here also you can see the state you have created the state
why you created the state, already we have discussed in react, the value
whatever value you have typed on the particular text field ok, that value should be
stored as a state ok, if you have typed 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 passes the email over here it maintain as a state
ok, the same thing as a password access already we have created another thing
function we have called as another object we have called as navigate, so navigate also we have to
we have to navigate also if you have installed the react router dom
this package can use navigate as some form in this case so we have to get into use it
contact navigate ok, you navigate right, that you use this object navigate after that what are the other steps
here, inside you have to create one function ok, once you have entered
the email along with the password, click login button, it goes to the function which is
a login function ok, this is a onTrick method, you can put it on default, you can
type the, write the private text block, here you write avoid, here this is a post
request for the login we have to add the respective API, this
API already we have discussed about that way which is now there, ok, this is the login
as well, so here this one should be the email and password
this is the database key, database schema, ok, this is database schema, ok, here you have to
this values are coming from your phone this is phone values ok, whatever values you have set
here, it is coming via email and password you have to get the email and password
you have to get the date, you have to write dot date you have to get the
data, ok, get the data you can check through the control, whether
the data is successfully displayed or not if you have entered the username and password
or whether you have to check it ok, data you have to put it the name as data
this is a ref dot data, you have to check it if the data dot status
ok, data dot status equal to prove me login successfully or after login successfully, if
you prove, it move into that found page, if the login fails, it displays another
that login failed ok, that is it, if you have any issues, any code
issues, it goes to the fail, fail method and it is there as, that
is it, that is simple stuff you have to do it, now let us
save all these all things, let us check whether it is working fine or not, before that
go to home page, go to your home history all things are done
now let us check it now write the login here first I check login sound is completely
successfully, now let us write the different login and password check login site, ok
now let us save the register login blue thread again I am going to register the login blue thread raja email
email raja at gmail.com password id 1 password, ok please remember this solution, email
and password, then only you will be able to login click save, right
now let us back to our user we have to go to home page
now we have to type raja at gmail.com password, what is your password that you want
you have typed here, click login login has been created, click here
it goes to the home page see your back time, one thing I
forgot to tell that, your back time is still working here in the back end, here
I am going to go to the server.js here, you have to change
the port, this is for the our react sorry react is working
3000 port, you have to change the port ok 3000 then it works perfect, that is the thing
you have to do, right 3000 save all, again you have to
start the server.js server, ok once you change anything in the back end
sometimes it will stop at your back end and you have to type
node server.js again that is the thing you have to do thank you for watching, if you have any doubt you can ask me there bye