Build a Node.js App With Sequelize

Build a Node.js App With Sequelize [3] – Add & Search

hey guys welcome to part three of our nodejs and sequel eyes application in the last video we went ahead and made it so we could display our gigs from our

database we implemented the UI from the HTML files so we have our home page which isn't functioning just yet as well as the add page which we're going to we're gonna add that functionality right

now okay so we want to be able to submit this form and have that data go into the database we also want to add some error checking I know that that's it's separate from sequel eyes but I want

this to be you know a decent application so we want to have some server-side validation so let's jump into vyas code and let's go into our app j/s file because we're gonna be getting data from

a form so we need to use the body parser which needs one line of middleware so I'm gonna put this right under where we did our handlebars middleware and let's say body parser and we just want to do

app dot use and let's say body parser dot URL encoded I want to pass in an object here with extended which is going to be equal to false okay so that's the only line we need here so we'll save

that and our app j/s should be all set so let's close that up and let's head over to want to go to our routes and then Giggsy is ok so right now if we make a post request to slash ad it's

it's just gonna it's just going to put this stuff in simple WordPress website all this stuff and obviously that's not what we want we want to catch the form data so let's open up our ad dot

handlebars file which has our form and there's a couple things we want to do here for now let's just add in the form tag an attribute of action and we want to set that to slash gigs slash add okay

and we want to make sure that we add the method of posts because we want this to be a post request since we're adding data to the server so that should be good for now let's save that

and let's head back over to our route here so router dot post slash ad and this all this sample data here we just want to completely get rid of that and what we're gonna do is we're gonna pull

these all this stuff out the title technologies budget and so on we want that to come from the forum so instead of having it come from just us static data object we want to have it come from

request dot body because all this data will be available in the body okay because all that the variables here title technologies they all match the name attribute for each field here

alright so that'll get the data now we could just insert it but I want to make this a little more robust and just add a little bit of server-side validation now our form does have required attributes

so we do have some client-side validation I'm going to get rid of those for now so we can actually test it because you do you want to have client and and server-side validation in your

apps so let's go ahead and just remove all those required and inside here what I'm gonna do is I'm gonna initialize an errors array okay and then I'm gonna check for each field

right and then if if the field isn't there like if they don't put a title in I'm gonna add to that errors array an object with a text value of please add a title so let's go ahead and do that

let's say if and there's plenty of ways to do this there's plenty of ways to add validation I'm just gonna do it a just a pretty simple way so we'll just say if no title then we'll take the errors

array and we'll push on to it a an object with a text value of please add a title all right we just put save validate fields okay and we can actually copy this we're

gonna have four of these so we want to do it for the title we want to do it for technologies so for the message here we'll just say please add some technologies and then let's do it for a

description so please add a description and let's also do it for contact email okay so here we'll just say please add a contact email now budget I'm gonna let budget be blank but I also wanted to I

wanted to say unknown if they don't add a budget but we'll do that after we'll do that after we check for these so right below where we did all these if statements we want to check for errors

and we can do that easily because we just have to say if errors dot length so we want to check the length of the errors array if it's greater than zero that means there's an error okay then

we'll put an else here and we want to move the insert okay this whole insert we want to move that into the else okay I'll just tab that over alright so if there's errors then what do we want to

do we want to re-render the form right so we'll say res dot render and the view is the add view or the add template but we want to add in a couple things or send a couple things one is going to be

the errors object or the I'm sorry the errors array that has the oddity errors object that include all the messages because we're going to want to display those to the user we're also going to

send whatever they type in for these variables here because we don't want the form to just go blank we want to add these as values so I'm actually going to put those in here as

well so we can just go like this okay that way we send all this stuff back to the forum so I think that's good let's go ahead and save this and let's head over to add dot handlebars and we need a

way to display all of our errors now remember it's it's coming into the the view as in an array of error objects so I'm going to go under the paragraph and I want to loop through the errors with

