1. Code
  2. Web Development

Get Started Building Your Blog With Parse.js: User Login

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

In the last session, you learned how to add data on and render it on your website. You got familiar with the concept of objects, collections, and views, and created your first class. From this session and moving forward, you will be creating the admin panel of the blog system. 

And it all starts with creating a User class and enabling login.

1. User Class

Step 1: Add a User Class made it extremely easy to add a new User class. Just click "Add Class" and choose "User" to create it.

Add a User class

Add a new row for yourself:

Add a new user

Step 2: Add Class-Level Access Controls

Now that you have a user, we can make the application more secure by setting some class-level access permissions

Go to your table for blog posts and click on "Security":

Blog security

Change the "Add Fields" permission from public to only yourself:

Set permission

This will prevent others from adding new fields to the table.

Similarly, go to the User table and limit the "Add Fields" permission to yourself too. 

You can set the rest of the class-level permissions according to your needs, but we will leave it for now.

2. Prepare an Admin Page

Step 1: Clean Up the Navigation

First things first, let's clean up the navigation bar of the HTML template a little bit to make room for the new admin page. Change the <nav> element to have only two links: Home and Admin:

Step 2: Prepare admin.html and Its CSS

Then, duplicate index.html and rename it admin.html, and duplicate blog.js and rename it admin.js. (For those who are familiar with the concept of a router and hate duplicated code, please bear with me for a while. I promise you will eventually learn how to use a router and clean stuff up!)

In admin.html, apply the .active class to the correct tab:

And link to admin.js instead of blog.js:

Make sure everything's still working well, and we can now move on to quickly throw together some HTML for a login page.

Same old trick, go to, and copy the HTML of .form-signin into .main-container.

Get the style in signin.css, and copy it into our blog.css, except for the style of body:

Step 3: Clean Up admin.js

Finally, get rid of everything in admin.js below Parse.initialize():

Now refresh the page:

Login page

Looking good! 

Step 4: Tweaking the Login Form

Some final tweaks to the page: we will be using username to log in, so change the email field to a text field, and add the name attribute to both input fields:

Change the CSS selector from email to text accordingly:

And get rid of the "Remember me" checkbox, because we are not planning to get into that in this tutorial.

3. Enable Login

Now we are finally ready to enable login. Let's write a bare-bones JavaScript function to log users in when they click on Submit in admin.js:

Let's give it a try...

Login success

As simple as that: you are now logged in!

4. Login View and Welcome View

After you've logged in, you certainly don't want to just see an alert message and stay on the login page. We need to make a welcome screen for the logged-in users.

To do that gracefully, we will make both a login and welcome page in Views and serve them with Parse.js.

Step 1:  Make Templates

Just as we did with the blog templates, let's take out everything in .main-container and make templates for the login page and the welcome page:

We can keep the welcome view very simple for now. It will just take the user object and display the username.

Step 2: Define Views

Let's define those views in admin.js. Notice that because LoginView doesn't need to render any object, the render function just puts the template HTML to the DOM.

Step 3: Add Login Event to the View

Remember the simple Login function we have? Now you can make that an event under LoginView:

Notice that we changed $(this).serializeArray() to $( That's because in this context, this will point to LoginView.

Step 4: Render Login View on the Page

Before we move on to render the welcome view, let's first render a login view on the actual page and see if it works:

Run it again, and it works just like before.

Step 5: Render Welcome View in the Success Callback

Now, let's change the success callback function of login() to render a welcome view using the returned user object.

Test again:

Welcome screen

And yay, it surely works!


In this session, you've created your second Class: the User Class. You've also created two important views: LoginView and WelcomeView. You also enabled user login on your website, and now you can send a personal welcome message to your users.

This is just the starting point of building a blog admin panel. Stay tuned, and in the next tutorial we will create a new view and enable the "Add a new blog" function.

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