Alpine JS CRUD Operation Using tailwind CSS | State Management and REST API Calling in Alpine.js

hello and welcome back to the channel my name is Mahesh karya you're watching me on YouTube now and in this session I'm gonna take you through alpine.js so if you are not familiar about it Alpine juice is a kind of front-end library that allows you to have minimal JavaScript and you don't need to write JavaScript that much so it's not like react or viewjs or some other front-end Technologies but uh it is moreover a minimal approach and a minimal library that allows you to write everything in HTML only there are very less JavaScript code you need to write okay so I really like this uh extension and I am really enjoying it but in this tutorial we'll understand is this really good enough to uh create a production ready application or any kind of normal API calling State Management this kind of stuff will understand in this today's session so without wasting any time let's Deep dive into it so I'm gonna uh start quickly with the uh this is uh alpinejs.dif okay and I'm gonna uh start here so you will be greeted with this very beautiful page okay so let's click here on GitHub so uh there are already more than 20K starts we got here already okay so uh it's it's pretty good so now we can proceed okay so uh for that I'm gonna click here on installation there are two approaches like you can install NPA package as well or you can go with the normal CD link as well so I'm gonna create a new uh normal index.html page okay and here so sorry typo HTML not hmtl okay and uh here I'll write HTML5 and one more thing we are going to use till mind CSS so in order to write CSS thing so don't need don't need to write Styles and CSS things it's a if you are not familiar about that as well 101 CSS is a micro framework of Port CSS our library okay so you can clearly see here so the combination of telvind CSS and Alpine GS is pretty awesome and if you are a laravel or PHP developer you will enjoy this guys Alpine juice is for you and based on like your requirements as well so what I'm gonna do I'm gonna again click Start here on oh and I'm gonna click here please CDN and I'm gonna grab this script into my or HTML page and from here as well I'm gonna grab this into my code okay so this is it now from here I'm gonna start implementing the things and you can see here uh we are gonna grab this basic example or you can go through it we can start directly implementing the things as well so we'll start directly implementing the things so we need a form okay so I'll say of form width our name and emails okay in test wind CSS and alpine.js [Music] okay so I need to just start my co-pilot will be helpful little bit not that much alt shift app reload window quickly and we can start writing div till then okay and inside div I'm gonna write a form over here and inside that will create a table okay so let's see what we got so we got a name email and sign in button that looks good to me let's try to run this thing okay and here email validation is already there okay so you can see the this kind of uh classes like MBS margin bottom padding bottom padding top padding x-axis rounded so this kind of pretty simple classes you will find okay this is utility classes based on that utility this is better than bootstrap where you get you will get a kind of flexibility to write the things okay and uh top okay so now let me run this in live server okay here we go so we got a nice beautiful turbine CSS uh pop-up okay now after form I need to create a table where I'm gonna write table or table in televine CSS with name email edit and delete Okay so uh it's going to generate a nice beautiful for me in alpine.js I need to write yes let me try again so here in Alpine just you will get something oh my God like this okay so let me run this thing hopefully so now this is normal pop-ups that we got here and let me see in div what we have so let me close this up a little bit one width one by three so we can do by two so it will increase and by 1 so it will be kind of full not sure let me close this okay by 2 is better for now let's see the rest of the things later okay looks good now we'll start implementing name email here we'll click here it should be added over here and we are going to use Json placeholder uh Json placeholder that is kind of for fake APS so no need to write APS till then and uh if you can see here we just have X text okay and we have this X4 user in user so we don't have users for now and so let's go there and let's create one index.js file and here I'm gonna write document Dot uh just second dot add event listener okay and inside that I'll say I need to use Alpine colon in it on initialized uh I'll get async call okay it should be and this is kind of uh the store things that you can use for State Management okay so this will be async because I'm gonna Implement a restful APS and after that here inside instead of this message you can say users and users would be the empty array the list of array that we'll get now the very first thing would be another thing would be user I need user as well so in that user I'll be having ID it will generate automatically so I'll say um math dot random and dot to string okay and we'll say 36 so it will create a your ID a random ID then I'll be having name I'll be having email I'll be having nothing else fair enough I guess two fields are so after that here I'm gonna say add user okay but it should be async again and add user will face the API okay so how it will do is I need to use a weight method a weight page API slash user so fetch uh I need to grab this code from here to here slash users okay looks good and I can use this method post instead of that domit that would be gate you don't need to specify gate method by the way but uh that it would be great so yeah this is it now I can use dot then so dot then response.json and that Json would be uh inside users I need to uh add that Json which is correct by the way so and instead of Json LC users more precisely okay I'll shift F to format the things so you got this this very basic approach of doing things let me see what the mistakes are making okay now close this thing and close this thing yeah looks good to me now let's go back to the next async method uh async method would be delete user by ID of course so it would be the same to delete one I'm gonna use this response.json and I'm gonna filter out that so I don't need to call the git API once again so that's how we uh why we use State Management so that API call we are not doing here and after that a sync method I'm going to use update by ID but update should have a user not only ID so now uh we will get the ID we'll do the put method json.stringify the new user that will get it will update and based on that will filter out uh that will update that particular user over here for this state okay and lastly async uh create user we did update delete addition get user is a reference okay I'll say load user okay which will be good okay and here we go and what was that add user instead of this one I'm gonna say this is my post method I've completely forgot what else am I saying nothing else let me remove this let me use post here uh here I'll get dark then Json push to new Json okay push that new one to user and this is how I'm gonna end this thing so yeah the all we need to do is to uh import this thing uh to uh here in our main file so this is my main file and in here I'm gonna paste this thing and I'm gonna create a store inside that I'm gonna grab this okay looks good to me so once again uh no need to understand this much of code so X data would be my email name to initiate X data I'm gonna use this thing okay and uh we are going to use x init as well over here in form or somewhere in outer div Okay click in here so X data is there already X init would be of my free yeah this one so X in it would be uh that you just you need to use this a dollar symbol okay uh store dot the name of uh that you specified over here example it's users okay so that users dot load so that's uh we are gonna call here or you can also say like users store which which would be more precise so like the way so it's gonna load that things over here and then now we'll do the further things okay now on submit that form on submit is we can do here okay so here G we just need to write X hyphen on R submit okay on submit we are gonna call the function okay that we have in dollar store Dot user store okay r dot add user and here I'm gonna pass that uh particular user so no need to pass because we are storing the user here only so for that as well I just don't need to pass this thing hopefully uh let me remove this because it's not needed and what else is needed ah here so where is input this one so it should be my model okay so this is my email and this one is my password okay and the type should be submit alert on click I don't want to do anything on click here okay type submit I'll use over here okay so it should be of type submit let's see how it looks like after making changes fair enough let me do inspect here or let me finish the rest of the things it would be great I guess okay so now let's go here for the table and this row is going to be this is this will be a part of the users that we are gonna get uh from Dollar Store Dot user store dot uh users okay so like the way we'll uh the key we need to specify for the uniqueness and here it will remain the same the first one would be email another one would be password I guess name email only that we are using name emails here also we need to specify name image so I was not sure about that okay name image is that enough okay and now here let's come here so X text like like the way you can use uh it will update the things over here in here so no need to worry about that and instead of edit we can use icons as well that will use later and uh now we just need to call the see the things in network Tab and by reloading the things okay we might get errors let's go there okay load so evaluating undefined is not object undefined is not object can't find variable user great so this user we are not able to find like this one now this this one should be the edit one so let me see the update user what I have used okay and now this one would be my delete user that will get it from here okay now it's good so this code is uh looks good to me and now this code is remaining so user dot email okay placeholder X model email that X model that I have used for the two times I guess X model and X model yes so X model I need to remove it from here and here so type text ID Name ID email looks good everything is fine and now we just need to call this thing okay alpine.net I'll find in it or anything else now again refresh the page so this undefined object users dot load this load is we are not able to see here so I have defined already over here okay this dot users it should get the data and uh one more thing this is not required so 1 2 3. this is one two three and this thing is not needed instead we'll use this okay and if we reload the page and we see we can have this object directly over here let me this and one more thing this is store okay so hopefully close this time and now we have one variable that is user confined user that's it the rest of the things now it will work okay now if we go here in that particular page so we should get the data oh sorry like this so that much of data we should get so let me try to hit something okay great so we are getting data over here so API is getting called okay so error should be she only so we are using X4 and we are using key over here then that user.name and that user.password we are getting here and on click we are passing the things and one more thing that this is on submit dot prevent method will help you to prevent from reload okay so that is also helpful and if we the error is here so if I comment this out I'll get nothing over here okay there is no error and if I try to submit something it should work okay so this API is getting called which is a good thing okay the all the the this one this thing is remaining all data so user in user store dot users okay let me separate this out using template so this TR will be part of template and I don't need to write this thing over here alt shift F once again to format the page and yeah here we go we got the data now hopefully if I click here it should okay so while deleting the data I am not passing I'm passing complete user so it should we use a DOT ID and this time it should work properly so I'm gonna delete this yeah delete so you can see the API is getting called okay so all the data is getting deleted one by one then if I add new data over here it should get updated in here hopefully so we got nothing between users if we go yeah we are not passing that here somehow okay so that's the part is only remaining now so let's go to the form once again and uh here ID is not required though ID okay sorry for label is required uh so type email and what else yeah in input I am using X model user.name which is correct okay and that model we should have to pass to that form okay so it looks good to me nothing else if I'm missing something I'm not sure though add you so let me see again in add user if you need a user we need to pass user then in your ad is I am not expecting user post this is my post user then I need to pass between here the this thing was missing nothing else so hopefully this time okay the idea 11 is already updated you need to refresh the page okay let me see the users that Json we don't need to pass of course that this dot users this dot user we need to pass here this Json we just don't need to worry about okay and again and this time we'll get the data over here and we can delete the data as well so yeah this is it uh I know I have used pre-written code it might be uh not that good but trust me writing this kind of things it's it is really very time consuming and I do really don't want to waste your time guys but thank you so much for being with being supporting me all the time it's been pleasure to be here please let me know inside comment box what you want from my side definitely I'll make it for you and don't forget to subscribe my channel if you haven't already and smash that like button and if you enjoyed uh then you can use thank this thanks Button as well in order to contribute like even one dollar is enough to grow our channel so thank you so much have a good day see you soon bye

Channel: Mahesh Kariya

Views: 5,711

Keywords:

Id: mGU3j51waWA

Length: 26min 8sec (1568 seconds)

Published: Fri Oct 07 2022