each so we'll say each errors and it will close that each so for each error I want to have a div with the class of error which I've already styled in the template and then a paragraph and we

want to display whatever that text is of the current error object okay so let's do that and then in order to save whatever they typed in the form and not clear at all we need to add values to

all of these so we can add title because remember we passed in all the fields so we're gonna add those as values okay so this is gonna be technologies and this will be budget so text area we're gonna

go in the middle of the the opening and closing tag and we're gonna say description and then we have our contact email okay so let's save this and let's give it a shot we'll try to submit it

with without putting in some necessary fields so if I just add a title I'll just say hello and they say add gig we get please add some technologies please please add a description and please add

a contact email and hello is still preserved because we put that in the value attribute alright and just to make sure that wasn't submitted we'll check out our gigs good so now that we have

that error checking let's go back into gigs j/s and let's go down into the else now there's a couple of things that I actually want to do before we run the

create one is like I said I want the budget to say unknown if there is no budget so let's just check and we'll say if no budget is added then let's take that budget variable and just set it to

the string of unknown okay and then else one other thing I want to do is I want to add on the dollar sign I want to add the money sign I don't want them to have to have to put that in so we'll say else

budget equals the money sign and then we want whatever is in that budget variable so I'm actually going to actually let's get rid of that let's put in some backticks

and we'll put that and then the the syntax to add a variable in a backtick is actually money sign and then two curly braces so we'll set it to whatever budget currently is so it's just going

to set it to whatever the budget is plus a money sign on the beginning of it all right now I also want to edit technologies because we're we're asking them to put up put in a comma separated

list of technologies but I want it to be all I wanted to go all lowercase okay even if they put in uppercase also I don't want any spaces after the commas so I'm gonna I'm gonna make it lowercase

and remove spaces so we'll say technologies equals whatever they type in and then to lowercase which is just standard JavaScript method and then let's use replace which takes in regular

expressions so we want to put in a double slash and we're gonna say for every comma space globally we want to replace with just a comma okay so that's what this does it takes all the comma

space and replaces it with just a comma so let's and there's a there's a lot more you could do here I'm just trying to keep this simple let's say make lowercase

and remove space after comma all right so now we're ready to actually insert into the database which we already have that that down here we're using the model and we're calling create and then

we're passing in all these variables okay and you some of you may if you watch my my JavaScript videos you know I always use constant less I don't have to and you're probably wondering why I used

led up here it's because I we need to actually reassign budget and technologies all right so I think we're good let's go ahead and try it we'll save this and let's go back to Chrome

and just refresh this page and we'll try and submit a job so let's say flutter dev for mobile app so for technologies I'm gonna use capital F flutter let's put a comma space and JavaScript and

Android so budget I'll say 4500 and it should put a dollar sign in automatically even if I don't do it here and then for the description let's see I'll just open up in another tab the

gigs page and copy some of this text and we'll use that as a description and then email I'll just say user 3 at gmail.com all right so let's cross our fingers and add gig and there it is fluttered dev 4

mobile app and notice the technologies I know it's in a kind of a dark color but see how they're all lowercase and there's no space regardless of how they added it alright good so we have our ad

gig functionality we have error checking we can list all of our gigs the last thing to do here is to be able to search for a gig so let's head over to the the view whoops let's go to views and index

dot handlebars it's where you have the section this is where we have our form and right now the action is going to gigs dot HTML obviously that's not what we

we want this to go to a rout of gigs /search and it's going to be a get requests it's a search form so it's fine for it to be a get request you want to use post requests when you're actually

you know changing or adding data to the server so we have one input it adds the name of terms so that's what we want to grab onto inside of this route right here so let's let's save this and let's

go back to gigs j/s and let's create a route for this so this is going to be it's actually going to be a get request so let's do a search for gigs and we're gonna do app get hello app dog yet and

we're already in the gigs route by being in this file so we just want to do slash search okay so we're gonna use an arrow function here and let's grab the term from the from the query since this is a

