Golang CRUD app with Go Fiber, Docker, and Postgres | Tutorial

welcome to div Rhino a channel dedicated to project-based learning I'm glad you're here in this tutorial we will learn how to add crud actions to an existing go Fiber app that we previously built with Docker and postgres to follow along you will need to have Docker installed and running you will also need to have the source code from the full stack go Fiber app we built in the previous video if you did not happen to watch that tutorial you can consider watching that first alternatively you can just use the finished code from that tutorial as your starting point you can find links to the GitHub repository in the description for this video let's kick things off by setting up our project we've gone ahead and downloaded the source code from the previous tutorial and now we can rename the folder then we can open the project inside vs code if you don't have vs code you can use your favorite text editor instead before we start writing code let's set up our DOT EnV file so postgres knows how to connect to our app we can quickly grab these values from the text version of a previous tutorial now we can open up the integrated terminal and run our app using the docker compose up command if the app has started successfully we should see the go fiber message printed out in the logs we can view our app in the browser at localhost Port 3000. let's go ahead and create some facts to work with if you already have some facts here you do not need to add more every time we add a new fact we are redirected to a success page we added this behavior in the previous tutorial this time around we'd like to redirect to our list of facts instead back inside our code editor let's head to the handlers package and make some changes to the create fact Handler if the body parser cannot pass the content from our request we will render the new fact view we're also interested to know what we get back when we create a new fact in the database if this fact creation step returns an error we will again render the new fact view but if the fact is successfully created in the database without any errors we will redirect to the index page to see our list of facts we can head into the browser and try out the new flow after we create a new fact we are now redirected to the fact list on the index page and since we're no longer using the confirmation view Handler we can remove it from our Handler's package now let's read a single fact by implementing the show action to begin we head into our browser to try and find a single fact to update we will manually type the route into the address bar when we hit enter we get an error because our router does not recognize this URL pattern yet so let's head back into our code editor and make some changes we can open up our routes file and add a new get action this new action calls the show fact Handler that does not exist yet let's head into our handlers package and create it now in the body of our Show fact Handler we will pull the fax ID from the params and use it to find our desired record within the postgres database then we will use the render method to render a template called show if we head back into our browser and refresh we get a different error telling us that we're trying to render a template that does not exist just yet we can quickly head back into our code Editor to create an empty show.html template file and now if we refresh our browser we should see our show template being rendered we can add a bit more markup to our show template to make it more functional all the content on the page will be surrounded by a div that has a container class and a flex class we check for the presence of a fact and if the fact is present we will render its question and answer values we will also add two action buttons which we will use to edit and delete the current fact all the classes we've used here have been declared in a pre-prepared style sheet if we refresh our browser now we will see the contents of our single fact being rendered in our show template however our styles are not coming through we can fix this by adding a slash in front of our relative paths to our static assets this will ensure that they are correctly pointing to our public folder now if we refresh our browser our CSS should be applied to our show template well what happens when we request a fact that does not exist we can find out by manually typing the ID of 99 into our URL we do not have 99 facts so we're seeing the default show template render without any content this behavior is confusing so let's head back to our Show fact Handler to make improvements we want to Cache the result of the database transaction and if it contains an error we will return the not found Handler this Handler does not exist yet so let's create it now if we are unable to find a resource we will send back the 404.html file now we can head into our main.go file and configure our app to use this newly created not found Handler if we try to test this out in the browser now we are met with a blank page this happens because we haven't created our 404.html file yet let's head to our public folder and create it now we won't be creating the content from scratch instead we will head into the project repo and copy a ready-made 404.html page the styles for this page are all in line we also avoid using any partials layouts or templates having all this content self-contained will ensure we're not making any additional requests that could result in further errors now if we refresh our browser we can see our brand new 404 page now let's see how we can implement the update action in our routes file we can add a new get route that will take us to a page where we can edit a single fact while we're here we can also add a new patch action which will save our edited fact to the database we're calling two new handlers that don't exist yet so let's create them now in the handlist package we can begin with the edit fact Handler function in the body of our edit fact Handler we will pull the fax ID from the params and use it to find our desired record within the postgres database we will store the result of the database transaction in a variable if the result contains an error we will return the not found Handler otherwise we will render the fact data within the edit template this edit template does not exist yet but we will create it soon while we're here in our handles package let's go ahead and add the update fact Handler to we will pull the fact ID from the param so we know which fact we're updating we will use the body parser to format the fact data as Json if we run into an error while passing the body data we will just send back the error if we manage to pass the body data without any errors we will find the fact in the database and attempt to update it again we want to store the result of this database transaction if the result contains an arrow we will redirect the user to the edit page otherwise we will render the updated fact in the show template now let's create our edit.html file we will paste in some mockup for the form we've given our form an ID and a data attribute to store its fact ID we have an input field for the question value and another input field for the answer value we've also added a submit input now that we have an edit template we can wire up the edit button so that it redirects us from the show page to the edit form if we go and check out our edit form in the browser now we can see that it's rendering correctly however our form fields are empty it would be nice if we could display our existing question and answer values so the user knows what they are editing we can do that in our edit template by adding a value attribute to our question input field as well as our answer input field with those changes we can refresh our browser now our existing values are showing up correctly while we have an edit form it doesn't actually work right now we can fix that with some JavaScript but before we go and add any new code we need to move some things around in our last tutorial we were only using JavaScript on our listings page so we only imported our scripts on that one page now we want to make our JavaScript accessible throughout our app so we'll have to move our script tags into our main layout while we're here in the main layout let's take the opportunity to add a little hack to bust the browser's cache let's give our CSS link tag an ID so we can Target it with JavaScript then let's also give our script tag an ID we will get the current date time value and then we will find the link and script Tags by using their IDs then we will append the timestamp to the link tags href value and also append the timestamp to the script tag source value with that out of the way we can head back into the browser to get a better idea of how our edit form is currently behaving when we change the answer value and try to submit it the form reverts to the old values and our new values do not take effect by default HTML forms only know how to handle HTTP get and post methods we will use javascript's fetch API to give us the ability to make a patch request we will find the edit form element by using the ID we gave it earlier we will also get the current facts ID from the data attribute then we will add an event listener to the edit form element we are listening for the submit event next we will have to prevent the form's default Behavior then we will extract the updated fact content from the form data we will use the fetch API to make a patch request passing along the form data that we format as Json finally we will redirect the user to the show page where they can see the updated fact if we try this out in our browser now we are able to successfully update our fact we have come to the final crud action delete heading into our routes file we will add a new delete route it calls the delete fact method that does not exist yet so let's create it now in our handlers package we can add a new delete fact Handler function we will pull the fax ID from the param so we know which factor we want to delete then we will find the fact in the database and attempt to delete it we will store the result of the database transaction in a variable if the result contains an error we will render the not found Handler otherwise we will redirect to our fact listings page now we can go and wire up our delete buttons so we can use it in the browser we will give it an ID so we can Target it within our JavaScript we will also use a data attribute to store the current fact ID let's head into our app.js file and add the JavaScript for this button now we will paste in a snippet we prepared then we will find find the delete button element by using its ID we will also get the current fact ID from the data attribute then we will add an event listener on the delete button element we will be listening for the click event when a user clicks the delete button we will prompt them to confirm their decision if they cancel the dialog we do nothing but if they choose to proceed we will use the fetch API to send a delete request then we will redirect them to the index page where all our facts are listed now we can head into the browser and add a new fact just so we can delete it how many time zones does Canada have Canada has six time zones let's add another fact how many time zones does Canada have hang on we've already done that one now we have two of the same fact it's a good thing we have a working delete button now yes we're sure we want to delete this fact let's make some final improvements to the ux of our crud app when we want to select a single fact we have to manually type its ID into the URL sometimes we misremember the ID and end up reaching the 404 page other times we are lucky and manage to get the fact we desire this current experience is less than ideal so let's improve it we can head back into our text editor and open the index.html template we will wrap the current fact markup in an anchor tag that links to the show page of the selected fact then we will remove the answer content and replace the toggle button with an arrow icon partial if we try to view our listings page in the browser now we get an error telling us that the icon does not exist we haven't created it yet so let's do that now in our views directory we can create a folder for our icons here we will create a new icon partial and paste in some SVG code now if we refresh our browser we should be able to see our updated markup we can finally view each individual fact without having to remember any IDs and there you have it in this tutorial we learned how to implement all the crud actions in a go Fiber app we also use the fetch API to make a patch and delete request a text version of this tutorial can be found on divrino.com and a repo can be found on my GitHub account I'll leave both links in the description for this video If you enjoyed this tutorial please let me know in a comment or like the video and subscribe to my channel thank you for watching and keep learning

Channel: Div Rhino

Views: 4,635

Keywords: rest api, api, from scratch, rest, postgres, container, compose, web development, go fiber, web framework, framework, tutorial, guide, article, divrhino, div rhino, best, best tutorial, fullstack, full-stack, fullstack go fiber, docker

Id: 6dZiD5cC69Q

Length: 15min 30sec (930 seconds)

Published: Wed Feb 15 2023