Build a Node.js App With Sequelize [2] - UI & Handlebars

hey guys welcome to part 2 of our nodejs and sequel eyes application so in the first video we set everything up we set our Postgres database up we set up node with Express and sequel eyes we created a model we created our gigs routes file where we can fetch our gigs but there's none in the database yet so what I want to do now before we start to work on handlebars and the HTML and creating the interface I want to just make sure that we can actually add stuff to the database so I'm gonna create a new route here and let me just label this one that we already did so this will get get gig list all right and then we're gonna go under here and we need a route to add a gig now ultimately this is going to be where we submit our form to it's gonna be it's gonna receive a post request but for right now I'm just gonna do a get request and manually add in the data and then we'll change it up after so let's say router dot get and you never want it you never want to add data to a server through a get request this is just just for that just for the purpose of adding the data we're gonna change it after so let's do slash add and let's do request response ok so I'm just gonna create an object of data so let's say Const data this ultimately again this is gonna come from the form but for now I'm just going to hard-code it so let's do title I would say looking for a react developer and then we'll do technologies and say react javascript HTML CSS and we need a budget budget I'm gonna say $3,000 we need a description description I'm just gonna grab some some dummy text I'm gonna go to lip some dot-com and just generate some paragraphs I'm just gonna grab like not much just let's see we'll grab like that much text okay so we'll go back in and we'll paste that in for the description and let's add in a contact email I'll just say user one at gmail.com and that should be it the updated act and created at we're gonna let we're gonna let's equalize handle that let's see so now that we have this this hard-coded object let's use a little D structuring to pull out the variables okay so we're gonna say oops we want to say let's did this wrong so from the data we want to pull out the title technology's budget description and contact email okay so we're pulling all that stuff out from the data object now to insert let's say insert it into a table we want to take our model which is called gig and we want to call create okay so create is going to take in all of that data so let's say and the way that we would do this is we would say title set that to the variable of title now since they're both the same that the the column in the database or inserting his title the variable is also title so with es6 we can actually just do that we don't need to repeat it so we want title technology's description budget and contact email that's all of them right one two three four five six or five not six yeah so that should do it now this is going to return a promise so let's do dot then and dot catch all right so it'll give us back the gig I believe and all we're gonna want to do is redirect but right now we have nothing to well actually yeah we'll just we'll just redirect back to gigs which is this route right here so let's just say res dot redirect to slash gigs like that okay so let's go ahead and save this and hopefully we can add this data in so let's go to slash gigs slash ad okay so we're redirected us back to gigs now if we go to our console and we take a look down here we should see right here ID 1 title looking for react developer technologies description budget contact email created at updated at awesome so that worked we were able to insert a record into the database so if we want to check that in PG admin just to make sure I mean that is making sure but just to kind of check it in a different way let's go to call let's see what do we want to do here gigs and we wanted to view data all rows and there's our data so let's actually add one more to work with so all we have to do is change up the data here so we'll say simple WordPress website and we'll change the the technologies here to WordPress and PHP HTML CSS budget let's say 1,000 we'll leave the same text we'll use user two at Gmail and we'll go ahead and save this and now when we visit gig slash ad it should add that data okay and if we go back and we look in the console we should see both there it a simple WordPress website so we have two entries in the database now once we get our user interface set up and we have our form we're gonna change this stuff up here for this row but right now I just want to I want to focus on getting our interface set up so let's go back to AB js' and since we're using Express handlebars we actually need to add some middleware here so we're gonna go let's go write a write below where we initialized Express and let's put in that middleware for for handlebars so I'm just going to put a comment here handlebars and we just need to do an app dot engine there's two lines we need to put in here so app dot engine and we're using handlebars then we want to put in our exp HBS and that takes in an options object and we just want to say default layout and we're going to use main so basically with with handlebars just like many other template engines you have a layout that wraps all of your views and your layout has like your you know your CSS style your CSS links everything that's in the head tag anything you want on every single page is going to go in your layout and we're saying that we want that to be called main dot handlebars alright then we just need to do app dot set and we need to set our view engine and we want to set that to handlebars okay so that should be all we need for our middleware now let's create a folder in the root called views and we want to create inside there a folder called layouts and like I specified here we have main so we need to create a main dot handlebars all right now main dot handlebars is gonna handle all of the the pages except for the home page because the home page is a little different it has the large background the header is a little different so that's actually going to have a separate layout page so I'm going to create us another layout called landing dot handlebars okay but let's take care of the main handlebars first so I'm actually going to go to my static HTML files here that should be in the description you'll have a link to get these files and let's open up the index page is the the landing page so that'll be the landing layout let's open up gigs HTML and I guess like a soul open it with vs code so here it's pretty simple all we need is the the head stuff we also want the header okay and notice it has a class of inner that's because the inner pages have a different header than the index page or the landing page so we'll just copy everything from here from gigs dot HTML and we'll go to main dot handlebars and paste that in and then we just want to delete everything under the header so this section right here basically just this section we want to get rid of that okay and we want to output our views here so we want to put in triple curly braces and body so that's where it'll output any views that use this layout okay and then let's see as far as the navigation we're gonna change this to slash that's that'll go to the index page this will go to slash gigs and then to add a gig that's gonna go to slash gigs slash ad and let's have this this is the logo will have that go to slash and use font awesome as you can see we're bringing in font awesome now as far as the CSS we're gonna need to have a place to store this the CSS as well as the image so we're going to need a static folder and Express and we're gonna call that public so right here we're just gonna say slash public slash style dot CSS alright so actually no we don't need to do public what am I thinking since that'll be our static folder we don't even need to add that so yeah I think that's all we need to put in this layout so let's save this and let's create let's create a folder called public right in the root and then we're gonna bring over the in this from the static HTML folder we're gonna bring over CSS and image so I'm just gonna copy that and then I'm gonna bring that into our project which for me is in let's see code prod and code gig and public and we're gonna paste that in okay so it just has the style CSS and it has the background image alright so now that we've done that we need to declare that public folder as our static folder for it from express so let's go back to AB js' let's go under where we put the handlebars bitl where let's say set static folder so we just do that with app dot use and we'll take Express and call dot static and in here we're going to use the path module we're just going to use path dot join and we want the current directory so double underscore dur name and then we want it to go into public okay so we're just setting that public folder as our express static folder so that in our in our main layout we can just simply look at CSS style CSS and it'll look in the public folder for that okay so make sure we save that good so now that we've done that let's let's go back to our gigs not that close that up let's go back to gigs J s and right here which is the slash gigs right now it's just sending 200 status we obviously don't want that we want to render the gigs template okay are the gigs view which we haven't created yet but let's let's just go ahead and I'll get rid of the console.log and we're gonna say res dot render and we're gonna render a view called gigs okay and then we want to pass in some data so we're gonna put in an object and we're passing in gigs and remember we got gigs from right here when we did the find also we can go like that now since both of these are the same we can simply just do that and that'll pass it in so let's save that and let's create this gigs view our template so in views not in layouts but just in views we're going to create a file called gigs dot handlebars and just to make sure this is loading let's just put an h1 here and let's just say gigs template and we'll save this and then let's go back to the browser and go to slash gigs and reload and there we go so you can see it's wrapped in the layout it's wrapped in the main dot handlebars layout and then it's displaying the view or the template now one thing I forgot to do in the layout is add a container I don't want it way over here I want it in the in the middle so in our main dot handlebars where you have the body right here let's just wrap this in a container class okay we'll just move that up there so it's just a bootstrap class to push it into the middle and save let's go back and reload and now it's pushed in the middle okay so now we want to list all the gigs out here remember we have two in our database so what we're gonna do is close up main dot handlebars we don't need that and we're gonna open up our static HTML page I shouldn't have even closed it let's go code gig HTML we're gonna open up gigs HTML and let's see we're gonna grab this the whole section everything we deleted for the layout we're gonna we're going to take that and copy it and then let's put that in gigs dot handlebars all right now if I save that and we take a look it shows three gigs but this is not coming from the database this is all hard-coded what we need to do is loop through the gigs that are in the database and output each one with this layout so let's go back and let's make this a little smaller I'm sure you make this much smaller so for each gig if we look at the mark-up it has a div with the class of gig now we only need one of these because we need to loop through and then output one of these so let's get rid of this div and this div okay that way we only have this one div with the class of gig and to loop through the gigs that were passed in and this is why I really like handlebars is it's so easy all we have to do is say number sign each gigs alright and then we can put an else because if there are no gigs in the database then we want to notify the user of that so we'll just say no gigs available and then down here we just want to nd each so we can just do slash each and then we want to take this whole div right here cut it and we want to put that inside this each okay so now for each gig it's gonna display this right now it's all hard-coded so let's change out the hard-coded data with actual stuff from the database so here's the title so we should be able to just put in double curly braces and title for the paragraph let's say description for the budget let's do budget and for the link here we're just going to do let's see we're gonna do a mail too so let's say mail too and then we want to put in the contact email for technologies needed inside the span right here let's replace that with technologies and that should do it so let's save this and let's go back to our browser and reload and there we go so now it's actually taking the data from the database and it's displaying it in our layout so now I want to focus on just building the rest of the interface so let's go back into vs code and let's go to our gigs route so route slash gigs J s and right here the add a gig this is ultimately going to be a post request so we want to change that the get request to add is just going to display the form so let's do that let's say display ad gig form and that's going to be router to get /ad okay and then all we want this to do is res dot render and we're gonna render a view called ad so let's save that and let's go into views and let's create a file called add dot handlebars and just to test it out I'll put an h1 say add let's save it and let's go back and if we click Add gig now it's just showing ad so let's grab the mark-up for this in the static HTML so this add dot HTML I'm gonna go ahead and open that and what we want to get is this whole section right here so copy that let's place paste that in to add handlebars and let's save this and now if we go back to the browser here and reload we have our form okay so let's see we have our add gig displayed we have all gigs now we need to work on the home because right now home just says index so let's go back and we're gonna create the landing dot handlebars markup so let's go back into our static template here and the index and we're gonna open up that index okay so we're gonna grab everything here and go into landing dot handlebars and paste it in and let's see we're gonna just get rid of this section right here and we're gonna put in our triple curly braces and body and we don't want to wrap it in a container like we did in the main dot handlebars because we're not gonna we're not gonna not constricting it to a container and then up here let's change our links so let's do slash gigs slash add we could create a partial for this menu because we're kind of repeating ourselves but it's fine let's do slash gigs slash and this will be slash as well and that should be it we're including slash CSS style dot CSS I think that's it yeah so let's save that that's the layout and close that up and now we want to create inside views we want to create an index view so let's create a file called index dot handlebars okay so this is where the the section is going to go so if we go back to that index.html we want to just grab this section right here and we want to put that in index handlebars okay so we'll save that and now we can close up the HTML file now to display this we're gonna head back into AB j/s where we have our index view we'll just say o index row I should say and now we just want to render res dot render index but one thing we we need to do differently is we need to include the the landing layout so with handlebars if you want to use a different layout than the default which is main we do we put that right here then we can actually add in an extra object and we can say that we want to use the layout of landing so let's save that and let's go back to our browser and reload the index page and there we go so now we have the index we have the home I'm sorry we have all gigs which actually displays the gigs from the database and then we have the add gig form so I think this is a good place to stop now that we at least have the interface in the next video I want to I want to add functionality to this form so that we can add a gig through the application and then also we need to add the search functionality so that we can search by keyword all right so that's it I'll see you in part 3

Channel: Traversy Media

Views: 80,783

Keywords: express, node.js, sequelize, handlebars, express handlebars

Id: 67OhLlFPqFQ

Length: 23min 33sec (1413 seconds)

Published: Wed Dec 12 2018