Simple CRUD Application with Node, Express, & Postgres

hello everyone welcome to tranquil code a place to share code ideas and hopefully stress-free ways this is my first video and I'll be showing how to build a simple crud app using node expressed in Postgres since this is my first video before we get started I want to quickly go over who I am and why I made this channel I'm currently a software engineer and a lot of where I am today to great people who share their information on YouTube with me and others so I created this channel as a way to give back the community so what we're gonna do in this video is first I'm gonna show you what the app looks like then we're gonna go over general setup we need to do before coding and finally we're gonna build yeah so here's the app as you can see it's not gonna win any design awards or anything but it's just a simple crowed app and I don't think I mentioned what a crap was before but essentially a card app stands for create read update and delete so as you can see here they create part is with the add the update here is through changing values be read is through the get and the delete is through in the delete portion of the app I also wanted to quickly say that I'm using the Mac computer and I also am using the Chrome browser and have a couple of plugins that are affecting the pages you see right now the first one is JSON viewer so I will if I click to get here you'll see like all these kind of fancy things and where all this informations coming from all this stuff this is just a plugin called Jason viewer and it just helps you to display the data a little better on your computer if I click this you'll see that it looks a little bit different in this toggles back on and on and off I also have something called dark reader which is great on my eyes it just helps me I love dark mode so you can talk when on and off and it will kind of go between those two and here's just the page for that and I'll have a link for both of those in the description if you like to check those out but can't definitely highly recommend them so going back to the application as you saw I got something and there's nothing in there so let's go ahead and add something in there we'll add hello and so this now shows the database that has a name and the value is hello if I go back and let's just say I wanted to update that value then I can I have a tag here that says old value so I put the hello in here I want the new value to b by click update and now the name is says by instead of hello and then if i wanted to get rid of that i can just click on this delete form here and then click the leap button and then by and then i'll get me back and it responds like it was before so that's the basic overview the application and we're gonna get right into building next so before we get started with the coding really quickly want to go over how to install node node is basically just the way for javascript to run outside of the browser which is what you're looking at right now now just a side note that makes node very very powerful it's great language to learn javascript a great language to learn so and also you saw from the title of this video we use post chris as well not really gonna cover how to do installation of Postgres there's a ton of information on that on youtube everywhere else i can do a video if you know a few people do leave some comments in there and say they'd like me to do a video i can definitely do that but there's tons of videos online about that already so for node this is the home page emily look for that in the description and i really need to do is just click on this button here there's another version here you can download it's newer but it's maybe buggier so i definitely the safest bet is probably just to go with this version here click on download already have a downloaded copy here but you see something like 20 megabytes doesn't take very long so you open up the installer pretty straightforward just click OK agree to the license agreement you're definitely up and read through all this if you want I don't for this I kind of trust it but if you feel free to read if you need to and then for the installation is 70 to get a megabytes so click install to prove it if you're on a Mac it's gonna install it close and finish and that's installation also before we get started I want to quickly go over what the table will look like when that's where I'm storing our data in Postgres so this is just a very basic table with one column and the column is name that's where all the values are going to be stored I'll quickly go back to the app and you see like this is empty and this is empty if I go to add something into the database then you see it shows up here in the JSON as name which is the name of the column and the value which is M if I go back here and i refresh this page you see that this shows the same thing calling name is name and then values M so they're just showing two different ways of seeing the same data that's stored on Postgres he and mr. quickly show if I can delete the M there's nothing here now and there's also nothing here so nothing big in this section is one it's a just quickly know what are aware rather we're going to be storing the data you they're going to say MPM in it that's gonna start our package manager' and we can just enter through all these things here if you want to look at all that in how to configure your application there's tons of great resources for that but we're just gonna go through that really quickly now I've ever packaged that JSON file and then next thing we're gonna do is we're gonna make a file called app dodgy yes this is we're gonna have all of our application code in and now that we have this let's just say console that log hello actually not let me make this text a little bigger maybe not that big yeah me that sure will do this okay so say console that logical oh and save and then we'll say no app J yes and if says hello then it means there are everything's connected everything's working now we can actually start writing server code so we'll start by calling in the Express library so it's a constant press require Express and then we'll not save that yet we're gonna install it so NPM install Express we saved it before then that would have been an error so we're going to save that and it's a really quick background on what we're doing here is we're essentially we downloaded the JavaScript code that is in this library called Express and you can see all the libraries here and you can see express itself there all these libraries are what Express depends on the run and so we just pulled that in so now we can access that code if we use a variable called will say app equals Express and now we have all the things that we could access on Express we can access through this app terrible so to get well so we'll use this to start our server and we'll say app that listen and this takes a port and we'll give it a callback function so we're gonna for our port will just say cost port equals we'll sector thousand and then we'll add it our port variable here and then we're going to give a function and this is we just say console dot log then server started worked starred yeah started on port 3000 okay so we'll save this and then we'll start our server by doing the same thing with me or say node API yes and then it's a server started on port 3000 so we can't really do anything with this yet but before we go on to the next part I'm just going to clean up this code a little bit we're gonna modernize it by using arrow functions and we're also gonna use back ticks for this part of the code because to make it a little easier to work with and I'm gonna using this code this syntactic sugars they call it even though it works the same just looks a little different for the rest of the coast I just want to go over differences so now if we stop this server and we start the server again you'll see it does the exact same thing so just a slightly different look here but it's just a more modern way of writing out the function and the strings there but you noticed here to see these changes on this server we had to stop the server and restart the service are actually gonna call another library called node mine so we're gonna npm install node amman and essentially what that does it just let us save anytime we save a file it will reflect those changes on the server and we don't have to stop and start the server like we did before so to run that we're going to use our npm runner npm npx say Noman app GS and so now you see server started on port 3000 if i were to change this to 4,000 here you see that the change is automatic reflected if i go back go beyond 3000 so that's how that works so but now we have the server running but if we were to go to localhost 3000 click enter it's cannot get / which is the home route so our servers running and it's giving us something back because if we were to stop this and we were to hit this it would say site can't be reached so the server is running but we need to give it something to do when it makes a call out to that home router so let's go ahead and say in between our variables here and the app that listen we'll say app dot get will save a home route here and we'll do requests and response to our arrow function and then we'll requests or actual response dot send say hello there we'll save that I'll go back and when you start up our server again so starting up our server and we'll go over here and we'll say 4,000 and we have hello so now whenever we go to this address will respond back with hello so now what we're going to do is we're going to let's instead of giving back just one word why don't we try giving back some HTML so open up a new file by just double clicking on this top bar you can go up in the top bar and click new file I'm gonna change my environment to HTML so I can use some of the cool shortcuts that vs code has so if you hit the exclamation mark and tab it'll give you a whole HTML template and if you hit and inside this temple in the body we're going to say P and then tab to open this up and we'll say hello down here take PE tab and say my friend and this isn't a course on HTML there's a lot more of HTML it's just the very basic crud thing so we're gonna keep it minimal on the front end but I did want to at least kind of show because we will be having a little bit HTML of how we're sending back the HTML from our server so we're going to we're going to get rid of this flow here and I just want to show you another cool thing about backticks if we were to paste the HTML page into this quotes it would give us a whole bunch of errors and it's not able to work like that excuse me but if we use the back ticks here and then we paste it in this way and then there's no errors and we able to expand it over multiple lines so back ticks are really useful for things where you need to have your string structured in a certain way to be able to see all it because you could have in a one straight line is easier to edit to looking like this so if we save this and we go back to our localhost we'll see hello and my friend here so we're actually able to return back this HTML page and a cool example that I wanted to show of giving back sending HTML response is used something a little bit more stylish than what we just made there so I'm going to go to ign.com which is a gaming website if it'll let me see refresh you have a great suspender thing here that suspends my apps when I'm not using them here we go so we're gonna view the page source code we're gonna take all this HTML and we're gonna add it to the response in our server and click Save I'm gonna go back and we're gonna hit fresh refresh and now we have IGN on are coming back from our server and it's not the actual IGN page because if we click on some of these links will see you'll say it cannot get whatever this is in the same way that we could not get our home page when we earlier tried to go to a page without giving a response to the server so our server only has the IGN page instead of all these all the pages that would be required for the site to be working correctly if we were to go to like this page here and click on it we see their server does have response for this page but our server does not so it will always end up with and cannot get to a 404 error there so we're going to let's go back here we go back to our HTML and we're going to get rid of this and we're going to do a form and so that's that form tab and then action is gonna be we're gonna have this go to info see here / gift that's where the page is gonna look to find our to send the request and then we're going to have a method and this is going to be the type of request we're going to send so we're going to say it's going to be a gift and inside this form we're just gonna have an input and we're just gonna scroll down here to submit and the value is gonna be get and that's just going to be the words on the button so if we go back here and we paste this into our code and we save it and we click refresh we'll say goodbye to Aegean and hello to our get and just like how we couldn't get those pages in idea and we also cannot get this info / get page because we have not yet done something on the server to create a response for that page so but before we get into how that works I want to quickly go over middleware because that's going to be that's an important concept for servers and Express servers in particular so what we're gonna do is to start middleware function we're gonna say app dot use and I guess just a quick background middleware middleware just things that run in between your server calls so if the code runs here and then before it would if you clicked on the get button before it went to this and ran all this code here it would go back to this app dot use function it would be like is there anything in here is there anything we need to do in here so to give it a quick example of that I'm gonna say we're gonna say app that use I'm gonna have a request oh and also this is a good time to note that most times people don't type out all these words here they just say rec rest least examples I've seen that could be there could be some other people do type them all out but this is something you'll see very common so we're gonna stick to that naming convention because we're gonna be typing out requests and response a lot so we just say rec and rests and we're going to this here and then we're going to console that log will say ran in between server call spelling is okay because it's not a spelling test so we'll go here and refresh this page and if we see we'll still it's refreshing but something's happening with the page hasn't actually refreshed this is loading and it says waiting for localhost so if we go back here we'll see that our code actually did run in between the server call but we need to actually include next so that when it it gets to here it doesn't just stop and it can actually continue on to the next part of the code so we call this next function we fresh that and then we refresh here and you see that now the page is loading okay and we can do bit the things that we could before so this is a good way to add in authentication and to add and logging for your app there's a lot of cool things you can do with middleware it's very useful but instead of us using our custom middleware though we're gonna actually add some middleware from a library and we're gonna call the Morgan Library morgan equals require Morgan and this is just a logger app library that helps us see what's going on with everything in our server so we're just say npm install i'm morgan click enter and then we're gonna go see we're going to instead of all this stuff we have here we're going to get rid of our custom middleware and we're just gonna say morgan and we're going to type in dev I'll click Save and then we'll start up our server again and we're gonna go back here and click fresh and we should see that now I'm gonna click refresh we have some information here we have a git which is the type of request we have the slash which is the route and we have the response from the server and so there's a lot of really cool things you can do with middleware like this you can even change the tags you have in here and if I click refresh here it'll be the same general information but be some new stuff here as a date now so there's a lot of cool things you can do with this middleware but we're just gonna keep it on dev and then we're going to actually connect start connecting the Postgres server so that we can have response for when we click that button so we're going to say Const pool equals require PG and then we're gonna say let pool lowercase equal cooled new pool so we're making the instance of this object and I not a hundred percent sure I believe it's called destructuring but don't don't quote me on that but essentially what we're doing here and the reason why this looks different is because there's a property on this PG library called pool and if we were to write it the other way we could say Const let's say Constable's require PG and we have that and then we could also then we could say let pool to equal new PG pool and so it's the same thing you see has the same properties here it's just this the way we did it before is just a cleaner way to write it it also has it like that in documentation so I'm just going to stick with that but I'll have a link to Morgan and the pool library and all these really great libraries in the description for you to check out if you're interested in learning more about them because documentation on those is great and you can learn a whole lot from it so now that we have this pool here we're going to after this home get function we're going to say another get function and we're going to call that the info / it which is what we previously didn't have a response for I'm gonna have our rec and our rests and we're gonna say arrow functions goes here and now we're going to say pool dot connect and we're gonna have in our parameters not error client and reviews and then we're going to this here and inside of this we're going to have a try actually on the outside of this we're gonna have to try catch and try catch basically just if there's an error that happens it will catch the error and you can decide what you want to do with it normally errors unhandled errors crash the program but in this way we can we're just going to log error as opposed to having to crash the program so now we have this connect here and we're gonna say client dot query and then have the back ticks and we're gonna use our post quest query to connects going to be select star test but before we do this we're gonna have to add in one more library because this PG library requires at least my understanding requires environment variables to configure and connect to your Postgres library so we're going to say const actually i'm just going to be just required actually require dot P and V dot config ok and then what this is going to do Russian stop server we're going to NPM install dot E and V and what this does is it allows us to add environment variables through this library and environment variables variables that are going on in the background that you really you can't really see but but I can actually do a quick example of that so let's uh let's comment this out because this code is gonna probably throw an error if we try to run it without setting up our environment configuring its Postgres correctly so let's run our server and it says OPG module not found oh oh you know I must have not installed PG sauce the NPM install PG definitely gotta install TG for it to be ok so now we try our server okay that works so now just to really quickly go over environment variables we defined our court as three thousand up here so let's put this down here and let's make a new file called env and then we're going to in the studying view we're gonna say port equals 3000 and we're gonna and no no semicolon I tripped me up before and this in and for these environment variables no semicolons and also you'll see that this environment variable is environments been triggered on the vyas code and it's not back like that by default you have to install the plug-in and that can actually go over some of these extensions rather that I have here so you can see enabled here I have bracket pair colorizer and that just makes these brackets match colors and that's really helpful when you have these big functions with all these different parentheses and brackets that you're trying to keep track of and I also have this dot a and V that is what you see here that is making these colors up here and giving them some text and highlight I believe that's all the one though I also have es icons which is really cool because it lets you if I go back to here it gives you some custom icons that I think are a little bit more intuitive than the default icons for the ESCO so a lot of really great plugins if you know some cool plugins you guys to check out you can drop them in the comments I think that plugins are what make vs code really powerful so our port without the semicolon has been saved if we click if we go here and we say process env that court and say that and then you know let's change this environment to like 8000 or something so we actually know that it's changing and then we save this here you'll see it's that server started on 8,000 so we actually would have to go to our port at 8,000 see the page come back so you see this is coming from an environment variable as opposed to our actual server code and the reason people do this is if you're sharing your code with people you may want to show what you did but you don't want to have the actual information your private information how you configured your servers because that's those private other people could log into your server and do all sorts of things so it's just the way to have everything configured and then you can when you push to get you can ignore this file and everything else will show up and so people can set up their own configurations and not see your private information so with this this file right here we're going to add in our Postgres configuration so we're going to say PG port equals 5 4 3 2 and this is stuff you would have done when you installed your Postgres library and I'm trying to keep these things really close to the default as possible that's why you see written aims like Postgres for my PG host and Postgres for my PG database also you have to spell these things correctly if you don't spell these things correctly is gonna be an error somewhere we're probably gonna see an error somewhere but and if there's an error we're just gonna try to power on through because this is gonna be I'm not a great video editor I'm gonna trust you this in one take so it can just be taken care of but we see we have the CEO I already did PG port was 5 4 3 2 PG hosts with localhost not Postgres to local hosts local host Postgres for PG database PG users Postgres and PG password is the very secure password so this I would not recommend setting up a server that you're gonna use for any project like this much just throw a project and you don't care who sees your data this is just a very simple server that had nothing on except for example 4 here just that one database with the name table with the name column so now that we've done that we can go and uncomment this and we'll continue with the code here and we'll say we're sign this response because this is what we'll get back from here's response to a variable called RESP and then we can console that log actually let's just this send it so response that send the risk that rose and this is a lot of properties on this response variable that when it firm ation is returned back from here but Rose is what gives us the information that's actually in the database so if we save this here and we click on the get you'll see that there is nothing seems to have happened we click on here is everything seems to be okay but there's there's nothing in here and that's a problem when you click on a response from here even if the table is empty which this one should be you should still see an empty array up here here on this so and the reason that is is because this is a synchronous and so we try to run this and so this code went and tried to do its thing but in the meantime we went on to the next line and didn't wait for this to finish and so this didn't get any sort of response back so we just went ahead and said I'm just gonna show you what I got I don't have anything here and later on this finished and we never got to see it because it it finished it some other time but if you want to change that we have this a sink await and this lets us LUN run a synchronous or more than one things in our code at a time so essentially what's happened is the code will start running like almost like in a circle and it'll stop right here and be like oh this code needs to run so it'll let this code go it'll come back in and then it'll keep on going so now we can actually wait for the response so if we save this and we go back and we click get you'll see that now we actually have an empty array and this is my plugin again but if we didn't have our plugin we just see just an empty array this is what you may see if you don't have this plugin but this is what we're looking for we're looking for an actual response back from Postgres that tells us that we have no information return so that's good so now we actually have finished the what is it they create read the read portion of our application so we're going to add the next part and so I'm gonna go back to this here and I'm going to copy this form and we're going to say we're going to actually be add information to the form now let's say add here method is gonna be post in this case and this type is going to be submit and the value is going to be add here we're actually going to add a couple more things in here which are going to be input of our she's label label this is going to be label 4ad and we're gonna say add is what the text we're going to use here and then we're going to have another input this is going to be of type text so we're gonna scroll down to text and then the name is gonna be add the ID is gonna be add and if we see copy this and put it back in our HTML right here and we save this know what I think okay I'm a senior I thought I was missing a form but just without it yeah so we say this we go back to our home page and hit refresh and now we have our ad so we can actually get text back here and we can click add of course we cannot post to this because there is not a post route set up so we're gonna set up that right now we're gonna basically just copy this code here because it's gonna be very similar we're gonna paste this down here we're gonna say app dot type app post and I'm actually going to paste this just comments out for just a second and to do that just in case you don't know that's just control slash or command slash whatever system you're using and then we're going to grab the request is the first time interacting with requests and we're just going to let's rest dot send rec dot body so what we're gonna do is we're going to try to grab from the form that we have here we're going to type something in we're gonna send it from the front end and try to view it on the back end and they were gonna send a response back in the front and to let us know that the data was able to go back and forth so if we go back to here hit refresh let's just tie typing hello and we click Add here and it says we cannot post so I forgot to throughout here so let's change the route to add to make sure that our app knows where to get to that and we cook back and then we'll try it again and we will see you there is let's see here we it looks like it almost ran but something went wrong here so let's see make sure everything's working here we have an info add method post we ever add button we have all this information here we have our submit we have our rests in wreck body I don't see anything let me console that logs to make sure that nothing's going wrong here to also log wreck my body we'll save this and we'll go back here see let's refresh this again just type low and we'll click add and it says undefined okay so that means that we're not able to the body is naturally being sent to this route here which is I'm not sure exactly what's going on we are sending it to here Sonia the post we have a label we do have this information here this should be oh okay and this is is we need to add in our middleware so this is a another great use of middleware if we try to do this without certain things in the application we're not going to be absolutely able to send the data back before so we're going to use is app let's say app that use and then Express dot URL encoded and then we're going to have some inside that function we're gonna have extended true I'm not gonna get into too many details about this just know that this is a way for the request that we were asking to view to be parsed without this we can't actually go through the request date and do anything with it so we're also going to use one explicitly for JSON and JSON is just a it's just the way of organizing data this thing it stands for JavaScript object notation yeah javascript object notation I believe is what it is but you can always look that up because I sure don't know everything so we'll say Jason Express thought JSON and we'll say that now if we say this it says oh it says that Barty parse is deprecated so I will say like there's older versions that body parts is the library that lets this actually happen that's where the URL and code is coming from but this is basically telling me that I have a I did not spell extended right this X 10 you know what I can't even think it's been a long day so I'm just gonna copy this in because I am a mouse you extended so we're gonna click back on here we're gonna click add and now we actually see that we're getting a response to be able to parse our data we're but view our data but as important to note that this is not on the database we are just we're parsing back the response that we got on the server but we have not saved the data to anything so if I go back here and I type hello - hello is gone and hello - is here so we aren't actually saving the data but we are getting ready to go ahead and save the data right now so what we're gonna do is now that we have this response being sent back sorry we're gonna here we're gonna uncommon all of these things here we know that all the stuff works so we're going to get rid of this and we saw the console dot log was working you have information down there as well oh this is a good example of JSON to me you see JSON is just as key value pairs is essentially like a JavaScript hash map in a sense so that's all it really is and then we have this is gonna stay exactly the same the pool dot connect we have our synchronous function you have a try-catch to catch any errors but we're going to add in a different query because we want this instead of to get we want to actually add things instead of getting this so what we're gonna do I'm gonna look up the query real quick because I don't remember I'm not great with sequel I'm gonna say insert now - say - like if you're thinking I'm copying all the stuff and you're thinking like all this guy's a great developer because I used to watch videos of people write things like this and some people are really smart there's this guy I think coding code guarding with CJ or something like that I probably post a link to that at some point but this guy can just type stuff out of his head he's amazing but I'm not that I'm still learning and if you have to look at notes and stuff to type and do all these things then you go ahead and look at your notes because it is not a memorization game it's just I've learned more from trying to get this video together and I ever imagined but you don't have to memorize things to be a good coder you can as long as you can build it you're good to go I would recommend memorizing concepts though because concepts will definitely be on your side there so let's just say Rick not body dot add and so what we're doing here instead of saying the recti body we're adding in this add key right here has a value of hello so we're just gonna instead of adding this object our name database only allows for strings to be added and so we're just gonna add we named the string add up here and so we're just gonna name whatever is in this part right here which is a string you see from the quotes and that's gonna be added to our database and also what we're gonna do instead of rests in is we're going to rest our redirect so we can go to our get function and see the new updates we have just made so let's go ahead and say rest stops end I'm sorry rest start redirect and we'll say info / get it will save that we'll go back here and then we'll refresh and then we'll say hello and the C says that cannot get info / info / gets which means I type this in wrong / which should be over oh you know what it says it cannot get you know full / info / you get which makes me think that this submit button is incorrect so this does say info add this does say info add maybe we didn't refresh this page correctly so let's refresh this say hello click Add so says can't get if I'll slash can photos I should get so I'm somewhere I have messed this up you know something I just noticed - we need to what we're gonna release our pool here and I didn't really talk about pools very much but essentially what a pool does is for when you connected to a database it gives you a lot of different ways to connect to the database so you don't have to every time you connect to the database turn the database on to an database off and open up these different connections you can just have one connection on all the time and you can just stream it out to get the information that you're looking for so but now back to this info / info I'm trying to see I see the information here and it says info / get this is an info / add and when it clicks add it should take me to here so maybe I'll console dot log you'll see some of my debugging process here console dot log and say made it you'll see if this actually gets in here okay so we will save that we'll go back here fresh just in case and then we'll click it's just Cee and then click right here so it isn't going through here so it looks like I think the problem is it seems like it goes here okay and then let's console dot log the response make sure that's working through okay so go back here put this click here go back over here and the response is working ok so it's something to do with the rest stop redirect it's when I when all these things worked and we're probably gonna see there's a lot of things when adds this database since we just been doing this over and over again so what happens is is sending back a response but it's giving it to info / get / get for some reason so maybe I'm just gonna say / yet I'm not exactly sure what's going on you got the hack of solution you probably see it not don't okay now says get so let's go say info here cuz that's what we're trying to get / info / get maybe I didn't have the slash in there maybe that's what it was look at this hey look at that we does that all these things at the database okay so now you see like I typed all these things in our our code to add things in database is working just fine it's just our redirect function was not working okay but now we have that working all right we can see all these things you added clearly our added function is working great so now that we have that we're gonna go on to the next function which will be the delete so for delete we're just gonna copy this because this is really similar to the ad and all the rest of these things honestly really similar to the ad and everywhere we see app we're just gonna say delete I'm just gonna copy this because copy and paste is your best friend as a coder I remember when I was younger and just starting out coding I thought like all cool coders typed everything out and they just like knew how to you know back to that whole like Oh everyone does code they memorize everything and they know all these things not necessarily like it's okay to copy and paste but just make sure you know what it is you're copying pasting or gonna you might end up in trouble with something you've pasted them that you don't understand how it works we now see our form here's working all we did was just changed all our ads to delete and now we need to add our delete route because if we click the lead here it'll say can't post the info / delete so we're gonna go and copy again as we love copy and paste and I'm gonna say leaked here and then we're going to keep this and obviously the only thing we're gonna change here is the query because this just has a single value so I want to type in the query you look back to my notes on this sequel function and what it is it's delete from test where name equals you may wonder - if you're not for me receive a why I'm capitalizing some things and why something in the lower case in sequel it's just a good idea that keywords are capitalized and everything else you kind of is not then that just helps you understand what is actually what sequel code is being used to do things and what sequel code is like a variable or something like that so let's do our temperate literal here is run delete from where rec dot body equals delete we're gonna save this and we're going to let's look and see what we're gonna delete so let's get rid of those E's I don't like those E's it's time for them to go so we could delete and it goes back here and we see that the EES have been deleted from our database and I guess another thing to notice to that whereas before I talked about our data not actually persisting because we weren't connected to the database now we're actually connect to the database so I could even open up a whole new window go to localhost he was 8,000 run and if I could get no matter what I do this information is stored on the database it's saved it's not going anywhere so that's just the difference between the data actually persisting and being saved versus just giving back a response saying like hey I did this for you but that's not actually being saved so now we're gonna go through the last part of application and next we're going to go to our form this form is just a little bit more complicated but not too much more we're just going to add two labels here two labels on two inputs and we're going to call this name update still a post method I'm going to change this to update and this is gonna be label for kind of old value and then the name is gonna be old value and delete is gonna be old value and I feel like hypocrite because I just told everybody about copy paste in Here I am typing everything out but you know what do you do you man just whatever floats your boat just go for it so we're gonna say new value and then actually I meant to make this old value as well not update live in that hypocrite life and typing it out still values and see a new value and idea new value and this is gonna be update okay so if we say this we go back to our page here click refresh we now have our old value new value update it's gonna say cannot post updates so we're gonna get to that so let's go back here let's copy and paste our delete function and then we're gonna paste it right down here and then we're gonna change this to update luckily this does not change a whole lot even though the front-end function did change a lot honestly at this point all we're doing is changing the query so it's pretty simple so we're gonna say find my reference for this one cuz it's the longest sequel function of all of them update test there's a database set name equal so this is their value of gonna be updating so our template literal here and it's not gonna write things that money side money and write body dot old value and then we're going to say so we need to put this inside of some course here and this will be where see when I think this set is actually closed to be capitalized I'm all sorts of hypocrisy going on here I'm gonna tell y'all one thing and do as I say not as I do and see name is equal to in quotes and then we'll say temperate literal again reck body dot new value okay then this should work I'm a little confused as to why this temperate literal here this back tick is blue so I feel like you know we're gonna save it and see what happens I feel like something about that just doesn't seem right it could just be maybe out maybe y'all not even see it maybe it's just me let's say let's look in here let's get this delete this this hello as we have here I'm gonna get rid of solos and won't try to replace someone by and see if that works updated did not work so this was not configured correctly so let me check my code to make sure this is all right so this looks this looks right but usually when this happens you oh you know what I okay I flip-flopped it so this is the new value here and this is the old value okay I didn't have done that so many times before I look I'm a single master I am NOT so we click update here now it'll say by now everything's updated so that's working so I believe that's everything so we'll go back through and we'll why don't we delete our by values from here and then let's just go through and show the entire working application and let's so first we're going to get there's nothing in here we're gonna add hello we're going to see add here now we have updated hello we're gonna change our hello to buy so update that and then now it says buy the song the item in here and then we're gonna delete that bye and now there's nothing in here so we have successfully completed our full stack application and everything's working the way it's supposed to be I hope you enjoyed it I hope it was a good experience if you have any suggestions for how to make this better for you or to make it more involved or there's anything that you can think of drop a comment let me know like I said again this is for me to give back to the community because I received a lot from the community I've learned a lot from the community and definitely not be where I am today without all the great youtubers to share their information with me so I'm hoping that this would be of benefit for you and that you'll get a lot out of it and I appreciate any feedback and if you liked the video I'll feel free to drop a like you may be the first person to have like on this video this is my very first video or if you don't like it feel free to drop a dislike you can be the first person drop a dislike any feedback is good feedback always happy to try to improving it better and I really appreciate your time and let me know if I miss anything in the description and I hope you have a great day and hope to see you again next time

Channel: Tranquil Code

Views: 5,331

Rating: 4.8000002 out of 5

Keywords:

Id: HYvBXlYykO0

Length: 50min 19sec (3019 seconds)

Published: Wed May 20 2020