get request when we submit this it's gonna be in the URL and the way that we get that is with request dot query and it will be request request query term now I'm going to use the structuring to

pull term out so let's go ahead and say Const curly braces term and we're pulling that out from request doc query now the way this is going to work is it's pretty simple it's not that

intricate if you are building a real production app you'd probably want to do a better you'd want to add better search functionality but we just want to take a word that's put in like JavaScript react

WordPress and we want to match it to the technologies field and we're going to be using the like operator to do that which if you have any experience with SQL you've probably used like before for for

search now with sequel eyes if we want to use the like operator at least with the latest version I don't think you had to do this before but you have to actually bring in

the OP the OP method alright let me just double check that yeah so are the OP object I should say so up here you want to say Const op well first we have to bring in sequel eyes so let's say Const

sequel eyes equals require and it took me a while to figure this out because the last time I use sequel eyes we didn't have to do this but that's that's the beauty of web development things are

always changing and your knowledge becomes friggin obsolete so let's say we want this to equal sequel eyes dot op like that so now if we want to use the like operation we can use it so let's go

down here and we want to call find all because that's what we want to do we want to take the gigs and we want to call find all except we want to specify in here we want to specify a where

clause okay so we want to say where and then the way that this works is we put the column name which is going to be technologies and then we want to put a colon in another set of curly braces and

we want to use our like operator so we put in some brackets and we say op dot like and then we want to put a colon and we want this we want to look for whatever the term is let's say it's

JavaScript we want to look anywhere in with within technologies it doesn't have to be you know at the beginning or at the end it can be anywhere so we actually want to surround it in per

percent signs so let's say percent and then we're just gonna add in here whatever the term is and we also want a percent on this side on this side okay so it can be if let's let's pretend this

is actually JavaScript it can be anything JavaScript anything that's what that's what this is this is doing or saying okay so that is our query now this fine doll gives us a

promise back so let's go down here and say dot then dot catch and so dot then this will give us our gigs it'll give us our filtered gigs not just all of them whatever matches that particular search

term and then we just want to res dot render and we want to render the gigs view and we want to pass in we want to pass in the gigs all right yeah that should work that's all I want

actually let me see something up here yeah we're entrez rendered up here for find all we don't actually need these curly braces I don't know why I put these in I can actually make this

shorter yeah that's better whoops wood crashed app is not defined what what did I do I put I put an app dot yet we're inside that we're using the router here this should be router

dock yet okay so let's let's jump back into our application here let's make sure all gigs still works good and let's try the search so I'm gonna say JavaScript search okay so the react and

the flutter came up because they both have JavaScript and the technologies let's search for react all right now the reason we got no gigs available is because of the case watch if I search

for a react lower case it works so that's that's an easy fix all we have to do is for the term that we bring in let's change that to let and then let's just make it lower case so we'll say

term equals term dot to lower case and that should do it okay so let's try it again so we'll search for capital R react and there we go so it comes up so let's try one more

we'll do word press and there we go excellence try HTML we have that on quite a few on both of these here all right so it seems to be working so we can add gigs we can list them and we can

search for them it's a pretty simple application but it gives you guys the you know the gist of how do you sequel eyes I didn't do any like deletes or updates but you you know the basics of

how to use it so just take a look at the docs and it'll show you updates and stuff like that as far as authentication I would like to add some authentication to this app because I'd like to show you

how to use passport with something other than you know Mongo Mongo DB and Mongoose so I may do that I just need to find time to to do it alright so that's it guys hopefully you enjoyed this

series up to this point I probably will continue it at some point probably after the holidays but thanks for watching please leave a like if you liked it and I'll see you next time

In part 3 we will add the functionality of the add gig form as well as the search functionality on the index page

Code:
https://github.com/bradtraversy/codegig

HTML Template Download:
https://traversymedia.com/downloads/codegig_html.zip

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
https://www.facebook.com/traversymedia
Posts by traversymedia
https://www.instagram.com/traversymedia