1. Code
  2. Web Development

Get Started Building Your Blog With Parse.js: Delete, Logout, and Single Blog View

This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Refactor
Get Started Building Your Blog With Parse.js: Comments
Final product image
What You'll Be Creating

In the last session, you refactored your entire blog system. Now that everything’s cleaned up, you are ready to speed up for some new adventures. In this session, we are going to do more around the router, and add three more functions to our blog system: delete, logout, and single blog view.

1. Delete

In part 6, we covered the edit function. Chances are, you would also want to delete one of your blog posts. There are two places you can put this function: add it in the BlogsAdminView, or send it to a URL and deal with it in the Router.

I will show you the Router way. It’s more commonly used, and it makes the code better structured.

Step 1: Add URL Pattern

As usual, let’s add a URL pattern first:

Step 2: Link to Delete

Then, update the link in the admin page:

Step 3: del Function

Now, let’s add a new del function to the Router to handle it. It’s pretty straightforward: find the blog post using the id we passed in from the URL, and destroy it.

Try to challenge yourself and write it without reading my code. You should be getting a really good grasp of Parse.js at this point.

Notice that you can use the .then() function here instead of passing an object as we did previously:

It’s an easy way to add callback functions in Parse.js, making your code cleaner and more readable. Go to to see full documentation on promises.

Let’s give it a test run, and double-check the database to see if it’s working.

Delete Alert

Congrats, it’s working!

Step 4: Redirect Back to the Admin Page

If you pay attention to the URL, you will see that after you click out of the alert box, the URL is still /del/ and the post you just deleted is still there. We want to send users back to the admin page after deletion, and the page should refresh and reflect the change they just made.

You can achieve all of that by doing a redirect:

Notice that because this time you call navigate from within the router, you can just store the router as self, and call self.navigate().

Step 5: Check Login

Finally, we need to make sure you are the only one who can delete your blog posts. Let’s check login for the function. This should be the same as the edit function.

2. Logout

Like delete, logout can also be handled by the router. And it also starts with adding the URL pattern:

The logout function itself is really easy in Parse.js. Just call Parse.User.logOut() and then redirect to the /login page:

And finally, let’s add a button to #admin-tpl:

Logout Button

As you can see, styling is really not the focus of this tutorial. Feel free to fix the padding and style it however you’d like.

3. Single Blog View

Now let’s move on to make some new functionalities.

Up to this point, we are showing the whole blog article on the home page. While some people do prefer this style, most blogging systems support the idea of having a snippet summary upfront, and if the visitors click into the articles, they then can see the content on a separate page, with possibly some commenting area around it.

I will walk you through creating this detailed single blog view in this session, and we will be focusing on building commenting in the next one.

Step 1: Add a Summary Column

First, let’s add a column for the summary in the Blog table:

Add Summary Column

Step 2: Include Summary in WriteBlogView

Now, let’s add it to the Blog.update() function. You can change the function to take a data object which contains the title, summary, and content, to avoid memorizing the order of the variables.

Add one more <textarea> for summary in #write-tpl:

And change the WriteBlogView.submit() function accordingly:

Now, since we’ve added a new variable in the template, we need to give it a default empty value in the WriteBlogView.render() function:

And if you are using the wysihtml5 plugin for the content, you will notice previously we are targeting all the <textarea> elements:

Let’s give the content textarea a class and target only that with the wysihtml5 plugin.

In #write-tpl:

In the WriteBlogView.render() function:

Now it’s working!

Summary In WriteBlogView

Step 3: Display Summary on the Home Page

Play with the new write blog page and add some blog posts with summary, and pull the summary instead of the content in #blogs-tpl:

Step 4: Add the SingleBlogView Page

Take a minute and think about how would you add a /blog/:id page to show the content for each blog post, and try to do it yourself. You should be able to do it all by yourself now!

But for the purpose of this tutorial, let me give you a quick walkthrough:

Add a new HTML template for this page:

Add a new BlogView class that takes in a blog object, and render it in #blog-tpl:

Add a new URL pattern in BlogRouter:

And in the function, get a blog by its id, render a blogView, and put it in $container:

Finally, update the link in #blogs-tpl to link to this page:

Give it a try:


Extra points if you did this by yourself.


In this session, you built a lot: a delete function, a logout function, and another new page type. If you’ve been following this tutorial series until now, I think you have a solid understanding of how database, model, view, template, and router work together. I hope you’re also starting to enjoy building a Parse.js project at this point. Leave me your feedback and let me know if it’s helpful.

With this single blog post page we built this time, we are going to add a comment section next time. Should be a fun one. Stay tuned!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.