Complete Authentication in Laravel using AJAX & jQuery | Part 1

[Music] hey what's going on guys hope the one will be fine and welcome back to another tutorial so in this video i'm going to explain you about the authentication and not only the authentication that you are going to on in this video but you can learn about other stuff like you will learn about how we can register you will learn about login you will learn about the register about the validations and everything which uh which is actually included in the authentication and if you see a lot of other videos on youtube ton of all the videos if you can filter them out but this is an absolutely different video that you can't see and this is all custom made there is no any um there is no any built-in features that we have used which is included which is the auth which larval provides automatically but we're not using we built everything using ajax and jquery so let's jump in and give you a demo for this video so if i just go to uh if i just login slash register and this is going to open up my registration form and if i try to click on the register button and you see that we have a runtime validation that you can see on the in right in red color we have the validation we need the full name is required last name is required email is required password is required and the confirm password right so let's gonna add up some data so let's give it the john doe and give it the john at the rate gmail.com and if i just try to give it a password of one two three four five and down here if the password doesn't matches let's suppose the password does not match so it can show you the runtime error right so let's put up here six in order to match the uh password so it auto automatically address understand the password now match right so without even page refreshing i don't need to submit the form and then it can pop up the message but it doesn't and it's not in the case in our registration form right so now if i just click on the registration button notice you see you see the notification down here right so this is the green color it says user registered successfully which was just which actually disappeared after two to three seconds right now we are registered and now let's uh log in with the uh registration right now we have a middle middleware as well so if i just only try to open this uh local because of my homepage have this route uh so if i just try to access the homepage this is gonna redirect me back to the login because we have implemented something which is known as middleware which i'm going to explain you in this video and this is all up for the beginners video right so make sure that now if i just check my email which i have used which is john there gmail.com so let's type here john at the rate gmail.com and the password in my case is one two three four five six and if i just try to log in this and now you can see we are inside our uh main home page right which is our main home uh page for the dashboard right so this is there you can see your name on the on the left you can also log out and you can also see the user's listing which i'm going to do in the in the in some other parts but the whole authentication that i have done in this video now if i try to log this out and and if i try to register with the same email so let's give it here again john and do and let's give it here john the rate gmail.com password whatever the password that you type right now because we have already used this email so i have already implemented uh a check here let's suppose if i just click click the register you see you see that now email already exists so if i just again try to type this this is never going to be registered right so these are all the checks which are included in the incomplete authentication and the whole process is fabulous i really suggest you guys to watch it from from the from the beginning till to the end and this is going to be a series where you can do every kind of project you don't need to learn anything from the other project you you have to create the authentication again and again for the process so this is going to be a fabulous video where you can generate this complete authentication in your real time projects in your real lifetime project that you're doing for yourself right so i i can show you the demo of this complete video i have already a video which i have created um march 11 2020 which gives me uh better views because um i believe it just because of i haven't created a full flow through video so so they don't give me as much kind of viewers which i expected but it's okay you can watch this video my plan is according to that video whatever i have created here i want to implement it practically where you can learn much more and same in the case of my second video where you can see i got 119 likes which is incredible from you guys and 5887 views which is still fine and i think so this is what i've done for all of you and i'm i'm pretty happy that you guys have done a sensational job and then and you give me a great feedback for this so i highly suggest you to watch these two videos where you can understand so this is going to be old video which with same functionality a little bit change on this recent current changes because this be uh most recent video after that so this this has been released 11 january and this has been released in 2020 march 11 so there is a difference right of here or so so you could understand from those two videos right so so that's it right so i hope you have understand with the all the flow that we are going to uh create and i also created here our project um i created my laravel project just right now and uh with the name of authentication so there you can see it's a fresh copy all you need to do i already i think that you can watch my all videos but just simply install the composer create dash project laravel laravel and authentication and the name of the project that you need to install and you need to do one last step here is um you have to make sure your exam server should be installed on your system and i have already uh on my apache server and you make sure that they both have to be on and and you have your composer installed if you have an install you need to visit to do the composer dot org i believe yeah so if i'm not wrong uh this should be uh something else right let's open up the composer so you need to install the getcomposer.org right so you can click on the getting started and all you need to do is to follow some steps so installation on the windows click on here uh so there are two ways you can install from the composer or you can use with the command right so i believe the recommended way is that you can simply install the setup installation very basically oh i'm using here visual studio code as my terminal um as i always use so you can install from your uh install from here and i'm i try to make this video all for the beginners friendly and everyone can install it so you can install download from here if you are using mac you there is a installation that you can easily install for mac and last thing which i'm using the terminal which you can see here which you can install from the git dash scm.com that's where you can install the kit and click on their download for the windows right so i'm i i'm using here on windows and i i hope pretty much very basic concept that if you are on mac you can click right up here and for the installation right so that's really much for this video so thank you and i want to see you in the coding part all right guys so welcome back here and now let's get start to the very first process so first thing i'm going to do here is to go to my dot enb and set up my database so let's give it here the name of authentication right and that's the first thing that you need to do and just copy that authentication and let's create a database i'm going to close all my previous tabs and let's write here the create a new database click on the new and create that right so now our authentication has been created you can do one more step that you can manually create the tables by you can you can go inside here let's create a new table name or something like that you can do but the preference the the better way of doing in laravel is to create migrations and if you are not aware of what migrations are don't worry i'm gonna explain you each and everything from the from the scratch right okay so now our database is uh we have created the database and the first step that i gonna follow up here is to create some layouts for the file which again the recommended way which is a better way of doing things right so inside my views uh already you could see the file of welcome.blade.php which later later i'm gonna change it to home.blade something like that right so inside views i'm going to create a folder with the name of layout so let's create a folder with the name of layout and inside layouts i'm going to create a file with the name of uh let's create here a folder first okay i'm i need to create a folder another folder inside it so let's create here a folder with the name of includes and inside layouts i'm going to create here the file with the name of master.blade.php which is actually our main file where we can where we can extend our our css extend our javascript and everything right and inside includes i'm going to create some off files let's suppose i need some navbar so let's create here nav.blade.php um i'm also interested to create here a footer.blade.php all right all right so i think so it makes sense to all okay now inside the main file which is a master.blade.php so here i'm going to create here an html and let's set that to be authentication uh complete um i think so just want to make a silver complete authentication learn all right so now here i need to add the bootstrap so let's grab the bootstrap and i need to go to my uh close that up and we don't need any further tabs so let's open up the getbootstrap.com which is a new bootstrap version so we can grab this you can grab the cdn's or the bootstrap and let's add that after the title and just just remove that it looks more cleaner to me right uh there is no issue still you there is that's something else that if i can remove the integrity and and something else cross origins right and now copy that the script and let's paste it down to the body ending tag right okay now i need to do one more thing here is to add the jquery so let's open up the code jquery and you can just get the uncompressed version which is taking time all right so let's grab the uncompressed version 3.5.1 copy this and paste it just after the above the bootstrap js script right okay now um that's fine again remove the integrity and cross origins okay so now inside the body i need to give pass here something which is known as notification that dave like i need to create here uh our divs with uh with we're showing some messages so that's why i'm creating here a div inside the main body so let's give it here the not if div right so that's our basically notification div and i also need to create here a style dot css so let's create here uh the style dot css which should be inside my acet which is the base u which it creates a base url for you so if i keep that empty and try to save this but um later on i'm going to show you but uh because it's it provide you the localhost and the port number and rest of the things i'm adding up here which is the name of the folder which i'm going to create so this thing brings after the public so inside public i have a folder with the name of assets and inside assets i have another folder and let's give it a style dot css right so as i explained inside uh for in your root directory i'm going to create here a folder first with the name of asits and inside asics i'm going to create another folder with the name of css and let's create here a file with the name of style dot css right so i hope it makes sense to all okay so we are we have done with that now let's write some css a very basic css which i'm not gonna write but i'm just gonna paste it from my code so that's the code you need to define inside your notifications to div so that's the z index which i want my div to show the text on on top of the screen and display none and by default it should be invisible because i i need to hide this it will only pop up the message once it's called from the ajax and the background green font weight with 350 pixel position 300 position is fixed top left color and the padding i add the padding right and this is basically for the error messages once we have once we click on the submit you see the uh the validations in red color so that's why i gave it a color and later on we can we we're gonna use here a class add class which is a jquery method which can uh which can call and run this style right okay so we are very much close to our master file and inside here i'm going to create here inside my body just after the notif i have to create here something which is known as yield where we can extend our content to the other pages and uh that's that's why we are using here something helper function in laravel blade provides you where you can extend it so that's why i have used here yields all right okay so later on i'm going to add the header and footer but for now i'm happy with that so let's create here our pages so i'm going to create here pages so we have our views let's create here a file with the name of register dot play dot php and change that welcome double doble.php to home.blade.php or you could say you could say that dashboard.blade.php is up to you and and all i need here is go to myregister.blade.php now i need to extend the layout so how we can do it we can do away with the name of extents so i'm going to extend my layouts and inside layouts we have a file a name of master so the basically i'm you i want to extend this and we need to yield the content just like we pass inside the master so here i have to use here a section so let's give it the section name to be content which is coming from the and make sure that you have extension installed if you're using vs code you can simply type your laravel uh snippets or whatever i have installed the laravel snippets which is basically this by vinnie lynn and it's a it's it makes a lot much easier for you to uh which can highlight your helper functions a lot much good okay and uh basically this is coming from the master double which is this right i hope it makes sense to you and now inside here i'm going to close i'm going to create here some html here so let's create that so inside section um i'm going to create here a container and inside container i'm going to create a row and let's create here call that md-6 which is a bootstrap class and i need some margin horizontally so let's make it give it the margin order and inside that uh let's create here a class of cards and give it a card of header and let's give it the card dash header give it the background of dark and i also need the text to be white right text dash white all right and let's give it a registration process so registration okay so this should be bg uh dash dark all right okay so here we have our div and inside this div i'm gonna create here h4 um this should be h4 and let's give it here our class of text center so text center and let's give it the um i need this text to be inside h4 and remove this div and just put that right after here all right so we have our div inside our div we need to do here is to create here a card body let's create here card dash body and i need to create here a form uh which i where i don't need any i don't need to submit the form with some action i need to use here ajax and jquery and let's create here the field so form dash group and let's create here label for equal to so we have some fields which i haven't create any migration which i'm gonna do first so let's after the label create here input type of text and class of form dash control all right and next you need to do here is to define the id and the name so let's give it the f name let's pass here the name and placeholder equal to enter first name right okay so i i need to create here model so what are my models models are just like the tables that we are which we will create where we uh rather create as i explained that we can create tables in with our database manually but a good way of doing is that we can do with migration so in order to create your first table um you need to do is to php artisan make model but why i'm not going to create a model here because we have already larval provides a model with the name of user.php which is inside your app and inside user.php you could see that you have your some fillable fields which are name email and password and you have hidden fields and you have cost all right which is email in the daytime right so let's go inside your database migrations so we have our users table the first one okay so we have by default we have our name email and we have our email verified ad so i'm going to copy it from my previous code and let's replace with the uh so i'm going to replace my part these four fields to the new fields that we have added so we have our first name we have our last name which is a which is of type string and we have our email which is unique where we have a method included in the migration we also we don't need any image for this video so we can later on i plan to make a video on craig fulcrud ajax jquery image right so i'm not gonna explain this thing in in for this video so email verified ad we have our timestamp we have a password we also have a is active which i'm gonna do this thing again in the next video so for now we have all very basic fields right so let's try to run this by running in order to migrate the table all you need to do is to php artisan migrate and let's press enter and you see now all the migrations run successfully and i also need to run my server uh just to test this out right so now i have run the migration and you could see uh inside the authentication we have our users table which have first name last name email and verified and password so everything that we have already we added up right i'm gonna close this one too okay so migrations are run we have created the table for the users and now i need to do is to create my fields so i'm gonna copy it from my previous code so right after here i have some fields so just very much seem like we have our first name we have our last name let's give it the last name and we give it the id of last name placeholder okay so we have our type of email we give it the uh we passed the id and the name we have our password and in in case of confirm password i have used here id with a c password and the name is tc password all right so we are pretty much good for the fields just want to tab this all right okay so and i need to pass something here after the master.blade.php which is another helper function which is stack and let's give it the name of scripts and so what actually it does so it does that if i need those scripts to be to uh so i need those scripts which are included in the master and i need to i need to show those scripts also include those scripts in the other files so i need to use that by using a helper function in the other file which is push so let's type here at the rate uh push and name which is scripts and and push right so let's test this out by doing here by writing here some script let's write here dollar document dot ready function okay so pass here an alert so i need to create a controller for the register so in order to create a controller in laravel so i'm going to use my terminal here so let's clear that out so in order to create a controller i need to do php artisan make controller and give it the name of register controller right so this is going to create a controller and if i go to my app http controller register controller so create a function first the public function register so this is the name of the method and let's return the view um with the name of which is um inside our view so i don't need to create anything like that so it's simply a folder so in order to access the main file like after the views we can start giving the name of the file or the folder but it is uh inside our views directly to it so i don't need to pass any folder so now next step is that is i need to create a route for it so you need to do is to go to your routes and web.php all right shroud get let's give it the name of register which is the route and the name of the controller which is register controller and the name of the method which i want register all right so this is good and i i'm gonna remove this i don't need welcome like that and we also already changed the name of the file so i'm gonna create here uh another controller let's give it the controller name to be home controller so let's go inside your home controller which is home controller let's give it a function public function home and pass here view so let's give it here return view and pass here home right and we need to create a route for the home page so home page so let's pass up here route and get slash name of the controller which is home controller and name of the function let's give it the home right which i believe i have defined right yeah okay so we are good to go and now i need to test that out if everything works well so this is my previous project so let's close that up and open up the new one so yeah it shows laravel which is fine now i need to access with the slash register and you could see now our jquery is running which is a good sign and i click ok so we have our registration heading we have our first name last name email password confirm password the last thing which is missing is the submit button so let's go inside your register.blade so i'm going to create here a button right after that div so let's give it here a type of submit class of btn btn-dark and btn-block and i also need to pass here id of save underscore form let's give it the name of register and check this out all right so we have our registration register button and uh let's put some margin to the top so looks separate so i'm gonna give it empty dash four all right so it looks fine so i forget to pass here the label for the first name let's give it the first name all right and remove this alert and refresh this all right so it looks fine to me okay so we have all the fields okay now we are now we have to write some jquery right so we have to follow some steps so we in we have to first follow the on click function right so how we can do is just simply pass the id which is i need this button once this button is id is clicked right so i need to use here uh something which is known as click uh so event so dot and on so click for on click function so this should be a function right and right after here i have some fields for the id right so i'm going to grab all the values so in order to get those values in i need to do here is to go is to create a variable and with the help of variable you need to pass that id so i have already given the id in every every single field so in order to get the value you have to use a function with the name of dot well and that's how you can grab all the values next step we are using here form so let's give it the form equal to dollar this dollar this dot parents form and let's console the log i can show you what it what does it do so let's go here and open up your inspect go to your console click on the register and nothing going to work now because let's see why it's not going to show me so dollar this dot parents form let's pause here e and give it here e dot prevent default yeah so here you could see now inside our form attribute we can access all the fields so that's the reason why i just grabbed the parent as a form right so i hope it makes sense so that includes the first name last name email password and confirm password so this is what all the fields that i need to submit so that's the reason why i use here as a parent uh now we are using here a validation so i also need to pass here something which is a jquery validator so let's find the jquery again validators so i hope it should be cdn js.com let's find here jquery validator so let's click on here and i hope that i want to be if i just so this should be jquery.validator validate.min.js so let's find here jquery.validate.main.js so let's click on here yeah yeah this one we need to grab just copy this url and pass it to our master.blade.php right after here right so let's give it a script and source equal to that all right so just remove that now and now inside your register.blade.php um i need to create here a validation so for that we give it the form so dollar form uh function with some uh objects we need to pass so dot validate which consists of all the rules so let's define some rules for the name so i need my first name to be required which has to be true so just like after that i need to give it every single value so i'm going to grab from my code and paste it right after here so let me check rules are ending here right that's fine okay so what i actually do here is first name i need my first name to be required last name to be required email required password i have a field here which is required and the minimum length which i need is six digits to at least it should be of six digits and the confirmed password should be matched with the password id and that's how it can compare the two results right and next after that we have our messages uh now we have also can pass here messages so just after that i have already i can copy it from here and you could see just pass inside the messages with the first name is required last name is required so that's how you can pass the messages by using jquery validator right and after that i need to pass here something which is highlighting the in red color so let's give it here um object so highlight and pass a function with the element i want to and select each element and add a class for the error so let's give it the it will get the class of errors right so that's fine now another very important thing now we need to pass here something which is known as submit handler so let's pass here submit handler function so let's create a variable with the form data create a new form data object so form data let's pass a form i need to get the form so i need to pass here the offset zero right and after the form data i need to grab the dollar dot ajax so right after here inside my dollar.hx i need to pass here the request which is a post request and right after here i need to pass the url so let's give it the url which in my case will be save underscore user data should be form data which is coming from the variable and data type of json and process data it should be false p r o c e double s i also need the content data to be false and let's pass here a success function so inside my success function let's pass here the data so here i have a few checks which i will later go later on gonna add up here but first we need to create our registration controller so let's go inside your register controller and create here the fields so i'm gonna create here public function let's give it here save underscore user and pass the request because we are submitting so we have to pass here our request and create the route for it so go to your web.php i need to copy this function and go to your web dot php and let's define here route of post request so let's give it here save underscore user and the controller name let's pass up here all right that's cool now go back to the function and let's write here everything so first we have to apply here a check for the email so let's create here a user if that user so this should be we need to include that on top so user veer email check the request of the email and we need to check if it's already added so show us the error so let's define here our condition if that user exists right so then return the response in json with the exist key and the value i'm going to pass or a message so it said that the email already exists right so it gonna show only the message but in the other case if it's a new user so then we have to create here uh new and user right and new model so user dash first name equal to dollar request and that's the way how you can pass the request so first name and let's copy it here and paste it four more three more times change that to be last name and change that to be email and the password right so first name last name email and change that to be password all right uh but i need the password to be bcrypt so here i'm gonna replace with the b grip right so i need it should be converted into hash right and after that once it's done you have to save the user or i could apply here the condition um are that's fine okay user dash save and return the response or i could copy it from the top so let's return the response but in this case it's successful so let's pause here user registered successfully all right so this is this is all done from here now i need to with the help of those objects i can access the validations and show the response so i need to go to my register.blade.php just after the success function and i'm going to write here if that data exists so if data whatever the data we are passing from the function write this this is the data which is coming from the form so if that data and access the keys from the response which this exists is coming from here so if that data exists so let's pass here the notification so i have a very i have created here uh functions uh like uh you need to do is to define here a fade in function which is a jquery function which can train facing and show the message in red color and the message text is email already exist and i have a timeout function which stays there for three seconds and it will disappear and it will fade out after three seconds right so this is gonna be our very first check for us right so now in the other case else if so in case if the data is successful so let's pass here if data is successful so right here i'm going to do the same thing for the successful message so let's pass up here the message which should be in green color and that and we are accessing these div ids which is coming from the style.css which i've shown you these are all the divs which i've and that div is inserted inside my master.blade.php all right so here it will show me the tax of user registered successfully and now i need to once the user registered successfully i need the fields to be cleared so that's how you can define your name fname dot val and that's how you can clear all your fields right but in the other case if both things doesn't works then the last condition that i'm going to add here so inside else i'm going to pass here the message that an error occurred in the red color and the timeout function will run after three seconds so that's it i hope this is our complete registration process so let's go in and check this out everything is working so i'm gonna refresh this my console haven't shown me any error or so and let's click the submit button which is very nice we are we have our validation working well so runtime let's test this out by giving test test2 and test at the rate gmail.com and you see once i type something that the message disappeared so if i type here one two three four and one two three four and it says doesn't match which is now matching but the password is required because i need to complete the six characters and down you could see now it's asking the confirm password which is working fine if i click on the register it says 419 error and it's actually because of the csrf mismatch token so i forget one thing here is to also pass here at the rate csrf which is a cross site production for audrey so let's pause up here csrf and i also forget here to include my user so in order to include your user model so you have to do here use app slash user which might it gives error later on but i fixed it now okay now let's test this out and again um five six let's register that and now you see your user registered successfully all right so if i go back to my database and you see that the name email password and confirm password and everything is working fine right so we are done with the registration process in the next section i'm going to explain you about how we can uh how we can work with the uh process for the login and that's i'm going to explain in the next video so thank you for watching and i want to see you in the next part

Channel: AB Nation Programmers

Views: 1,232

Keywords: laravel, complete registration in laravel using ajax and jquery, laravel ajax authentication, laravel ajax register and login, ajax login validation in laravel, laravel ajax login, redirect, real time validation in laravel, check email exits check in laravel, how to login and register in laravel, ajax form submit, how to use ajax in laravel, how to make login system in laravel, Simple registration and login in laravel, laravel 8 tutorial authentication

Id: wxNk3WfDoMc

Length: 43min 22sec (2602 seconds)

Published: Fri Dec 25 2020