Coding

Node.js + Express – Tutorial – GET and POST Requests

  • 00:00:00 hey welcome back so in the last video we
  • 00:00:05 had a look at handlebars and this
  • 00:00:07 weekend what I want to do is go away
  • 00:00:10 from the templating engine stuff a
  • 00:00:12 little bit more again and we'll finally
  • 00:00:15 get a bit more going with our Xpress
  • 00:00:17 application and how to use Express in
  • 00:00:21 this video we will have a look at get
  • 00:00:23 and post routes how to pass parameters
  • 00:00:26 and how to well retrieve and use them
  • 00:00:30 let's start so what I want to do is I
  • 00:00:33 will first copy this handlebars project
  • 00:00:37 here and I won't just rename it to get
  • 00:00:41 post something like that yeah let me add
  • 00:00:47 it to get and Here I am so this is the
  • 00:00:51 same structure as in the last video
  • 00:00:54 where we set up handlebars and what I
  • 00:00:56 want to do is in my routes file here I
  • 00:00:59 have to get home page file or route
  • 00:01:02 excuse me and what I want to do here is
  • 00:01:04 I will add a new get route which I will
  • 00:01:10 let say called test and then ID and by
  • 00:01:15 writing : ID I specify that this route
  • 00:01:20 expects an ID get parameter after well
  • 00:01:26 ii slash here so the routers like slash
  • 00:01:31 test and then it will get a parameter
  • 00:01:35 and then the URL we will have like slash
  • 00:01:37 test slash five five was the ID so this
  • 00:01:42 is how you style your URLs
  • 00:01:44 nowaday and this is how we set up this
  • 00:01:47 URL to expect such a parameter and get
  • 00:01:50 route again because we're passing
  • 00:01:52 parameters in the URL which we do when
  • 00:01:54 using get routes right so next figures
  • 00:01:58 again a function which holds the request
  • 00:02:00 response and well our next parameter
  • 00:02:06 here
  • 00:02:07 and that what I want to do here is I
  • 00:02:10 will again render something and I want
  • 00:02:13 to render let's say the the test view
  • 00:02:15 which doesn't exist right now but will
  • 00:02:18 soon and I will pass an object to that
  • 00:02:23 fewer to the rendering engine where I
  • 00:02:26 will have my output property so I will
  • 00:02:30 be able to access this output as a
  • 00:02:32 variable in my templating engine and
  • 00:02:36 this should be this parameter the ID for
  • 00:02:41 example I can access this in my request
  • 00:02:45 object and there I have this parents
  • 00:02:49 property and here I can simply say dot
  • 00:02:54 ID because ID will be a parameter
  • 00:02:59 available in this route because I'm
  • 00:03:01 specifying ID here when setting up the
  • 00:03:04 route as a parameter which should be
  • 00:03:07 passed to this route therefore I can
  • 00:03:10 access it by dot ID and of course this
  • 00:03:13 name here ID has to match this name here
  • 00:03:17 and if I were to have multiple
  • 00:03:19 parameters here like let's say param to
  • 00:03:25 I could of course access param to here
  • 00:03:29 this is how I set this up now let me
  • 00:03:33 undo this and now I would output this ID
  • 00:03:36 let me create this view to show this
  • 00:03:40 will create my tester HPS file once
  • 00:03:44 again I'm using handlebars and here I
  • 00:03:47 will just say you accessed this page why
  • 00:03:53 I get request and then ID passed and
  • 00:04:00 then here I will just output the ID
  • 00:04:03 again back my neck such as file I'm
  • 00:04:06 binding this to this output variable so
  • 00:04:10 I will just use output here in my
  • 00:04:14 handlebars expression
  • 00:04:16 now when I restored my server here on I
  • 00:04:22 enter tasks and then five let's say you
  • 00:04:25 can see I get this page and I get the
  • 00:04:29 parameter passed into this route output
  • 00:04:32 here so this is how we pass parameters
  • 00:04:35 to get routes and retrieve from and
  • 00:04:37 output them now let's add a post route
  • 00:04:40 let's say somewhere I will have a form
  • 00:04:44 which gets submitted and this will well
  • 00:04:48 call test submit let's say like this I
  • 00:04:51 again will have my function with request
  • 00:04:54 response and next because remember this
  • 00:04:57 is how Middlemore in Express is set up
  • 00:05:00 to have these free parameters and then I
  • 00:05:03 also want to well render something or
  • 00:05:07 let's say I wanted to redirect to a
  • 00:05:10 number URL because I don't really want
  • 00:05:13 to render something after Xing with
  • 00:05:16 accessing this post route because the
  • 00:05:18 post route would typically write
  • 00:05:20 something to the database and then
  • 00:05:21 redirect user to a number page therefore
  • 00:05:25 what I will do here is I will then
  • 00:05:27 redirect to just test ID and here I want
  • 00:05:32 to pass the ID which is input through a
  • 00:05:35 Ford okay that might be a little strange
  • 00:05:38 your let's make this more clear in my
  • 00:05:41 index dot HBS template here I will
  • 00:05:44 remove all of the fun we had and I will
  • 00:05:47 add a form which should have an action
  • 00:05:50 of test submit since the route has just
  • 00:05:54 set up and method will be post and then
  • 00:05:59 here I will have an input which will
  • 00:06:01 give a name of party and well a button
  • 00:06:06 to a very basic form which allows me to
  • 00:06:09 submit it is okay so my index page I
  • 00:06:14 have this form where when I click on
  • 00:06:15 submit I will be taken to test submit
  • 00:06:19 this route here I will obviously pass
  • 00:06:23 the for write and in my form I have
  • 00:06:27 input field the only input field which
  • 00:06:30 has an
  • 00:06:30 of ID therefore I want this ID parameter
  • 00:06:34 I want to retrieve it in this post
  • 00:06:37 fungineer this post method I can do this
  • 00:06:43 more ID by accessing my request again
  • 00:06:48 but this time not params ID because it
  • 00:06:53 no longer is a parameter passed to this
  • 00:06:55 function it no longer longer is a
  • 00:06:59 parameter specified URL because with a
  • 00:07:01 post request but for post requests all
  • 00:07:05 parameters the content is sent in the
  • 00:07:08 body of the request right there for
  • 00:07:10 iakhs request body and turn here I know
  • 00:07:14 I will have this ID parameter this is
  • 00:07:17 how I get it now let me get rid of this
  • 00:07:20 these dots here and then just add ID so
  • 00:07:24 that I get redirected to this test ID
  • 00:07:27 route and I pass the ID I get from the
  • 00:07:31 post request as a get parameter to the
  • 00:07:34 next route I restart the server and then
  • 00:07:39 we'll go back to the home page and I
  • 00:07:41 will enter 10 year and then click Submit
  • 00:07:44 and now we can see I'm redirected to
  • 00:07:46 this get route we created a few seconds
  • 00:07:48 ago and this time well 10 is output
  • 00:07:51 since I passed this now of course this
  • 00:07:54 is very constructed and theoretical
  • 00:07:57 example and the next videos who will
  • 00:08:00 create a more realistic app and we'll
  • 00:08:03 also add validation to our forms but
  • 00:08:05 this is how we use get a post request
  • 00:08:08 which will basically are the two most
  • 00:08:10 important requests we have when creating
  • 00:08:13 a normal website like this and therefore
  • 00:08:16 it's very important to know how to use
  • 00:08:18 them see on the next videos why