part 18

Alright, we just started to make our products repository, time to keep moving forward! We are going to start this post with making it possible to add a new product to this project. For that we will need a way to add information about that product, and creating a form is a great way to start. To start with that, we need to display the form with a few inputs and a submit button, and since this is something that s going to be displayed on the page, we need to write some html, that will give our form a basic shape. To start add a new directory to the views/admin called “products” and in there a new file called new.js…

First we are going to require in our layout and also since it is a form we are going to use some validations, so we are going to bring in the getHelper error that we created in the helpers.js file, and after that a module.exports that takes the errors object then we need to return layout({ content: ``}) and inbetween the multiline string is where the html we be placed for displaying the form. At this point the new.js file should look something like…

Ok, again to start, a very basic kinda ugly form to get us going, and after everything is implemented and functional, we will come back and add styling. For now, adding a form with a specified post method, go ahead and start with 3 inputs, one for the title of the product, one for the price of the product and one for the picture of the product, and last, a button to submit the form…

And now we have a skeleton form setup, we can require in this layout into the product route that we be rendered whenever a user wants to add a new product. Inside the routes/admin/products, const productsNewTemplate = require(“../../views/admin/products/new”) and inside of the get(“products/new”) route, go ahead and res.send whatever you named the require const, invoke it, and for now pass an empty object, later that we be where we pass in the errors object, but for a simple test to ensure we are getting something on the screen…

if you have that setup properly, you should be able to yarn dev and navigate to localhost:3000/admin/products/new and you should see…

Again, its ugly, but a good place to get started! Next, we’ll put together a post request handler that will submit the form, we touch on validations and we’ll go over how to handle the image file selector.

First some quick sanitizers and validations. Over in the routes/admin/validators.js file we will add a few checks, for now we are only going to worry about getting the ‘title’ and the ‘price’ of the form validated, so at the very top go a head and requireTitle: and then we check(‘title’) which is the name that we gave the input on the form and then might as well get the requirePrice check(‘price’) going. The title will need to be .trim() and .isLength which will be enough for now, and the price will need .trim().toFloat() and .isFloat()…

And now its time to build the route handler for the form submission, at the top of the file, require validationResult form express-validator, were also going to need to require in requirtTitle and requirePrice from (./validators), and now write out the router.post(‘/admin/products/new’) going to pass in the validators as a second argument, and then console.log the errors…

Now if you navigate to localhost:3000/admin/products/new and try to submit the form… you should see the submitted on the page, because we haven’t handled those errors yet, but you should see those errors, in your console…. I left the ‘title’ input blank, and typed letters into the ‘price’ input…

Alright, It would be a good idea to ensure that if given the proper format, the form will submit if so, you should see in your console…

You can see that it passed in an empty errors array good start, lets just clean up the validators a bit, we’ll add a custom messages…

And that wraps up this blog… We’re getting so close!