Welcome back guys, last week we discussed what the project was about what it is going to do and we got our initial project folder setup using express-generator. This week we are going to get into displaying our statuses on our profile page, being able to add new statuses, edit our current statuses and delete any of our statuses from our profile page.
Right let’s jump straight into it:
As you can see we have added quite a bit to our existing profile.jade. Let me explain the code in this file:
So we setup a form that contains a basic Textarea and a “Post Status” button. We also tell it what type of HTTP method we want to invoke which is “POST”.
The next part might look a bit confusing and is very Jade specific but let me explain it. Basically, says for each status in statutes create an edit button and a delete button. So when we get all our statuses from our database this code will allow us to display each status on its own line with its own buttons without knowing how many statuses we have cool no?
We are setting the statuses in jade with this:
So now we have our UI setup to create new statuses, edit and delete them lets check out our routes:
/newStatus as you can see from above we have a form setup to POST our new status data to node.js, So here is how we get the information into .js from our HTML:
So most of this code should look very familiar from one of the previous tutorials. Basically, we create a new Status object then we set the Status object properties of status and username. We then save the new status to the database and redirect to the profile page. So if you’re wondering req.body.status is pulled from our Textarea with the name=status. You can name your Textarea anything you want for example if your Textarea was called newstatus you would pull it into the js via req.body.newstatus.
So next route we are going to look at is /delete:
Again this code should look very familiar we are deleting the status by the id since all the statuses have a unique ID we don’t need to make sure it is the users status. So as I explained earlier we have a list of statuses each with an edit button and a delete button
We have a delete form setup that contains a delete button. When we click the delete button it pulls the statusid from the hidden form field and uses that ID to delete that status in the database.
So now we have the ability to create and delete statuses so what about editing? Editing is a bit more complicated and I wanted to be able to edit the status without having to reload the page every time. So after some looking around looks like Jquery was the best tool to do the job. So here is the Jquery code I have to edit the status:
So although this code looks complicated it’s very simple. Basically, we have an Edit button for each status as seen here:
In the js, we then say if anything with the class name of editable is clicked run this piece of code. The code will first get the parent element of the edit button which will be a li item containing the status we want to edit, we then get the ID of the status which as you can see above will be the actual database ID for the status. We then replace our li element with a form that contains a Textarea with the current status you want to edit. It also adds an Update status Button that when clicked will POST to our route /saveStatus and we do all this without having to reload the page pretty cool I think. Here is the result:
Here is our status with an edit and delete button. When we click “edit” the li element is converted into a Textarea with our current status already pre-populated so we can edit it like so:
Once we edit the status and change it to whatever we want. We can click the update button which will then update the status in our database and redirect us to our profile page showing now our edited status in the place of our old status. This is done with only one page reload that we did when we wanted to save our new status.
Have a good day,