How to Edit & Update Shortcodes | Full CRUD Functionality in Node.js, EJS & MySQL

Hello what's up guys today in this video we will see how to edit and update our short link yes guys today's video is very important because you can see that guys login registration token book everything is done more is yet to come but finally here whenever a user logs in then after login whatever short code he would have created we were showing them here basically now what should we do that whichever user logs in which short link that user has created we are showing only that short link now where earlier we were showing everything now here you can see suppose I create another short link I will write ah ok I am just writing ok so we have this short link you can see short link has been created now tomorrow here I might feel like oh friend this ok what kind of name is this I don't like it I want to change it so now I need to edit so you can see very clearly here we have these three buttons don't Well, we haven't created it yet. Today, in this video, we will do the edit one and in tomorrow's video, we will see the delete one. Okay, but this edit one is very big in itself. I wo n't call it very big, but yes, you will definitely get to learn a lot in this video today. You will have to click on this. So, first of all, look at the moment. You click on the URL and then you get the shortcode here by default, so that you don't forget this. When you click on the update button, I mean, when you come to this page, if we don't show it, then guys, you will forget what my shortcode was. But now, I have come to know that my shortcode is okay. And I don't want it to be okay. So, I have simply written ID here because ky.com, I have started my own IT institute where we take online classes. And if you want to learn online classes, let me know in the comment section. Okay, now, before updating, I would like to do one thing. I am keeping it okay as it is. I will update it. So, see, there are no changes, but By doing this, I have already created one. Now if I just click on this and then hit enter, you can see very clearly what this short quote is saying to you. Please choose inside. This validation is very important. Also, guys, you are going to update. And it turned out that you have already created a URL. You have created the same URL. No, we can do this. Okay, so IT Hub is writing update. And boom. Guys, see, what was okay a while ago is now yours. IT Hub. So, today in this video we will see how a new page is opening on clicking this edit button. Like, when I click on this, how does this new page open? Totally, it's your new route. How does a new route open? When that page opens, how do we get to know which shortcode the user clicked on to update or edit? How are we getting its data here? This is the second part. Now, after that, guys, they clicked here and basically edited anything. And then when I click on update, how is that update happening and getting reflected here and even if you go to my database, whatever is there by doing IT hub, it has been added here, so that's all there is, today in this video you are going to learn a lot, you are going to have a lot of fun, so guys, sit comfortably without any worry and relax and as far as the source code is concerned, I would like to tell you that in the description and comment section of every video, I am providing you the source code where you can see how you can get that source code, I told you basically by going to the comment, what steps to follow, basically in this video I told everything, do check it out and you will find it here, for now, you have to click on this one, go here and go to the comment, you can get the comment you want here, okay so this is it, I will give its link below in the description and if you want all the sources in my entire youtube2 49 Code PPT Notes You will get everything, if you see it once, you will enjoy it. All right, guys. Now, without any delay, let us start the video, but before that, if you have not yet subscribed to my channel, please do so. Let us go to our base code editor. All right, guys. So, first of all, in yesterday's video, I had given you a task that we were doing validation through Jat. We saw the login and registration, but I had told you to validate our shortcode, basically shortcode, which is our home page, right? So, please check out this video, it is very important. All right, so you can see, if I go here and do one thing, look here, we had created it in this way. All right, I do one thing, I copy it till here. Let us go, if you look carefully, so we have a validator. In the validator, right now, we only have auth, but now, I have to validate the shortcode, which is our project, basically the URL and shortcode. We also need to see whether the user is adding the URL or not and whether he is writing the short code or not. So let's validate. Let me create a new file, sort of like validate. Okay, I'm going to paste it here. And I had told you this in yesterday's video. What are we doing here? We have to. I mean we need to import z from z then simple login. Whatever it is, we do n't need it. We need to go with a certain schema. Okay, you will need this. And we are obviously getting it. Inside it, we have an object method, inside which you are returning an object only. So here what we have is a URL. Okay, now you will have to write the complete code of this URL. So I will copy paste it because it is not a big deal. Yesterday, I had explained it to you very well that this URL of ours, it has to be a string. Then you can see that we are trimming it. Okay, you can see that we have even There is also a method by doing URL in the root, inside which a message is given that please enter a valid URL, in case if it is not a valid URL, then we are giving it in this way, we cannot write email here, I hope you are understanding, so for email we wrote an email yesterday, today for URL we have this URL and maximum we are passing this much and it will not be enough with just this much, I will go here and by the way this I guess or and guys we have a short code, for this I am doing this, okay and for some reason and guys, this part you will have to give a comma only, so you can see how easily our schema of short code is also ready, where it is necessary to have a string, we are trimming it, there should be a valid URL and maximum we are giving its value this much, basically it is a character, this is okay and in each one we have passed an extra message, in case if there is any error, then this message will be given in return, then the code will also trim your string and whenever you enter a string If you are dealing with make sure always minimum this method has to be passed and we said that at least short code all right now here is a problem I guess till now I have created one or two such short codes in which I have written A or S blank and left it but now after this it is clearly saying that brother minimum you need three means maximum 50 let's do one thing instead of minimum three I will make it minimum two okay I will do this much and I will do two here also totally up to you that whatever short code you want to create do you want to make it of only one character or multiple characters this much you have to do this your work will be done then you have to come to the index okay when you come here guys there is a simple code which you have to write here and I will tell you that first I will go to login or this one I am copying it because it is not a big deal I will do one thing obviously on the controller also You will have to go then guys you will have to simply come to post controller.js because it is here only, whatever logic we have for it is right here, right, at this place, so we have to check it right here, so let me tell you, this link, like if the user writes the same link, then what are we saying, the short code already exists, please choose inside, so now I will comment and paste it, what did I do, request. I hope you already know that we have taken the help of flash, this is a package, through which I tell the error, this is a key and this is the message or value, okay, now I have to use it, I flashed it, brother yes, if something goes wrong, then you can flash this error, okay, now if you have to use it, then what will you have to do, you have to come here, see this is the get short page, here we are passing the links and host, now no, there is no need to pass it here. Because by default we saw a method through which I told you that now we can easily access the user anytime inside any egs file, so what will I do here, guys, by making an error here, which is not an error, just by making errors, I am passing a requested flash property in which we have this error, this is it, so by writing this much, it will happen that in case if anything, I mean that if that shortcode remains the same, if it is the same, then we will flash this error and I passed it here, now if I go here to my login egs, I can very easily tackle it in this way, so I will come to index.ts where I have this submit button, right before that I will paste this, okay, so if you do this, I would like to refresh it once, by refreshing it all right, it will not work because I have not run it, okay, so I will make it run, so let's see. Does anything happen here or not? Alright, everything is perfect. There is no issue. It is here. Now see, the edit and delete button that was there a while ago is gone because we have not seen it yet. We have to see it today and we will see it in tomorrow's video. But yes, I would like to go here and there is an s, right? Now, if I just write s and click on the shortcut, see this URL with that short quote already exists. Please choose inside. How did you like it? How awesome it was. Finally, this particular form with the URL shortener, we have done the form validation here as well. The form validation has also been done. And before this, we had also given the feedback. Now, we would need the edit button here. On clicking that, but I will tell you what the best professionals do. Alright, first of all, you should always prepare the back-end code. First, you should think that if the user supposes, yes suppose let's say there is a button for edit here, if we click on that, then Whatever code the user is writing basically, whatever code I am writing, how will I know that the user has clicked on this or that out of these two, how will I know that there has to be something there has to be something unique and what can be unique in our case, think or obviously the primary key right and that is the ID, so in any way if the user wants to click on this part or this, I mean I will have to pass an ID right we can pass the ID very easily if you remember we can pass the ID very easily, I will tell you how at the end but now I have come to know that in the front end, suppose let's imagine I am working in React and someone fills a form and he clicks on the edit button, so now I know that I am going to get an ID of this particular URL and short code, at the end I will tell you what is happening, it means this is what is happening if you look carefully here So this is our short code where we have the ID URL and then the short code, the ID of the user who clicked on it is there, look here, if I show you this color, you will see this ID more clearly, so if I somehow get this ID, suppose I get this four, then very easily guys, we are already querying this result, I will quickly extract this data and I will display it there, so this is the most important that we have to pass the ID to the back end, that's it, we will see about it later, first what we have to do now, now we have to implement the logic of our back end, now if the user clicks here, right, so what we were doing, we were showing a new page, on that new page we were already prefilling that data, so now we need that, see how, so first of all, whatever is there here, I am deleting everything, I mean or so, so that it looks completely neat and clean, okay, look carefully, the first thing will be we need to create a root not the auth but Our shortcut route is okay, we have to create the route of the shortcut. Okay, see how much we have created till now, router dot route. Okay, I wrote route here because now I will also need a get method here, I will also need a post here, you can see it yourself, guys when the routes of both were the same, I wasted two lines unnecessarily, but now there is a new trick, so I want to show, here I am using edit for slug, I id, this is it, I wrote this because I am assuming that I will get the ID, okay, this is my route, basically dot I will use the get method first, I get method it means that whenever someone hits this route, I will get the ID and I am going to call this particular function and that is a guys, now thinking of the name of the function is also a hassle, let's do get edit page, get shortcut edit page, okay, I have done it in this way, now let me copy it, I am adding it here first, I am assuming that I You have imported it, okay, so the first step is to create the route. Now that you have created this function, come to the controller of the cursor, okay, in this way, and come to the bottom, okay, in this way, okay, so guys, what do we have to do, I will tell you now, we will go very comfortably, there is no hurry because this is such a particular topic that will be useful to you throughout your life, okay, and whenever we do a controller, we have access to request and response method, and obviously we are going to have a query here, so first I will make it a sign, and now see, what do we have to do first, I am assuming that I am going to get the ID, right, so we will very easily create the ID will be equal to request dot params, boom, guys, this is it, this is a code that will make your life very easy, because I have got the ID here, right, now I have no tension, so I am using try and then catch here, and guys, there is a code for catch, so I have already added it here. I would like to give it in this way, okay all right, so you can see that guys, I just copied a code here, this is also very important because now we have a jat package, right and through jat we are doing validation, so obviously I would like to make sure that whatever ID I am getting, it has to be an integer. Yes guys, it is necessary to be an integer because whatever ID we have here, guys, all of these are integers, they are not strings, keep this in mind, all of these are integers and when you use request param, you may get a value in the form of a string, so basically this is the work of converting a string into a number and we kept this int because tomorrow it may happen that someone sends an ID 12.54, so brother, which ID is this, please tell me, which ID is this, 12.54 is any ID, 12.54 is matching here. It is not happening with 12.54 so if it remains then I will convert it into 12 only basically we need only an integer you are understanding without decimal part so that's it basically convert it into fraction and then we will convert it into integer in this simple way okay it means we will remove this part whatever it is in this way kind of you understand this convert string into number then number in case if it is not an integer we need a valid integer with that help we get two properties that is your data and then id so by default I will denote it in this way here as id as I am already saying that I want to denote it as an id and here you go with requests.get do one thing I will pass it as it is right here okay my work is done and here I have another simple code which we were seeing every time in case if the user has not logged in at all Till now, which cannot happen because we are giving them access to the home page only after logging in, right, but still if for some reason they come to the home page, even then I will say the same thing brother, if the user is not there, basically if you don't have the access token, if there is no access token, then we are redirecting them back to the login page, this is it, so we have got the data here, now in case if there is an error, right if there is an error, which I have already told you, we will redirect them to the 404 error page, now guys there is no tension, now the most important work for us is that we have got the ID of which short link the user clicked on, I mean to edit or update, so cost I can write here what has he written, I have written the short link only, let's see which short link did he click on, okay, so wait, now I am calling that function through which I will query, I will write find sort Link by ID is okay and here obviously I need to pass that ID, that is very important, okay so I will copy it. Now when we have done this, we need to go with the short form services because a service related work is happening here, right so if I go here, then the export cost is something like this, okay don't write request and response here, but yes we are getting an ID, so I will get the ID here and obviously you will have to create a sign because you obviously have to deal with that only, tell me what are we going to use here or it is a select method, so cost and by the way I have already told you so many times that if you are using select, then guys you have to pass it inside the array in such a way so that we get the first element of the array, this is important, yes, so let me do one thing, I will copy this only, I was doing the same thing here also, so I Let me put the result of database dot sect from out short links where this short links table's id will be equal to our id this is it my work is done just this much query had to be written by writing this query what will happen by writing this query that whatever short code is there whatever short code was there let's assume that this was the fourth one so what will happen to me this fourth one this whole data will come to me in which we have the id its url guys you can say short code that created updated that and which user is it basically I will get the id of the user so all this complete data is going to be available here now okay once my work is done so it is very easy I will just come here in case if I don't get the data if there is no short link okay then again I will redirect them but yes if the short link is valid then I would like to render guys here it means that if everything is correct then this is the page you can show me which one Edit page here short link Okay, I will do it in this way, okay, I have not created the short link yet because we are going step by step, but I am telling you that I will render it and I am passing some extra payload data, for example, I am passing the ID, this is the short link dot ID, I have passed it, obviously we need to pass the URL, I hope now you are understanding why I am passing this extra information because this URL, this short code, I have to show it prefilled by default, so short link and this short link is basically this and I have already told you that we get the whole data here, so the URL, then we have a short code, but we have to make sure that all this should be equal, although you can write anything in it, but it should be equal that the shortlink dot short code name should be equal and obviously what you have here and guys, I am already passing the errors here as well, so Request flash obs when we will tackle it, whenever someone clicks on the update button, we will see there whether it is equal or not, then I will throw some error or the other, so I am already getting it here, okay, you know till now we have done this thousands of times, so errors this is it, if I want I could have also passed the user ID here, but right now I do not need the user ID, but yes my work is done, all right, once your work is done, guys our almost work is done, I will do one thing, I will copy this edit short link, okay, look carefully we have a views folder, we have a views folder over here, I have to create the file of edit short link here, all right guys, you can see our page is ready, now what to do, do one thing, copy this id completely, come here and then paste it, okay now this copied code here, till now I have not given you any information. I have n't told you, don't worry, I will tell you later, you should remove it, delete it and obviously I don't have to show that edit edit anything there, so you can delete this part as well, so we are left with something, see the error part is also already here, which is a very good thing, okay we have a short code, we have a URL and then this is the action of the form, okay but this button will no longer be a submit button, here I want an update, if I want an update, then you will have to keep submit only, I have updated the value so that whatever I mean my button of the form is basically the input field, which is the text, what do I see, I see the update, okay now I do one thing, look carefully, whenever you render in this way, then this property that is your ID URL short code and then whatever errors you have, I can use them very easily, I mean without doing anything, I can directly use them here, for example URL, okay I go to this place of mine, so this is the There is nothing in the URL part here but now I need a field with a value where I am using the EGS tag and I will pass the URL for a second what happened oh my god what happened I am passing the URL in this way now I will copy this particular part here look I don't need a place holder right now because I will paste this shortcode here this is it so once I have done this my work is already done so now I will see the URL already the shortcode which was mine will be visible by default right so let's run it once and see I am refreshing here once and obviously guys I cannot run that tell me why because till now I have not given the edit button here right but now let's do one thing here now guys finally now the time has come where I am going to put the edit button okay so that at least I can know whether whatever I have done till now is working or not so come on the index let's come down Guys over here we have this particular button, right, you copy it and I'll paste it below it. Look, the copy button is there, no issue for me. I would like to do the edit button here as well because I can give it a green color through the you know class, which I can give it the color I want. I don't need the data URL by the way. So, I will do one thing, I would like to keep it as it is inside the button and I would like to use the anchor tag here. Do one thing, guys, do it this way. Now whenever someone clicks on the icon, where do we have to redirect them? Obviously, I told you that we will forward them to the edit page and we are passing them an ID. If you remember, okay, so I pass the ID, it will be equal to our ID. Now you are thinking that where did I get this ID from, where is the ID coming from? So, I would like to tell you that if you go a little up, when we were mapping, then we have a short Code and then we have a URL right so what will I do here I will also pass the ID because if you look carefully at this part of mine we have an ID we have a URL short code even I have the ID of the user which user I can get his ID too so I very easily just directly passed the ID and did it this way so all this we have to think beforehand how we will implement it so my work is done now whenever someone clicks on it then this ID which is in our H form will be going to the URL from there guys what am I doing here I am getting if you remember I checked get from PM that brother that ID matches or not if it matches then give me the short link if it matches then I am passing the ID URL short code which I am passing for rendering so by going here I have already written all of them here I have written where their place is now if it runs here once Let me refresh, so now I just made one mistake, here instead of copying, there is an icon, the icon of material design, so I will edit it, alright, so now we have this icon, I will click on this one and you can see that the jd is not defined and that is over here, I know because we directly wrote jd in this way, control and then space and for some reason, I did not get it, no problem, we can import it ourselves, so import jd from our jd, okay, in this way, by the way, jd is there, right, jd here, jd jd, something happened, the jd is not visible here, how can this happen, okay guys, let's do one thing, npm install jd, okay, because jd was there, by the way, I don't know for some reason, I tested gits, so maybe it must have gone, okay, I pressed the same by mistake, but no, I was actually going to run, I hope now there will be no problem and finally or we have A root so root has come here, okay, so it keeps going up and down a little bit, but it's just that you have to tackle it quickly, basically fix it, so I hope now there is no tension about it, you are locked in, no problem, okay, I am clicking on edit and see the internal server error, the good thing is that I am getting this in edit 18, you can see, I have got 18 in edit, now let's do one thing here, as I may like that validation error might happen, but if I click on it hub, even then internal server error is coming and find short link by id is not defined, okay, this is very good, so okay guys, let's tackle this find short link by id, control space and you import it, okay, here we go, I will go here once and refresh it one more time, I will click on this, okay, so oh my God, my work is done, you can see guys, ours The work has been done, I got the data, the IT hub, the updates, everything is here, so at least our first step is complete, that is how do I click on the edit button, so that in the second page we can show that ID, basically the short code and the URL. I have done this much, but it is not visible to you the way it should be visible. The reason behind it is obviously its style, so you give it forward now here and boom guys see this is it, this is so awesome, isn't it? Alright guys, I think the length of the video has become quite big, so I will do one thing, I will explain it in tomorrow's video, but don't worry, I will upload tomorrow's video early in the morning at 10:00 am, so you don't have to worry, but I hope till here your code is running perfectly. I will provide you the source code in the description and comment section below. Don't worry, we will tackle it in tomorrow's video. Alright, I hope you will understand well what we have done. Please do this, it's very important and guys, if you like the video, please like it and share it with your friends and the next target is 8 lakh subscribers, if you have n't subscribed yet, please do so, I will meet you in tomorrow's video, till then guys, thank you so much, take care [Music]