Upgrade Your URL Shortener Project: Add Dynamic Content with EJS in Express.js

Hello what's up guys today in this video we will see how to add ICS in our raw project yes guys so you can see this is our a urlscan.io you can see now check it once how it was then right but now We added Express to it and then we added NBC pattern to it so now it has become so awesome and lovely but recently we were watching one, if you remember we showed one to you so today why don't I tell you how You can do it better with the help of page, right, so now kind of this is going to be the last video of our express, then after that we will see the authentication, it will be a lot of fun but kind of now this is the last video of the express, okay, so you watch You can tell me guys, let me go to this particular code of mine, so this is our code, like basically whenever someone is visiting our page for the first time, then what are we doing to them, wait a second, I haven't even run it yet so let me clear this up ok Let me run cd here and then we have npm run and then deb okay so okay it is running let's go here local host it's your 3000 right so whenever someone visits our page for the first time we show them this Is n't it and let's do one thing, I want to reduce the data that we are seeing inside all these useless views and I guess inside a data and yes guys, I am deleting so many of them right now I will delete all of them for now. Okay, control-a-save. Right now, we only have three. So, now I will only see three here. Okay, isn't it? Alright. Now, everything is set here. This particular portion that you can see. is giving I am talking about this guys this particular part is this okay so this particular part if you remember we have done this very easily okay let me tell you see I am here whenever anyone of our If someone visits the home page then this is what we will show them We are reading the data of index.htm and reading the data of the loaded links and displaying that one by one here and whenever someone goes to that particular page, what we have done is to print that string Get key and we replaced it with this particular data which I can see here, okay, we have used the map method, so now we can do one thing here and that is to replace this part with Now I can directly add this particular area here because the work of EGS is to make your HTML content dynamic or you can say that you can now add dynamic content in your HTML5 right so that will be it. Because I am dead about it, wait a second, this whole thing that I am cutting, okay, there is no need for it, by the way, we don't need it either, by the way, okay, we don't need the model either. okay here I am coming to this place Now I am commenting on it, I don't need it because I will directly add it here. Now the most important thing is that we were adopting a method here where brother place this particular string, but I don't need it. There is no need, I do n't need them at all because now I can directly display dynamic content here, I do n't need it, so I am deleting this complete part, what have I done, I have removed the complete part, so now we Have this particular code, we have a map and then we have a join, so I don't need it. Okay, alright now, here, what you can see, this particular return code, we don't need it either. No, because whatever I was doing with the help of Ds, now what I have to do here at this particular place, whenever someone comes for the first time, then I will try this, look carefully here what I am going to return we have a response dot me this route But whenever someone comes for the first time, I have to render this ixed as file of mine, right, we have already seen it, so here I will write it, render it this way and here guys, what will you do simply, that Write down your index, then comma. Now here I am not dynamic, not only dynamic, like any variable or whatever, you can call it an object, anything, I can now share it here, so whenever anyone sees this gate of ours In short, wait a second, I would like to show you here that here we go, look, this is the get setter, what is this, this is our main route, this is our main index page, okay, whenever someone goes to this, this function will be called. Now what will I do in this function, should I render icd ic so this complete part will now get rendered, it will be visible to me and at the bottom I want that basically all our a people should not be sorted The values ​​kept for this can be mapped one by one here. I have to show it by running, one below the other, in the form of a list, so this is what is happening, but in this ix file of ours, how can I use the map method to map these links, basically how can I map these links I should use this method, where is this link, I should get it from somewhere, so I want to tell you that whenever you render in this way, in eax, then you are telling the index to render this and now here you can put that data You can share it here, for example, you links, no one second link, we have this particular link, I am talking about it here, so let me add it here for a second, and also if you look at it, you can see it here But one thing gets added that is your request dot host but if you see then I have not gotten any request response here so from where am I getting this request dot host so I get it from here I can host I'm giving you the colon, it's basically mine Key and then I write the value request dot host is it a host or no or that's what I was looking for it has been done this is it so it has become so easy and yes one more thing now here and that is that guys now this The particular part of the file that you are seeing, we were doing something in this manner, not take the entire idl data of the file and then replace the URL shortener that is inside it, but now I already have this file of ours I am getting this rendered by default, so now I do n't even need this line at all. See how easy it has become and it has been simplified. Now I also need the ret file that was here. It is showing that there is no need for it, it is not being used anywhere, let us check this leaf once, no, it is not being used anywhere, read file, ok, so now we do not even need these two lines, so this is how awesome guys. See how easy it has become now, I can get the links right away The host is gone, I have found it, that is your requested host, so let's go here, first of all remove this request dot host, just leave the host empty, and by the way now let us see how to tackle this, watch carefully, I will go. I am below this, okay, I am going to write all this myself, object d s l d m and then this particular code, I went till here, okay, let me do it one by one, for now I will just comment and keep it, that's all I did. Now I am deleting this particular code as well, so it might look something like this to you, it is something like this, okay, it is necessary to touch the and map method here, alright, okay, now we cannot write this particular code directly, we If you want to add dynamic content in these judges then we need to have this syntax this is the opening and end this will be your closing okay guys now just put one black brace here see this and what you are seeing is fine for you What will you do inside this part, that short code of yours Yes and that URL of yours, we have kept it here because inside that link, by default we are assuming that we are going to get it. Now it is very important that guys here you directly write an AI, okay, of that AI. Come down and give an anchor tag here and this anchor tag is very important that you have to write this, copy it and come here and paste it. Now one thing is that this particular short code, I have already assumed this. What I am doing is that I can already write dynamic content now so I don't need it here so what should I do to make it dynamic again in the same way and here I will do it in this way and my work will be simple It is done and I also have to output it, so your work is done in this way and by the way your work is done, simple, okay, it is necessary to provide the link, this part, it is necessary to provide, okay, I have already shown it to you. I'm done with this and here we can do one thing and then this is your target Underscore blank okay now here inside this this is also important what do we need inside this inside this we need host whatever it is okay now see here how I take it first of all you make the guy's syntax in this way okay Inside this I am going now what I want to show here on the portion with the anchor tag we need to have this particular host okay so here guys if you remember I can directly get into the host because I have used this method here I do one thing, I host it, just fine, this is that host, I can get it directly, I don't have any tension, I can directly get the links and then this host, I don't have to get it from anywhere Or there is no need to give it, once this is done then yours comes, if you remember there is a forward slash in this manner, I am talking about this, look carefully what I am doing right now, this part which you can see, guys I'm writing this one, I'm your host, all the way up to here Then there is a forward slash in the middle, if you look here, there is a forward slash and then that under codifier, what is yours, guys, that is your simple short code, so what is that, the short code is also a dynamic content. So for dynamic again this is your closing opening and closing tag and then simple guys here you have to write equal to because you have to show that short code okay and okay in this way your work is done so this is my work It's gone now okay I'm still inside the AI ​​I mean I'll go out of the AI ​​now this closing tag I need this close closing tag and this is the one left for me so first of all I have a bud braces closing and then One is this one, now I cannot write both of these directly, html5 and this one, I will do it here in this manner, okay, now look at one thing, this is your URL, anchor tag, right this is your URL, if you remember. There is a han after the url if you pay attention If you look at it from here we have one han and then in your actual and whatever is basically your URL which you had pasted that you need its short code, then that is it, then this will be the anchor tag as it is, just put a han here because han is There is no dynamic signage, so we don't have to worry about it, it will remain as it is, but after that give the opening and closing here, come here for a second, in this manner, and here your guys, you can enter that URL Just add it, just one second, it got missed here, in this way it's okay, so I guess now it's fine, our work is done, there's no problem, the only change we had to make was that whatever you were doing directly here earlier, now you should do that You directly I rendered my ejax file and it was done in this simple way. Now if I go here and refresh, then oh my God it is doing my work. This is the meaning of coming in this way. that this is working for me because if you remember I have written this code here at this place, okay so guys, I will copy that code and I am going right below the L and pasting it here like this, okay, I have pasted it like this I pasted it the way I wanted to, nothing happened, it's just that I created a truncated URL and created a new variable. If the length of the URL is 30 or more then slice it. It will show only 30 characters. Dot Dot Dot Else, the URL will be marked as edge. It is, you show me the opening here and the closing here, I do not want to display it, that is why I have not given any double equal two or basically I mean equal two or single sign here, as it is, this is fine, I told you that Not like inside EGS, if you want to add dynamic content then we can do it with the help of this opening and then closing tag is just simple, rest of the LI anchor tag will remain as it is, this is your dynamic content was so thats okay so now Copy this truncated URL and paste it here. Now if I go here and refresh, it's 3 to 1 and boom guys, it's working for me. If I click on this, the codifier comes up and boom guy. C this is also working for me so guys this is it that's it for today's video and finally our URL Shortening project has been completed it's so awesome that now you can create your own URL Shortening website Where you can post any link, otherwise you must have been using Bitly, the whole world mostly uses this, where you can easily find any short URL, QR codes, this was being used by so many people, brother. How much are you earning, whatever it is, but we also made the same thing, what did we make differently, we also made the same thing but in a different way, first node, then express, then router, then controllers MBC, now we have this one, so help of all these So I made this and showed it to you as well I will provide you the link of the source code, I mean the link of the source code, basically in the description and comment section, so do check it out, how did you like the video, let me know in the comment section and finally now I guess after a day or two So guys are you excited because I am very excited this time you are going to learn a lot of things so guys if you liked the video then please like if you don't like it then dislike but do something for sure friends Share it lots with us and our next target is 8 lakh subscribers so if you have n't subscribed yet then please do so, I will meet you in tomorrow's video till then guys thank you so much take care b [Music]