Blog

jQuery Mobile and Parse.com User Sign Up (PART 2 of 2)

feature-image-2

Download Project Files:

The project files wont work unless you put your own Application ID & JavaScript key in to js/main.js.

Project Files (Part 2)

Required Skills:

  • Basic HTML & CSS
  • Basic JavaScript
  • Basic jQuery

Introduction

Previously, in part 1 of this tutorial, we covered the basics of creating a Sign Up page with a simple jQuery Mobile user-interface (UI) that uses the Parse.com core service to save a users credentials to an application’s User table on the Parse.com servers. Part 2 in this tutorial builds upon our previous work by adding a Sign In page. Once the user has entered their credentials into the Sign In form the JavaScript checks the credentials against the users table and if they are correct the user is presented with a Home page where they will see dynamic content generated using information retrieved from the database.

The individual steps we need to take are:

  • Create the signin.html (using jQuery Mobile).
  • Hijack the Sign In button.
  • Verify user’s credentials.
  • Retrieve user data from the User table at Parse.com.
  • Navigate user to home page (populated with the users data).
  • Allow the user to sign out when they finished.

Lets begin!

User Interface:

The Sign In form is very similar to the Sign Up form we created in part 1 except there is one less input field due to the fact that the user no longer needs to provide an email address. Because of the similarities it makes sense to duplicate the signup.html file we created in part 1 and rename the duplicate to signin.html. Now open the signin.html and modify it to match the markup below. All modifications are commented with an explanation.

Thats all we need for the Sign In page and everything else from here on goes into the main.js file that we created in part 1 of this tutorial.

Submit the form:

Now we need to hijack the Sign In button’s click event, collect the values from the Sign In form and send them off to the Parse.com servers to validate the credentials of the user. This new JavaScript will go at the very bottom of main.js below our previous JavaScript and we will start by hooking into out Sign In page’s “pagecreate” event. Add the JavaScript below to the bottom of main.js and read the comments for a better understanding of whats happening:

Send the form data to the Parse.com servers:

Add the code below to our previous code where it says “// NEXT CODE GOES HERE”.

 

At this point we have collated the form data and sent it via AJAX to the Parse.com servers. The Parse.com servers have then checked your application’s User table for a match and sent a response of success or failure. We now have two callback functions that will execute depending on the response. You can customise the error callback function to direct the user however you like but for now we are only going to direct the user to the home page if the details they provide match a user in the database.

The code below programmatically navigates the user to the Home page. Add the code to the previous code where the comments say “// NEXT CODE GOES HERE”.

Test our progress:

We have made a lot of progress so now is a good time to test what we have done so far. Go ahead and test the form by enter a known user into the form fields and clicking the Sign In button. If all goes well then you should see an error on the screen like the one below saying “Error Loading Page”. This is absolutely fine it just means that the home.html file doesn’t exist yet so there is nothing to load.

error message

Create the Home Page:

The user has nowhere to go so its time we made that Home page. We need to create another .html file called home.html and the simplest way to do this is to duplicate one of the other .html files. Copy and paste another version of the signup.html file into the root folder and rename it home.html. Next we need to delete the main content from the home.html page and make a few minor modifications. Edit home.html so it looks like the HTML below (all modifications are commented with a description).

Home Page Content:

We now have a blank Home page ready for any content that your situation requires. There are two empty divs in the content container so that we can dynamically add a welcome message and the user’s score once the user has logged in. We have also included a Sign Out button to complete the secure app cycle.

Get Dynamic Content from Database:

We are almost there now! All we have to do is add a little more Javascript to the bottom of main.js. The home page takes a slightly different approach to the JavaScript than the previous pages for this app. We are still going to hook into the “pagecreate” event for the Home page but we also need to update the content every time the page is shown so we need to hook into a second event as well. This event is not specific to each page and is triggered every time any page is shown so we need to detect when this event is triggered for the Home page first. Add the code below to the very bottom of the main.js page, read the comments to get a better understanding.

Now that we have hooked into the “pagecontainershow” event and written some code to detect when this event triggers for the Home page we are almost ready to update the content for the user but first we need to make sure that the user is actually logged in. This is just in case someone tries to navigate directly to the home page bypassing the Sign Up and Sign In page. If this happens then we can present the user with a link to the Sign In page.

When any user successfully logs into your app their information is stored locally on their device until they log out. At any time we can check whether there is an active user logged into your app. The code below checks if the user is logged in and responds accordingly. Add the code to the previous code where the comments say “// NEXT CODE GOES HERE”.

Next we will start by adding the code for when the user is logged into the application. We can use the same object we retrieved from local storage to check if the user was logged in to get any other information about the user saved in the database. We will use this information to update the Home page display.  In the previous code, just below where the comment says “// LOGGED IN” add the code below:

Now we add the code for when the user is not logged into the application. All we want to do is gently nudge the user to the Sign In page. Add the following code to the previous code where the comments say “// NOT LOGGED IN”.

Lastly, we can add the functionality to the Sign Out button so that we can test that everything has gone okay. All we need to do is hook into the button’s click event and call one line of code:

The code for the Sign Out button goes as follows and you can see where the code is positioned by looking at the final code example that shows the whole Home page JavaScript:

We are finished. The final Home page section of main.js should look like this:

Test Our Handy Work: 

Go ahead and test the full secure app cycle. If you sign in, sign out and then try and navigate back to the home page you should see the link back to the Sign In page. The name of the user should be displayed in the welcome button and the number zero should appear in the score. If you head over to Parse.com you can manually edit the score and when the user signs in again they will see the new number as their score. The scope of this tutorial only covers the very basic element of creating a secure app with the Parse.com core data service. There are many improvements that could be made to this example but its a solid foundation upon which to build upon. In a future post I will demonstrate how to update the score from inside the app and when I do I will link it into this tutorial.

I hope this has been useful and thanks for playing along!