Build a Full Stack JavaScript CRUD App with Node/Express/Handlebars/Bootstrap/Postgres/Knex

hello friends so I am going to build a full stack application we're going to create read update and delete - dues to do this we are going to be using Postgres for our database connects jeaious for our database migration seeds and queries expressjs for our route Steinman during handlebars days for our server side view templates and we'll be using bootstrap on the front-end for our user interface I have here a checklist of all the things we're going to need to do to create to this crud app so let's get started I'm gonna start by generating and Express that so right now where am I I'm in dev playground yeah so that's that readme file I'm gonna I'm gonna create a folder called server and I'm gonna generate my Express app inside of that server folder so let's go in there okay I'm in there and I'm going to generate an Express app in this directory so desk - yep will create a gig or file for me and - - each of us will set the view engine as handlebars so that happened and now if we look at it you have our tour set mm-hmm let's try it out so let's try and p.m. start oh well that's not gonna work because I need to install my dependencies so I'm gonna install those real quick now we can in fumé start that's running let's bring up Chrome we have an extra set welcome to Express so let's check the box generate an Express app I think so alright now create a database and a table so we're gonna be credit - dues so let's create a database for our - dues so here I'm just gonna do create DB and I'm just gonna say my life because it contains all the things and - dues or one thing in my life so why not okay created the database so now I need to create to the to do state someone use connects to do that so I'm gonna say connects migrate mate and we're gonna make a migration for the to do table no local connects install found cool I need to add it so I'm gonna add connects I'm gonna go ahead and add PG as well so PG is our database driver that's good that's what but blue boat words that is what's gonna let us talk to our database go obviously yarn add the connects in PG fantastic alright let's make that migration I don't know how to program OS that's initialize connects of course the first the first thing you should do when you're using connects so that creates our connects file a lot of stuff in here pretty much I want to use this one but for development instead so I'm just gonna name this development I want Postgres for connection I'm just gonna leave that as a connection string so Postgres : / / localhost and the database I created was my underscore life and those are like all the default options fun to look at but I don't need them now let's try to make that migration sweet so created migration created this migrations folder and now we have a to do migrations so let's create ourselves the table just make myself a note up here I'm gonna want to do to have a title this is like text alright look away from the screen close your eyes great okay so it's gonna have a title column that is of type text it's gonna have a priority that is of type integer this is like 1 2 3 it's going to have a what else description maybe that's also text and also let's say done so this is a booming so it's true if that to do is done and false if not actually let's add a date to because why not and this is going to be of type date time okay so let's create it so in here I need to return connect schema dot a bowl what's the name of the table to do then I need a callback function that takes the table that I can put some columns on so first we can just say table dot increments that's going to give us an ID column that is of type serial that's a primary key and then we're going to create this text column called title I'm also going to say this is not nullable so that way it is impossible to created to do with out a title so then I'm gonna do table that description that is not how you do that table dot text and the name of the column is description I'll let that one be no we don't have to that's optional don't forget priority let's throw that on there table that integer priority this one is also not knowable we shouldn't be able to set that to know we'll need a table that bullying done and we're gonna default to false and this is also not knowable so that way when I insert a to do I don't have to specify done it's just automatically gonna be false and finally we need that date column so table that date time date this is also not knowable and I can maybe do a default I'm gonna go look at the docs so the default value should just be the date that it was inserted so like new date something like that let's go to the docs dinner nananananana connection org I wanted to do default defaults Oh default do I mean I'd use that right like three lines above but can I pass a date into it probably not it's gonna be like the date no I'm not gonna have a default but it is not knowable so you have to insert it we'll handle that you know our Express route fantastic now the experts sat down is what we need to do the opposite of what we just did so when this migration is rolled back what do we do so the opposite of creating a table is dropping a table what do you want to drop okay so creating my table got all my columns looks good let's try to run this migration so connects migrate latest looks like it worked let's dive into piece equal land and see if it actually worked so what I have I do have a table called to do let's describe it sweet that is exactly as I described it so that worked now well let's check a box don't forget to do that create the database slash table gun seed table with sample data so let's make a seat so connects seed make please to do it creates a seeds folder and it's to do I'm gonna remove this boilerplate and just create an array Jews Jews this is gonna have objects they're gonna have titles here we need to put the table name so to do to delete all the rows in the zoo and then we'll insert a bunch of rows let me go grab my handy-dandy comment use it as a reference as I create some sample data okay so title build a crud app and the priority is one because that's the most important thing we could do and the age is just gonna be like right now so say a new date and meet a bunch more of those so let's copy it title here is do the shoes that's like a priority three what else can we do we can render a view it's like priority to finally walk the dog it's like 35 because I don't have a dog now we gotta want you to do so let's insert them into the database so hey connects take that good old to do table and let's insert this good old array of taboos there we go so let's zoom out a little bit boom-boom-boom-boom all right so first remove all the rows in the to do table then let's create us some sample to do's and then insert them into that to do table fantastic what just happened I did something right okay but that's ready to go let's try to run this so connects seed seed okay no errors moment of truth select star from - do you know look at that we got nice little dates everything is not done and the description is empty that's that's that sounds great yeah cool so let's check the box see the table with sample data okay now list all records with get slash to do oh my god how do I do that well okay what do I start Abdo genius that is the beginnings of our Express app I need to create a route how am I going to do that we can see how they created routes so they brought in routes from route slash index and if we look in that folder this variable is basically this router and then they use that here so what I want to create my own router for - dues so here's what I'm gonna do I'm just gonna copy this index file duplicate and I'm gonna name it to do digest so it's like exactly the same but except now I'm gonna put all my to do stuff in there and the title in here so that I do now in my app digest I'm gonna bring that in so right here I'll say like bar to do people's require let's go my routes folder and grab that foot up pet file that I just created this is new file so this variable is equal to this router from the to do file and now I want to use that at slash to do so right here here if I say F dot use slash to do so when you see the / - do you RL mister Express router I want you to use that router that I defined in that file called - DJ yes and that's exactly what it will do so we have now defined this is a the the route that's gonna get hit when we go to slash to do so let's try it out let's start up node one court 2013 yes Oh Mon already started it is not but we'll kill that guy and then start minimum cool do we want to allow no to accept incoming connections I guess so try it out okay that's the index view but if I'd go to slash to do there it is so that view is rendering and I now have a / - deer out so let's look at my checklist again list all records with get slash to do so this is a get on slash to do and like it is slash to do because I'll say it here this router is mounted at HTTP colon slash slash localhost 3000 slash to do so that means every route I define in this file is going to be prepended after to do and so because this is slash this course wants to do and that is because I'm mounted it like that they're cool so I need to render all of the to dues from the database how am I going to do that however we need a database connection we need we need to connect to that database so we can get some data out of it so let's create that connection Krita DV folder in there let's create a file let's call this connects and we're going to use connects to connect to the database first thing I need to do is get the environment so let's create variable I'm being sort of inconsistent with my constant bars I think I used var and app.js just because all the code around it was up was var but in here I'm going to use constant because this is my file okay so the environment is processed and V no DV or development so right now right off the bat like what is happening here I'm creating a variable called lis environment and this is gonna be the current environment that this code is running in so let's just log that so let's login by variable and I'm just gonna run this file from node so over here it was a node run the file and the DB folder called connects so when it log environment it logged development makes sense because I'm on my personal computer this is development however if the node env environment variable was defined which it is on Heroku like I could here I could say node and B equals reduction I can type there you go and now if I run that file again didn't work but if I do and I run the file and set the variable at the same time and know that that will work so now so set the environment variable node env to be production and run EB connects and it prints out production so when this code runs on Heroku this environment will be equal to production cool so now I need a configuration we're ready to get the config connects file that's where we did do database so I right now in development and I'm gonna use this I'm just gonna go ahead and create the one for production because it's really easy so first in a production instead of development the connection is process env database URL and just for kicks you can throw that as I sell equals true on the end of their and that's so if we can run migrations and seats locally and it will work and what throw an error because we're doing it securely okay so but I want to get the configuration from that file so let's require in that file so I'm in the DB folder I need to go up one directory and then grab connects file so that requirement is going to bring in this whole big ol whole legal object but I don't want the whole thing I just want this one I want to connect it to that database so I want this object so right so pull in that file and then get the property that is the current environment so remember we logged the current environment that is production so that's going to get the production necessary let's use development that's gonna get the development you know what let me change this back to development because it's probably gonna mess me up I digress what are we doing when we're building the crud app let's connect to the database okay module dot exports equals require would ring in the connects library they were gonna invoke it with the configuration now what that does is it just connects to the database so that config is equal to this this object and so you pass that into connects and it says hey there's a nice old database URL I'll connect to it and give you that connection so this file now exports a connection let's use it in our routes so if I go into routes and then I go into that to do file that I defined we can bring this database connection in so I'm gonna call it connects some say contacts those require go into the go p-- go up one directory then go into the DB folder and grab that connects file and so that is our active connection to the database now the first thing i need to do is get all of the to dues from the database so if i say it connects go to that to do table I'm just gonna throw this in here for clarity but select all the rows in that to do table and then give me back those two dues and I'm gonna do thing with it what am I going to do I'm going to render all of those two dews on the page so instead of rendering index let's call it also I want to render a page called all and on that page I should have access to a property called - dues and the value is going to be this array of to use that I just got back from the database let's just run this and see what happens so now when I go to slash to do field to look up to you all in the views directory so that just means I need to create the all view so let's create that view all dot HBS handlebars so now in this file I want to iterate over those two dues so if we let's check out the handlebar stocks right quick if I search for each yeah so each is a way to repeat over a collection in a template so you just throw that on there and then everything inside that array will get basically that as a template repeated for every one so I want to do the same thing but with two dues so if we use that syntax that each syntax so but not comments - dues and then you give your closing slash each and inside of there each to do has a title so I want to show it on the page and let's just throw that into like an h2 tag so in our o I created that in the wrong folder sorry guys oh wait quick break all should be in the Beus folder okay now that makes sense so when we hit the a we want to get a get request on slash to do select all the rows from the to do table then with those rows pass them into the all view as the variable but the property called to do's and then in the view we iterate each over each of those two do's and show their title sure full stack full stack application ok so it's working so we grab data from the database now we're showing it on the web page let's check a box list all records with gets less to do yeah but now let's make it look nicer so we're gonna add three strap so go to the bootstrap website and go to their getting started page which I'm are yet you can grab the CDN for bootstrap so I'm just gonna grab the CSS throw that into my layout page so the layout is the container for all the views that get rendered by handlebars so I'm just gonna replace that existing CSS file with this bootstraps again and then we'll refresh the page and see what happens ooh different font means it's working I am going to use some bootstrap classes to make this little nicer so on the body I'm gonna give a class of container so it has a little bit of padding like that cool now in the bootstrap Doc's lets you do like a list group and show the to do's and all this group instead of just headers yes I'm like this so in my all page first I'm just going to paste so I got from bootstrap so I want to do this the thing I want to repeat is the Li lists group item so let's throw that in there that is the thing that I need to repeat and then don't need all that cuz we're generating this server-side rendering is fun and then here is what I want the title that h2 so if I've done everything correctly we will get a good strapless group for our two dues yeah that's cool I'm gonna add am I gonna add like just a little margin on top so where are we in the layout page X I'm gonna bring back in that local style file style bio so if we look in public in style sheets there's style touch I guess so that's the one one style sheets slash style that stitches right looks right and then in here I'm just gonna say the body has a margin top like three ends oh cool like that so let's get rid of that let's just close everything I have too many windows open now go back to the readme what was I doing adding a bootstrap I think I did that yeah so we've got bootstrap got a little margin we've got a nice little list group looks cool check box and actually if we look at this rendered real check box is sweet right okay show a new form with to do slash new so here's what needs to happen when I click on it to do oh no no I'm getting ahead of myself stop it stop okay what does the thing say show a new forms for slash to do socially okay so I want to be able to add a new to do I need to create a form so let's create a route for it let's go over here to it to do and we need a route for to do slash new so this is mounted app to do and then slash new right so it says show a new form with / - Deus cool so now I actually don't need to get anything from the database because I'm just rendering a form these easy as it gets so let's create a page called new and I don't even have to pass in any data just all I need and while I'm in here I'm just gonna convert this to yes 2015 because I can't help myself make that an arrow function and all is right with the world well but let's create this new view so that we can render it so views new file new dot handlebars cool so in here I'm gonna create a form class of form because it's a bootstrap thing the action eventually we'll talk about the action but that's just a slash to do and it's gonna be a post but we'll talk about that later I need a form group for the title so just call this title title the ID should be title placeholder into a to do no help text let's see what we got so this view will be rendered at to do slash noon so I go to do but plate slash new cool we got a nice little input box you know what I'm gonna create a button on this page that links to that so let's go to the all page and then right here I'm just gonna say create myself nice old button and say well I want to make it an 8 an anchor tag so I can actually link to that page this is going to say no to dude yeah look at that and the hf is just gonna be slashed to do slash new button there it is let's let's give it a color let's look at the button colors you guys would you look at those colors to know success for you CSS buttons what colors do we have okay let's do a primary button is it buttons primary yeah no it's blue button alright new to do cold here's the form so to do as a title what else is it to do have I have my handy-dandy comments that I left myself in my seats yeah this guy yeah that's not what you guys but for the form will definitely have like a priority so you can set the priority will have a description box and this server will automatically set those so we need a drop-down for priority and a text area for description so on the new page let's create a not a form form group oh I'll go look at the blue sky box for like a drop down menu but yeah we've got title drop down menu and then text area so I'll make this a text area the ID is going to be a description the time that label is description with get myself a text area with a form inside of it which means I need like a closing texture yeah okay so you have another description let's add a drop down I don't know like I said just a select box is there something special about it no idea I'm looking for like drop-down it selects it is literally just a select box way to go bootstrap way to make it easy okay so should I put it in a form group yeah yeah look at that yeah yeah there's five priorities where we got eyes up down sweet now let's go to label them for priority and let's give this an idea party sweet that is definitely a form okay I need a button button button default will do success we want to create that to do so I say wait look at that oh well don't do it oh it's button - tip success nice green button okay so when I type into this so the to do is create new to do like that's what I'm doing right now leave the description blank priorities - and then when I click create should make a post request to create this what happens nothing why does nothing happen because this does not have a type of submit so button type is submit that will actually submit the form now let's talk about the actual action so a post request actually Oh No so show new form with it I am done with that one boom now create a record with post slash to do that's that's what I need to work on next so the view is here beautiful but I want to be able to fill it out and when I click create send that data to my server insert that data into the database and then redirect to show that to do page okay so create a record with post slash to do so let's create the route so copy that route but instead it's gonna be slash post so when you post a slash to do remember every route in this file is mounted apt to do so you can leave that off so when there's a post request add slash to do what do we need to do we need to insert that to do into the database so I'm gonna do some really quick validation here so let's just say if valid to do in passing in wreck top body so I'm going to create that function that's going to validate it then I want to insert into the database else if it was not a valid to do that I want to return an error without a turn I'll say respond with an error so let's write this function invalid to do for now I'm just going to throw it right here we'll pull it out to another file later so this is a function it takes in the to do and what do we want to validate so we want to make sure that it has a title first so we're gonna return to do well let's say that we want to make sure that the type of to dude title is a string because if it's if there if it's undefined then the type is going to be undefined so this would return false and so if it is a string if to do dot title so if it's a string that means I can call the trim function meaning I can get rid of all the white space around it so if it's a string and when I trim it that is not equal to the empty string so title cannot be empty that's what this is what else do we want to check we want to check that the priority is not empty and that it is a number so let's check the type of to do dot priority and make sure that that is a number yeah and that's really all any develop a right and yeah then we won't have to we don't have to validate the description because that can be empty so yeah it's pretty much all we need so this function is going to return if the to do title is a string if the string isn't empty and if it has a priority property that is a number cool so let's create that to do so if it was valid now I know I have a valid one let's create it so we'll say title is rectify title and the description so whether or not they put it will accept it the priority is req body dot priority and what else will be yeah that's about it yeah so create this to do now let's insert into the database so to insert it into the database well will say hey connects give me that to do table and you know what I want to do and that to do table connects I want to insert I need to do so what to do are we gonna insert we're gonna insert this to do that we just created boom okay what do you want to do next well it's well connects after you've inserted that to do let's actually let's return the hole to do so give me back all of the the columns on that to do after it has been inserted and then I'm gonna have access to the to do after you have inserted it however because is an insert that is actually an array of length 1 so here I'm just going to say to do is equal to 2 dues that's 0 and now I have violated a JavaScript law and overridden a constant variable somebody make it wet instead now okay we successfully sent that to do to the server we have validated it I should have stopped talking it's break time ok so look away from this view okay so at this point we have since the to do to our server we then try to validate it make sure it has the right properties that we want it does have the right properties so let's create a to do based on those properties from the body then insert that into the database after it has been inserted we then just gonna send actually I don't want to return star I really just need the ID I'm a crazy person so grab that first ID put it in this variable called ID and now I need to check it out redirect on create so after I have created this thing I want to redirect two of you to two of you to do that thing that I just created so this name is not redirect you should go to slash to do slash I do so go to the URL of the to do with the ID of the to do that was just created right right am i right am i right I don't know well we'll see we'll test the code we'll run it we'll see if I'm right ok create a record with post su I got the I got the code that's fine and great now I need to make sure that my client side form not this bag this guy I need to make sure that I'm actually sending the data so let's try it let's let's see what happens and as a precautionary measure let's the log recti body let's see what we're getting here Rek buddy okay no it's running Express is running let's try it out so I'm gonna refresh the page you need to do create single to do page great okay it's spinning what's happening if I go back over here okay so check it out when we log to rec top body it was totally empty let my server is also hanging so you know what we forgot respond with an error so it's actually to that so if the body was invalid I'm just gonna do a resident status 500 server and then res dot I know do I redirect what do I do let's render the error page under the error with a new error good idea what is the error page expecting it's expecting an object that has a message property and an error property so let's create an object that has a message property that says invalid to do so whatever you sent me was not valid and then I'm gonna need the air property so let ya just do that okay so server restarted refresh it I want to create a new to do I want to create the single to do go invalid to do so it responded with an error that's fun isn't it that so what what's happening is if we look at the the body the body that it's passing over is totally empty why is it empty let's look at our form what do you notice about the form pause the video okay unpause the video oh I guess at this point you would have one pause the video my inputs do not have names on them so I'm not actually sending any values to the server so when each of these inputs let's add a name so this should match the column in the database so this one should be title this one should be description so name equals description and this priority the select box should have a name of priority you know what I think this is going to send over the values as a string so my validation is not but let's let's see the air so we now have some names on it now we should be sending some data to the server let's try it out so let's go to to do slash now let's say do the thing go invalid to do so if we look at it we're actually sending it over to the server now so you have that but priority is a string and it wants my validations that it should be a member so let's not see if it's a number let's see if the type of priority is not equal to undefined meaning third they did send us a priority and if I try to parse to do that priority as a number and that is not is not me and so I can say is nan and we know it's a valid to do pause the video expand that think about your life why have you decided to become a programmer and then press play okay let's what what was I even doing oh yeah validation so what they need to do okay so the title empty description ah so is it the world is nice it is it's a great place you should be happy smile great no call value in column date so thank you database migration for preventing me from inserting an old date I just want to thank you for that so what we need to do and I said we this way earlier but we didn't do it we need to define a default date column so let's go back over here and this new to do that we're about to insert let's go to date properties so date new date boom Shakalaka just like that we're in bidness let's make a new to do create the single to do page great oh she it so I believe it actually worked but then when it redirected us every directors to this view that we don't have yet but check this out boom create the single to do page we're crowded we're full stack oh yeah okay so let's go back over here what what am i doing we're checking the boxes because that's what we do feed record with post has to do I'm creating records all day me alright show one record would get to do slash ID so that's why we got that 404 cuz this view does not exist yet so let's create it so now when I make a get request for slash some specific to do is ID I want to render that view so the view I'm ventually gonna render is let's call this single so this is the single to do view and then it's just gonna have to do property that is it to do and I'm working backwards and you're thinking I'm crazy but let's let's do this so right now this select statement is getting all the rows from the to do table we only want the row that has a specific ID so here we're actually gonna do some early validation so let's say let's create a variable called ID and set that equal to rec top params that I do and what I'm gonna do is do it do a nesting so if the type of ID is undefined so I was just thinking how I could potentially spell that wrong and then my code would just break but I didn't know that undefined a small right but so if they for whatever reason don't have an ID to find then I don't want to try to look that up in the database so I'm gonna say if the ID is not undefined then we'll look it up in the database based on its ID else let's send back an error let's say I'm gonna copy my error code so let's say invalid ID cool but we need to fix our connect statements so hey connects select the row where the ID is equal to this ID that they have so lovely provided for me in the URL and once you have that just grab the first one because I don't I don't want anything else I just want that that first row and then take that to do and let's let's render the single view alright next let's that's all I want to do all right let's see what you got so one thing we should do though is on this on this list pages each of these two dews should link over to its single view page so let's check out bootstrap components listing group here comes there it is we actually want to do linked item so how do we do that oh we just make an anchor tag beautiful okay so on my all page let's change this from an li to an anchor tag and give it an href of slash to do /ie so this current to dues ID now looky what happens refresh the page when I hover over look at the URL in the bottom left corner of my screen to do slash one to do substitutes new chef straight to Oracle for proflex so each one has an ID and if I click on one tell to look up you a single in the future entry because we have to create it well let's go do it I'm so over here on views I'm gonna say new file single duct and boss head of oz HBS and so on this page I want to show all the information about that individual to do so how should I do that like with some ones I don't know trying to visualize this it could be like a it's not to do there's no image there's a panel yeah how about this it's got like it's a panel with a header and then a footer to and the footer is like the date yeah sounds great let's do that set it that one that's the only one I want okay so on the single view I want to show here I just want to show that to do is title and in the body I want to show the to do is description and then I want to go back over to the bootstrap Docs and grab the footer so this guy panel put it and I'm gonna make that be date and also these nice little badges I'm gonna throw a the badge is gonna be the priority so let's throw that on the title to your so span badge and that's just gonna be priority beautiful all right what we got it's totally empty that's fun what happened okay so if he was empty let's see let's log the to do that I'm getting back from the database so routes to do die yes the single one let's log this to do so this is the to do that I got where are you to do oh you know I mean I can see why but can you see why oh yeah little log it should be coming over so we love this okay there's that to do boom that's all it's all my data but you'll notice that I sent it an object with a property called to do in a value called to do so if I wanted to get this to work if I wanted to not saying I do but if I want to do I could go to the single view and make this to do that title and I could update all the other properties right I could do that because I'm capable of that I am a software developer right I could do that but what I could also to do to do to do is leave the properties the way I have it so like I don't have to say that to you sound like the type I don't like less for characters that I don't want to type so now I can go back to my route and just pass them but to do right because if I pass in that object that object is gonna have let's look at it it's gonna have these properties system have title priority description you don't done date it's gonna have those properties so when the view renders it has access to title priority description date you're with me right you get it you're full-stack sweet so build a crud app priority-one and oh yeah we got the date we're flying along guys we are building this crud app like there is no tomorrow saving the world show one record with get slash to do slash ID cool done show and edit form with your killing me ah how am I gonna do that okay show an edit form with get slash to do such I do you slash at it well I know one thing I'm gonna creator out that has that exact URL so let's do that so let's throw it right there so when I say rata don't get that thing that I just copied okay when you hit that route I need I need I need to do something I don't know what I need to do yet I probably need to take a break like what time is it well but yeah I need to I need to render something so this doesn't I guess this is gonna require logic but let's render edit so let's let's add a button that will link to the edit page so let's go to the single view we'll throw a button right below that Dave will give a class of button okay there's my red timer I'll finish this up and then I'll start up another video after I take a break but let's do this so create this button will do button warning no yeah yeah why not warning will say edit to do and this should just be an anchor tag that links to not that but that that URL I just made yes where was I didn't you take a break I'm here to the break I need take a break okay I want the HR F to be that URL but I'm not specifying an ID parameter for express I was pressed buying it for a bar so I throw that in there big fancy little H ref so refresh the page got important it's orange look at the bottom left corner of my screen to do a slash warned / edit so I click that if he was not found stay tuned for more after these messages alright I am back and better than ever before but if you remember where we left off this edit page was not found so let's create it if we remind ourselves we're currently working on the show and edit form when you see a get request on to do slash some ID / edit so let's create that route so in our routes will go to do we attempted to do it up but check it out this this router file everything is prepended with to do so I need to remove that because that's redundant now we have a route now when I do this fail to look a few edits so we're trying to render edit now I need to actually create that so let's actually known ado I'm going to copy the new page because the Edit Page is gonna look basically exactly the same except instead of doing a post request it does a put request so let's duplicate this new page and let's call it edit now what we do is for each of these inputs we're gonna set a value so the title value is going to be to dude title and definitely wrap that in double quotes it still has to be valid HTML don't put the Cooper own rules okay text area is gonna be description and then this value is gonna be five all right sweet and technically we should have a like checkbox for done all right let's just close get some let's do an apple any this and that's not create its update if you're keeping track we are now on the letter U of the word crud okay to do slash edit Suites so I see a page it says update I'm gonna make that not success what is a danger yeah red sweet I don't know is that the right color you tell me yes I got the page but I want to actually display the values of the to do with the ID one so we got a we got to send that over how we gonna do that get it from the database how about getting it from the database when he's connects how we can use connects and use JavaScript how are you Java sure breeze stop it okay so right here I need to get the to do with the ID in the URL right so we'll say hey connects give me that to do table and I want you to select where the ID of the to do is equal to you know what I've written this logic before and I'm not gonna write it again and you can't make me but if we go up here to get by ID I have this beautiful logic look at that look at all this beautiful logic like it literally does everything that I want to do except renders a different view so let's abstract it because that's what we do as computer programmers we abstract the out of I am it's 11 o'clock I'm just I'm just tired I'm sorry guys let's let's get good skills get through this okay I'm gonna put this in the phone so we'll say respond and rendered to do that should taking the ID and the response then right there I'm gonna define this respond and render to do that takes in the IDE and the response it does that stuff gotta give it the function keyword because we're cuz we know how to JavaScript did I pass everything in right yeah oh yeah but the only thing I want to do is I want to say the view name and now instead of single here I'm going to pass in you name and now when I render it here I'm gonna pass it in the word single and now I'm gonna do the exact same thing for my oh I scared myself I thought I thought I was just left but now look guys isn't that friggin amazing one function it does it for both things so when you go to slash ID show the single show the single you when you go to slash edit show the edit page check this out boom build a crowd at priority what okay so what happens if we go to the main page and we walk the dog priority for but if I click on edit oh it's happening okay but the only issue is priority is not getting selected let's let's look at our element inspector so if we look at the priority thing we'll see that the value is 5 however none of my options have values on that so how would it no it's not it's not smarter than not how smart it would be what I'm trying to say is if you just add a value everything works number one roll do-do-do-do-do-do-do to do it now know what you're thinking hey CJ you forgot to replace that no I didn't I'm about to look I'm doing it right now stop it okay now if we save it and we refresh it and the priority it's not sad anymore to do-do-do-do-do do-do-do-do-do like I don't know well I did google it HTML select set value I don't know the default value selected equals now that I can do so I'll leave the values on there cuz cuz why the hell that oh you know what let's let's do this so priority let's give it the word it makes it makes it feel more important but what was I doing yeah so selecting so not value I say selected and that won't choose the right one I choose you priority 1 what what ah I might need to pause this video but maybe not let's let's figure this out selected equals 5 value equals 5 but it's not selecting it [Music] oh you have to add the selected attribute damn how am I gonna do that with handlebars conditional yeah with a conditional yeah I'm definitely have to edit this video condition learn more about built-in helpers if I can't handle that okay okay so it's in here no more so yes wrap it so if oh my god then I have to pass in an actual variable it can't be this hard it can't be as hard tell me is not the sorry my I guess I could you I could definitely use JavaScript but I'm doing server-side rendering I'm trying to avoid writing client-side JavaScript right that's the point right no it's not that it's not the point yeah good job you know how to use jQuery like come on guys come on zucchini can we stop the video oh we started my god alright so where we left off I was trying to pre select the option based on the value of the to do that you're currently editing so we're currently working on this one show an edit form with get to do slash ID / edit so on that form I wanted the option to be pre-selected I figured out how to do it I'll show you show you how I did it but on here if I click on I need to do and then and it thought to do it'll show its priority so if I go to do / - its priority is 3 to do / 3 its priorities - to do / 4 its priority is so each one pre-selects this so I found this Stack Overflow post where they created a handlebars helper where you can use this syntax like I have in there you say select the value you want to select on in our case priority is the priority of the to do and that adds the selected option to whichever one and so what I did in apt is I just brought in handlebars and added the helper and that worked out interesting that I had to do that to get that to work but hey that's server-side rendering cool so yeah the value showing up now I need I need this to actually update the to do right so show an edit form boom check the box now update a record with put to do slash ID so I need to create a put route to slash ID so we've got our get routes our post route now need a put route I'm filling a refactor coming on but yeah let's let's do this so router it up put so when you put to a given ID I want to update the to do with that I be so reckless and yeah this is basically I pull this into a function - but instead of like I'm gonna tell it whether it should insert or update and where it should redirect to you so let's let's do that so I'm gonna pull all of this into a function what are we gonna call it so this where does this function doing it is validate to do insert or update redirect it's literally doing all those things so it's going to need access to the request and the response yeah totally so I need to access to both of those so let's create this function validate to do insert update redirect rec press I'm gonna I'm gonna I'm gonna need the redirect parameter chase right there redirect that's gonna be what URL do you want to redirect to so I grab yes throw it into this function I want to redirect to I have cut myself what am i doing but I mean basically I need to I need to pass this into the function right because in this case I need to insert and then immediately redirect to that ID in our case after we update I should redirect it to the view page so let's pull this out this is this is gonna be a parameter so let's just say yeah it's just a callback and there we're gonna pass in what to do and so here we'll say call back so rec res and then a callback function that takes in the to do we then insert that to do and redirect it to where we want to read our tube so basically I'm calling this function invalidate to do insert update redirect passing in the request response it's gonna validate the to do if it was an invalid to do it immediately responds with invalid to do so if we attempt to update and to do with invalid values that's gonna break too however specifying date let's pull that off because I don't want to set the date every time you update it so right here this is what I'm gonna say to do that date equals that I know I know I should just do it without refactoring but it's fun it's fun guys okay what's going on here I need to put the function keyword you need to learn how to write JavaScript so cool got this handy little function now let's excuse it so my foot route can do exactly the same thing but after it's been validated instead of inserting it I want to update where ID is equal to rectum static and we're gonna update that given the to do and [Music] then we don't want to redirect to yeah we you um the thing is this isn't gonna give us back the the ID this is just gonna give us back the thing we don't care about it we can just use wrecked up Rammstein ID fun fun fun for functions okay what am I missing yeah what if there is no record in the right database with that that ID I could just check for it and I don't want to do the date there oh well well I won't handle that for now but okay I've got this put row when I put an object to it it's gonna validate that object it's gonna make sure that the priority is good the title all that stuff is good and then if it is it's gonna call this function with it to do and then we can decide what to do so in the case of post we inserted it in our case we're updating it but if there was and if it wasn't valid it would have immediately responded with an error so I'm not duplicating logic I've created that function that makes it fun so let's try this out so server is a login Chrome is a here so we go to edit for so I want to change walk the dog priority to be for instead it's click update did it work it's frickin worked holy the only thing it's doing a post request I shouldn't ah did it create it I created a new to do it posted instead of putted yeah so now walk the dog is on there twice so easy easy enough fix so on the Edit Page right now it's posting to slash to do we want to put to slash to do slash ID cool so now if we go here it's edit it it's priority is for let's make the priority 3 and update it oh no it made a get request with this big long URL what I told it to make a put request well my friends now it's time that we have the talk about method override so let's look it up we're gonna say Express method override but the idea is an HTML form can only ever post or get it doesn't know how to put or delete so we have to include this middleware that allows us to do you do it allows us to do a put request and a delete request with a form so let's install it sure over here I'm gonna say a multi yarn give me that method override package thanks yarn so let's use it so I need to pull it in and this is telling me it should probably be an apt ojs so let's go down here let's pull it in pull it in method override how do we use it override with post having method equals delete sounds good to me so we're just gonna use that after our other middlewares and most definitely before our to-do route because that's where we need it most what this is saying is in my form I can use this method thing until if the actual method I wanted to use so in our case for the Edit form we want the method to be post and we wanted to post against that but then throw on their method equals put so really the method should be put but method override is to find this post cuz that's the only thing you can do with HTML forms but then method overrides gonna kick in and make this a put request instead cool let's try it out so let's edit this to do let's try to walk the dogs and update it that friggin worked full stack say it with me guys full stack full stack okay so let those badass that worked we can edit any to do now let's go over to render review edit it make that priority one cuz we're doing it all day long boom priority updated and if we go to edit it priority is one render of you Express is fun if you don't think so f off right update boom and now it's like it's got the description this the ship's full stack back post okay so let's let's check a box we have now updated a record with a put to to do /id fantastic delete a record with delete slash to do slash ID so now I need a delete route so it's gonna be router with psy typing router dot delete a specific ID so when I get it delete request for a given ID let's let's delete it so first we want to validate the ID so we can copy that validation we did in this method up here or did me no we didn't where do you read alidade the idea earlier oh this one yeah a type of ideas rather undefined should probably put it into a function yeah why not respond I'm gonna have a function that calls another function now I'm gonna copy and paste it for now you're later so validate rector instead of e so Const ID equals rector and step so make sure it's a valid ie and then we don't want to select we just want to delete where the ID is that and then we're not gonna get anything back then we're just going to rest out render or under the all page so when I see a delete request on slash some ID make sure that it's a valid ID and it's not a valid ID respondent with an error if it is a valid ID let's find that to do with that ID delete it and then not render let's redirect to the all page so slash to do so after you delete something redirect to the the view all page so the route is there beautiful we need a we need a place to call it so let's go to the the view like this you have a single single page and so right here we have a button for edit let's throw the with throw a button for delete I'm just going to remove the H ref renounce just button danger so now if we go to a specific to do we have this button that lets us delete the to do but what we need to do is we need to make a delete request to /id to do /iv three to delete the specific do to do so what i can do so i can create a form right there and when i click it submit that form to do to make the delete request so let's make that happen so make a teeny tiny invisible forum and it's action is going to be what is it / to do / take a break look away from the screen to do / ID and we need to use method override in the method well the method is post but here underscore method we're gonna make that delete because we want this to be a delete request I'm going to throw that delete button inside of there and we're gonna make sure this is a type button and this is a type submit' so when this button gets clicked it's gonna submit this tiny little form with a post request but method override is gonna kick in and make sure the method is the wheat if we look at edit did I do that right so underscore method equals the method you want under spur method equals the method you want fun let's try it out so the laws are running press the page I put it in the form which is a block level element so it pushes it down one let's just put both of them in the form because only the second one is going to actually submit the form so if I go to edit that still works cool but moment of truth I click delete it worked cool let's delete this one cuz I don't like walk the dogs full stack full stack it's working guys so we get this delete method on to do with an idea seven so create the single to do page well for one I have completed this to do so let's update my my edit field so if I go into edit actually not I'm getting ahead of myself or behind or whatever let's check a box guys we're deleting to dues right walk the dog delete it don't got a dog cool so check the box delete a record with deletes last you do I think we've done it we have reached the full stack we're doing all of our redirects - so that means like after creating a new to do it redirects to the single view page after updating to do it redirects to the single view page and after deleting it to do it redirects to the all pages so let's just test that out so I've got all my - dues let's say I want to create a new to do and that was broken cool cool you know valid input some text for integer new to do your slash new right what could I possibly be doing wrong oh it's where I've mounted my routes and this is why we validate the ID my friends so what is happening is when I go to do slash new that is actually hitting the /id route and it's saying ID is equal to new so if I look at my routes slash new is defined below that so when I see the request for slash new this route matches first so what I need to do is just make sure that this is above that route so now when you see select to do slash new you show that view you don't try to show the single view page with something that has an ID of you so cool I can create a new to do to do finish crud app description do the things and this is like a priority YouTube great cool so I created it it takes me to the single view page so this is the view for a single to do it has a priority of two there's the date suite I can go back in and edit it I can change the priority to like five if I want that works that got updated and then I can also delete it to do so when I click delete it redirects to the all page so let's just verify if I go to the all page finish crud app is there but if I go in to finish crud app and click delete it actually gets removed and we to the all page we are at full crud people there are a few things I could do here to make it a little bit nicer like on this page maybe I have a link back to the all page yeah on the edit page I probably want like a checkbox for done or something like that and then if it is marked as done and I update it then on here it shows like with a line through it I could do all these things but at this point it's just messing with the views like I am at full stack thank you so much for watching thank you so much for bearing with me go out there build full sack apps change the world goodbye

Channel: Coding Garden

Views: 43,711

Rating: 4.9235296 out of 5

Keywords: frontend, learn to code, learn javascript, live streaming, educational, node.js, html, learn web development, backend, debugging, full stack web development, vscode, CRUD, full stack, learn node.js, programming, frameworks, knex, live coding, debug, node, express, full stack javascript, beginner, javascript, css, todo, how to code, web development, coding, lesson, learning, mechanical keyboard

Id: WYa47JkZH_U

Length: 77min 37sec (4657 seconds)

Published: Wed Dec 14 2016

Reddit Comments

[u/[deleted]]

Are there any (dis)advantages to using SQL vs NoSQL databases with node infrastructure, or is it a matter of taste?