WEBVTT 00:03.880 --> 00:04.750 Hey there, everyone. 00:04.750 --> 00:05.020 That they. 00:05.020 --> 00:05.410 Sure. 00:05.440 --> 00:08.350 And let's go ahead and start our IGs journey. 00:08.590 --> 00:13.420 Now, let me remind you again, as we saw in the post, yes, there are limitations there. 00:13.420 --> 00:16.330 And you make sure you understand that part clearly. 00:16.330 --> 00:18.910 And in this video we're going to talk about edges. 00:18.940 --> 00:24.310 Now, edges is really simple and pretty easy to use, but there are others as well, like Mustache, 00:24.310 --> 00:28.210 Pug and a couple of other templating engine, which helps us to do the job. 00:28.210 --> 00:32.230 Now, again, I really don't want to go too much into the depth of frontend development. 00:32.230 --> 00:35.410 That's why I'm keeping it as minimum, as basic as possible. 00:35.650 --> 00:39.670 We'll be using bootstrap and again, you don't need to know bootstrap for this particular thing. 00:39.670 --> 00:43.240 We'll be just copy pasting some components directly from the source code here. 00:43.240 --> 00:44.860 I won't be magically writing it. 00:44.860 --> 00:48.910 I'd rather prefer to take them from the source and show you that source as well so that when you need 00:48.910 --> 00:50.290 them you can actually get them. 00:50.530 --> 00:53.830 So moving on, how we're going to do that, we have already installed the edges. 00:53.830 --> 00:58.930 It's pretty simple NPM install edges and you can see that the edges is already up here. 00:58.930 --> 01:00.850 Now let's go ahead and work on with that. 01:00.850 --> 01:03.780 Now, in order to use the edges, it's not really that difficult. 01:03.800 --> 01:05.200 Just go into the index. 01:05.200 --> 01:10.120 Of course, once you have installed this, this actually comes up as a part of the middleware. 01:10.120 --> 01:14.050 Now usually I just like to keep this one as at the top. 01:14.050 --> 01:17.500 Now, these are of course, middleware, but these are the view engine middleware. 01:17.500 --> 01:20.140 So how we use that, let's go ahead and really simple. 01:20.140 --> 01:23.680 I go ahead and say, hey, we need to say app dot set. 01:23.680 --> 01:25.660 This is how you set the middleware. 01:25.900 --> 01:29.590 So the first thing that we are going to say is we mention view engine. 01:30.190 --> 01:32.020 Now, this confuses a lot of people. 01:32.020 --> 01:34.840 Yes, there is a space between view and engine. 01:34.840 --> 01:40.330 And after that, we can simply we can simply go ahead and mention the templating engine that we are 01:40.330 --> 01:40.690 using. 01:40.690 --> 01:42.040 In this case, we are using edges. 01:42.040 --> 01:46.540 So I'll just mention that edges, in case you are using something else, just go ahead and mention that. 01:46.690 --> 01:48.010 Now, this is the basic. 01:48.220 --> 01:54.160 Now as soon as you do this now, it expects that if you want to use some of the view engine and edges, 01:54.160 --> 01:56.740 of course you should have a directory views. 01:56.740 --> 01:58.120 Now, can this directory be changed? 01:58.120 --> 02:01.630 Yes, of course it can be, but I'm not going to go too much into that of that. 02:01.630 --> 02:03.040 Make sure it is not view. 02:03.040 --> 02:04.030 It is views. 02:04.030 --> 02:05.950 This is a default structure of that. 02:05.950 --> 02:08.440 Yes, these settings are configurable and changeable. 02:08.650 --> 02:14.350 Now, inside this one, the new view, we are going to go ahead and create a new file and I'm going 02:14.350 --> 02:22.540 to call this one as get form dot edges because this is where I'm going to keep my all of the get requests 02:22.540 --> 02:23.620 that are coming in. 02:23.620 --> 02:27.910 And there's going to be a separate form for the post request where we are going to study the post request 02:27.910 --> 02:28.210 as well. 02:28.210 --> 02:33.040 So I'm going to call this one as per post form dot edges. 02:33.220 --> 02:34.840 So let's go ahead and save that first. 02:34.840 --> 02:36.460 Let's worry about the get form. 02:36.460 --> 02:40.270 So all we're going to do is place an exclamation mark and hit the tab. 02:40.270 --> 02:45.940 This auto fills the image and again, this is not really the front end tutorial, but I'll try to keep 02:45.940 --> 02:46.600 this one as short. 02:46.600 --> 02:50.620 So this is going to be get form after that inside the body. 02:50.620 --> 02:52.690 I'm going to go ahead and create a container. 02:52.690 --> 02:56.560 So I'm going to say div dot container. 02:56.560 --> 02:57.460 So there we go. 02:57.460 --> 03:03.160 And inside this container, I'm going to place a simple edge one and this one will say get form so that 03:03.160 --> 03:08.290 I easily know that this is the get form coming in and this is a little bit smaller one. 03:08.290 --> 03:10.390 So I'm going to go ahead and add a class to this one. 03:10.390 --> 03:16.030 So let's just go ahead and add a class and we're going to call this one as display dash three. 03:16.060 --> 03:19.930 Now again, how can we see this and how this class is going to come in? 03:19.930 --> 03:22.240 I will come under that part right now. 03:22.240 --> 03:25.810 We just want to see that how we can deploy this page up here. 03:25.840 --> 03:26.770 This is really simple. 03:26.770 --> 03:30.850 Again, all the pages are being deployed by simple get requests so we don't do much here. 03:30.850 --> 03:36.670 So we're going to go ahead and say, hey, I want to use get and where do you want to serve this route 03:36.670 --> 03:38.740 or the edges that you are having? 03:38.740 --> 03:43.630 So let me call this one as my get really random name up here. 03:43.840 --> 03:46.930 I'm going to go ahead and say request response. 03:47.950 --> 03:50.320 And now we say rez dot render. 03:50.320 --> 03:54.430 Now because in the response I want to actually render something. 03:54.430 --> 03:56.020 What do you want to render now? 03:56.020 --> 03:58.150 By default, it automatically looks into the view page. 03:58.150 --> 03:59.530 So you don't have to worry that part. 03:59.530 --> 04:03.400 You just have to say that I want to render a get from here and that's it. 04:03.400 --> 04:04.420 That's pretty much it. 04:04.420 --> 04:09.160 Now let's go ahead and see that if this is all running now, let me just see the run command, which 04:09.160 --> 04:11.860 is in my case and PM start is there. 04:11.860 --> 04:15.910 So I'm going to go ahead and say in PM start and the server should be running. 04:15.910 --> 04:20.380 Let's see if we are actually doing this nicely or we need to do some of the minor changes. 04:20.590 --> 04:28.420 Let's go up here and say, hey, on the local host on the 4000 slash what it we called it just now, 04:28.960 --> 04:35.110 we call it as my get so my get and we see nothing up here. 04:35.110 --> 04:37.630 So let's go ahead and see what is going on wrong. 04:37.630 --> 04:40.450 So on the route it is get form. 04:40.450 --> 04:43.360 So we should be getting this edges. 04:43.360 --> 04:46.300 So let me go ahead and see that why it is not running. 04:46.300 --> 04:48.040 It should be rendering there. 04:48.730 --> 04:50.020 Oh just found the bug. 04:50.020 --> 04:51.160 It's really simple. 04:51.160 --> 04:52.060 We just got this. 04:52.060 --> 04:53.770 My get up here, my get here as well. 04:53.770 --> 04:54.880 So same route is serving. 04:54.880 --> 04:59.320 So obviously this route will take the priority because it is declared first to bad really. 04:59.320 --> 05:01.810 So we're going to call this one as my get from that should be. 05:01.940 --> 05:02.170 Better. 05:02.210 --> 05:03.620 So let's go ahead and change this one. 05:03.620 --> 05:06.560 Really a simple error, but again, you'll face these kinds of things as well. 05:06.560 --> 05:07.910 That's why I don't cut them out. 05:08.090 --> 05:08.350 Okay. 05:08.360 --> 05:09.890 So get form is working nicely. 05:09.890 --> 05:10.190 Okay. 05:10.220 --> 05:12.350 We were able to serve an engine there. 05:13.610 --> 05:16.520 Now let's go ahead and see that how we need to move further. 05:16.520 --> 05:17.570 Let's first handle this. 05:17.570 --> 05:18.950 Get from here nice and easy. 05:18.950 --> 05:21.560 So we're going to do is let's inject the bootstrap. 05:21.560 --> 05:22.580 How do we do that? 05:22.880 --> 05:28.340 Really the reason for choosing this template is because I want to keep absolute like the simplicity 05:28.340 --> 05:28.820 of the things. 05:28.820 --> 05:32.120 Don't want to divulge too much too much into the front end part. 05:32.120 --> 05:34.040 So let's copy this CSS part. 05:34.100 --> 05:41.690 Go back up here onto the code itself, go into the bug, not bug the edges templates that you're using. 05:41.690 --> 05:43.790 Go ahead here and just paste this up here. 05:43.970 --> 05:45.590 Go ahead and save this one. 05:45.590 --> 05:48.020 I'm going to go ahead and move on to this here. 05:48.080 --> 05:51.740 Now, as soon as you do this, this is going to inject bootstrap into your template. 05:51.740 --> 05:52.400 That's it. 05:52.400 --> 05:53.900 I told you just the CSS. 05:53.900 --> 05:56.720 And if I go back onto the get form, I hit a reload. 05:56.720 --> 05:59.720 Now it says get form in a nice and easy format and all of that. 05:59.720 --> 06:03.200 Now I know some of you might be watching at night, so this is like too bright for you. 06:03.200 --> 06:06.830 So now what we can do is we can go ahead and add classes even to the body. 06:06.830 --> 06:12.620 And I can say BG Dash Dark and I can say text Dash White. 06:12.620 --> 06:15.830 What this will do, it will actually go ahead and change all of this. 06:15.830 --> 06:21.170 So if I had to reload now, it's much more easy to watch in case you are watching at the night time. 06:21.170 --> 06:23.330 So this is what we are going to be doing again. 06:23.330 --> 06:26.240 You don't need to do this, but this actually makes sense to me. 06:26.240 --> 06:33.110 Now I'll go back into the bootstrap, I will look into the docs and I will go into the component section. 06:33.110 --> 06:36.050 So this is where at the bottom the component section is there. 06:36.050 --> 06:41.180 And if I scroll a little bit on to this component section, what we're going to do is we are going to 06:41.180 --> 06:42.710 bring up some of the forms. 06:42.710 --> 06:45.590 So let's go ahead and scroll and look for the forms. 06:45.860 --> 06:48.740 They are sometimes a little bit hard to find. 06:48.740 --> 06:51.650 I guess there is an additional section from the forms. 06:51.650 --> 06:51.860 Yeah. 06:51.890 --> 06:53.900 Not in the components actually in the forms. 06:54.110 --> 06:56.660 Let's go ahead and look for the input form. 06:56.660 --> 06:58.160 That's what I'm looking for. 06:58.310 --> 07:01.910 Now, this is a little bit too much what we need. 07:02.420 --> 07:03.860 These are like too much of the form. 07:03.860 --> 07:06.050 Let's go ahead and see how the overview looks like. 07:06.110 --> 07:07.490 Yeah, this makes sense. 07:07.490 --> 07:10.250 The email address and the password and this form makes sense. 07:10.250 --> 07:11.240 Too much sense to me. 07:11.240 --> 07:17.150 So I'm going to go ahead and copy this and go back to my template up here and I'm going to go ahead 07:17.150 --> 07:19.130 and inject it just below this one. 07:19.130 --> 07:23.120 So as it is, I have copied and pasted just exactly what they gave me. 07:23.120 --> 07:27.830 Now I will do some of the changes instead of having the input type of type email, I'm going to go ahead 07:27.830 --> 07:33.800 and change it to the text because I don't want extra features like hey, just always enter email, syntax 07:33.800 --> 07:34.220 and all of that. 07:34.220 --> 07:35.570 I just want to show you that stuff. 07:35.570 --> 07:36.740 That's why I'm doing it. 07:36.740 --> 07:41.480 And also we are not going to be doing any kind of form checks, so I'm going to go ahead and remove 07:41.480 --> 07:43.310 this part and that's it. 07:43.310 --> 07:44.840 This is my basic form. 07:44.840 --> 07:48.320 Let's go ahead and see how it is looking like onto the get form. 07:48.320 --> 07:50.600 Let's go ahead and hit reload and there we go. 07:50.600 --> 07:54.380 We have a form, email, address and password and hit submit. 07:54.380 --> 07:56.420 I think this is more than enough for us. 07:56.420 --> 07:59.420 We are not diving too much into the front end because this is it. 07:59.420 --> 08:00.620 This is all what we want. 08:00.860 --> 08:03.440 So we're going to go ahead and use this form up here. 08:03.470 --> 08:07.100 Now, exactly same thing we are going to be using on to the post form as well. 08:07.100 --> 08:12.200 So let's go up here, copy everything and let's go into the post form and go like this. 08:12.200 --> 08:13.970 And we're going to call this one as. 08:15.310 --> 08:16.120 Post. 08:16.570 --> 08:17.950 Okay, so that's it. 08:17.950 --> 08:19.570 That's all what we're going to be having. 08:19.570 --> 08:21.850 Let's go ahead and also post this form. 08:21.970 --> 08:23.770 So we're going to go ahead and make a copy. 08:23.770 --> 08:25.120 Now, again, don't get confused. 08:25.120 --> 08:28.480 Just because that form is going to be handling post doesn't mean in the rendering. 08:28.480 --> 08:31.000 Also we say about post, no, we don't do that. 08:31.000 --> 08:34.330 These are content that we are serving and they are serving on the web page. 08:34.330 --> 08:37.660 That's why this request needs to be get where that form goes. 08:37.660 --> 08:39.520 That can be a get or the post request. 08:39.520 --> 08:41.200 So make sure you are not confusing that. 08:41.470 --> 08:48.580 So I'm going to go ahead and come say that this is my post form and we're going to serve a post form 08:48.580 --> 08:49.360 at that page. 08:49.360 --> 08:50.890 So should be all super easy. 08:50.890 --> 08:57.520 Now let's go ahead and change that to post form and now we have a post form here. 08:57.520 --> 08:59.530 So again, this is more than enough for us. 08:59.530 --> 09:02.770 I know there is no section of uploading the image and everything. 09:02.770 --> 09:04.060 We will surely have that. 09:04.060 --> 09:05.170 We will surely have that. 09:05.170 --> 09:10.330 But right now we need to discuss a tiny bit on the get a little bit more so that we can properly understand 09:10.330 --> 09:12.370 that how the data and the form itself travel. 09:12.370 --> 09:13.960 And a couple of more details on that. 09:13.960 --> 09:15.460 Let's catch up in the next video.