Hey there, everyone.
That they.
Sure.
And let's go ahead and start our IGs journey.
Now, let me remind you again, as we saw in the post, yes, there are limitations there.
And you make sure you understand that part clearly.
And in this video we're going to talk about edges.
Now, edges is really simple and pretty easy to use, but there are others as well, like Mustache,
Pug and a couple of other templating engine, which helps us to do the job.
Now, again, I really don't want to go too much into the depth of frontend development.
That's why I'm keeping it as minimum, as basic as possible.
We'll be using bootstrap and again, you don't need to know bootstrap for this particular thing.
We'll be just copy pasting some components directly from the source code here.
I won't be magically writing it.
I'd rather prefer to take them from the source and show you that source as well so that when you need
them you can actually get them.
So moving on, how we're going to do that, we have already installed the edges.
It's pretty simple NPM install edges and you can see that the edges is already up here.
Now let's go ahead and work on with that.
Now, in order to use the edges, it's not really that difficult.
Just go into the index.
Of course, once you have installed this, this actually comes up as a part of the middleware.
Now usually I just like to keep this one as at the top.
Now, these are of course, middleware, but these are the view engine middleware.
So how we use that, let's go ahead and really simple.
I go ahead and say, hey, we need to say app dot set.
This is how you set the middleware.
So the first thing that we are going to say is we mention view engine.
Now, this confuses a lot of people.
Yes, there is a space between view and engine.
And after that, we can simply we can simply go ahead and mention the templating engine that we are
using.
In this case, we are using edges.
So I'll just mention that edges, in case you are using something else, just go ahead and mention that.
Now, this is the basic.
Now as soon as you do this now, it expects that if you want to use some of the view engine and edges,
of course you should have a directory views.
Now, can this directory be changed?
Yes, of course it can be, but I'm not going to go too much into that of that.
Make sure it is not view.
It is views.
This is a default structure of that.
Yes, these settings are configurable and changeable.
Now, inside this one, the new view, we are going to go ahead and create a new file and I'm going
to call this one as get form dot edges because this is where I'm going to keep my all of the get requests
that are coming in.
And there's going to be a separate form for the post request where we are going to study the post request
as well.
So I'm going to call this one as per post form dot edges.
So let's go ahead and save that first.
Let's worry about the get form.
So all we're going to do is place an exclamation mark and hit the tab.
This auto fills the image and again, this is not really the front end tutorial, but I'll try to keep
this one as short.
So this is going to be get form after that inside the body.
I'm going to go ahead and create a container.
So I'm going to say div dot container.
So there we go.
And inside this container, I'm going to place a simple edge one and this one will say get form so that
I easily know that this is the get form coming in and this is a little bit smaller one.
So I'm going to go ahead and add a class to this one.
So let's just go ahead and add a class and we're going to call this one as display dash three.
Now again, how can we see this and how this class is going to come in?
I will come under that part right now.
We just want to see that how we can deploy this page up here.
This is really simple.
Again, all the pages are being deployed by simple get requests so we don't do much here.
So we're going to go ahead and say, hey, I want to use get and where do you want to serve this route
or the edges that you are having?
So let me call this one as my get really random name up here.
I'm going to go ahead and say request response.
And now we say rez dot render.
Now because in the response I want to actually render something.
What do you want to render now?
By default, it automatically looks into the view page.
So you don't have to worry that part.
You just have to say that I want to render a get from here and that's it.
That's pretty much it.
Now let's go ahead and see that if this is all running now, let me just see the run command, which
is in my case and PM start is there.
So I'm going to go ahead and say in PM start and the server should be running.
Let's see if we are actually doing this nicely or we need to do some of the minor changes.
Let's go up here and say, hey, on the local host on the 4000 slash what it we called it just now,
we call it as my get so my get and we see nothing up here.
So let's go ahead and see what is going on wrong.
So on the route it is get form.
So we should be getting this edges.
So let me go ahead and see that why it is not running.
It should be rendering there.
Oh just found the bug.
It's really simple.
We just got this.
My get up here, my get here as well.
So same route is serving.
So obviously this route will take the priority because it is declared first to bad really.
So we're going to call this one as my get from that should be.
Better.
So let's go ahead and change this one.
Really a simple error, but again, you'll face these kinds of things as well.
That's why I don't cut them out.
Okay.
So get form is working nicely.
Okay.
We were able to serve an engine there.
Now let's go ahead and see that how we need to move further.
Let's first handle this.
Get from here nice and easy.
So we're going to do is let's inject the bootstrap.
How do we do that?
Really the reason for choosing this template is because I want to keep absolute like the simplicity
of the things.
Don't want to divulge too much too much into the front end part.
So let's copy this CSS part.
Go back up here onto the code itself, go into the bug, not bug the edges templates that you're using.
Go ahead here and just paste this up here.
Go ahead and save this one.
I'm going to go ahead and move on to this here.
Now, as soon as you do this, this is going to inject bootstrap into your template.
That's it.
I told you just the CSS.
And if I go back onto the get form, I hit a reload.
Now it says get form in a nice and easy format and all of that.
Now I know some of you might be watching at night, so this is like too bright for you.
So now what we can do is we can go ahead and add classes even to the body.
And I can say BG Dash Dark and I can say text Dash White.
What this will do, it will actually go ahead and change all of this.
So if I had to reload now, it's much more easy to watch in case you are watching at the night time.
So this is what we are going to be doing again.
You don't need to do this, but this actually makes sense to me.
Now I'll go back into the bootstrap, I will look into the docs and I will go into the component section.
So this is where at the bottom the component section is there.
And if I scroll a little bit on to this component section, what we're going to do is we are going to
bring up some of the forms.
So let's go ahead and scroll and look for the forms.
They are sometimes a little bit hard to find.
I guess there is an additional section from the forms.
Yeah.
Not in the components actually in the forms.
Let's go ahead and look for the input form.
That's what I'm looking for.
Now, this is a little bit too much what we need.
These are like too much of the form.
Let's go ahead and see how the overview looks like.
Yeah, this makes sense.
The email address and the password and this form makes sense.
Too much sense to me.
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
and inject it just below this one.
So as it is, I have copied and pasted just exactly what they gave me.
Now I will do some of the changes instead of having the input type of type email, I'm going to go ahead
and change it to the text because I don't want extra features like hey, just always enter email, syntax
and all of that.
I just want to show you that stuff.
That's why I'm doing it.
And also we are not going to be doing any kind of form checks, so I'm going to go ahead and remove
this part and that's it.
This is my basic form.
Let's go ahead and see how it is looking like onto the get form.
Let's go ahead and hit reload and there we go.
We have a form, email, address and password and hit submit.
I think this is more than enough for us.
We are not diving too much into the front end because this is it.
This is all what we want.
So we're going to go ahead and use this form up here.
Now, exactly same thing we are going to be using on to the post form as well.
So let's go up here, copy everything and let's go into the post form and go like this.
And we're going to call this one as.
Post.
Okay, so that's it.
That's all what we're going to be having.
Let's go ahead and also post this form.
So we're going to go ahead and make a copy.
Now, again, don't get confused.
Just because that form is going to be handling post doesn't mean in the rendering.
Also we say about post, no, we don't do that.
These are content that we are serving and they are serving on the web page.
That's why this request needs to be get where that form goes.
That can be a get or the post request.
So make sure you are not confusing that.
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
at that page.
So should be all super easy.
Now let's go ahead and change that to post form and now we have a post form here.
So again, this is more than enough for us.
I know there is no section of uploading the image and everything.
We will surely have that.
But right now we need to discuss a tiny bit on the get a little bit more so that we can properly understand
that how the data and the form itself travel.
And a couple of more details on that.
Let's catch up in the next video.