Using JavaScript to Interact With PHP Services

Why I Started Using Web Services

I have been using web services instead of direct calls to the database within pages or applications for many reasons.
  1. Portability. In designing applications for my company, a lot of times they want an application for Android, IOS, Microsoft, the Web, Etc. To create a native application for each of these environments requires the use of different coding languages. Instead of having to re-write the entire application for each device, I can code the entire data portion of the website as a service and just make calls to the data from the applications.
  2. Re-Use. Instead of writing specific data queries directly into pages of code, the use of web services abstracts this logic so that calls can be made to the service in many different situations and from different applications. This enables the code to be used over and over without needing to be re-written.
  3. Abstraction. It is always easier to understand code when it is presented in a neat and organized way. By abstracting the data calls, you can more easily troubleshoot and understand the mechanisms of the application.

Continuing from the Card Layout Tutorial

If you followed my previous tutorial with creating a basic card layout with Bootstrap, you can use this tutorial to actually populate the cards with data from your database. This tutorial will show you how to create a web service to pull user information, and JavaScript (ajax/jQuery) to pull back the data and render it as cards in the layout.

The PHP Service

To create the PHP service, I made a simple PHP page that functions to pull back user records. In this case, I assume a GET variable is passed in with the maximum number of user records to return. Doing this may be useful in a type of application such as Pinterest where you have many records and it is unreasonable to pull them all at once. You can call the service pulling back a limited number of records at a time and load more as the user scrolls through the content.
I wrote a simple SQL query to pull back first name, last name, and avatar image of users (limited by the get variable).
I also created a result variable to store object data as an array, a return message, and a flag as to whether the query succeeded. After the result array is populated through the query, I use a built-in php function (json_encode) and echo the result. Be sure to set the content type of the page to application/json.

The Full PHP Service (getUserData.php):

The HTML

The HTML page is very basic. One thing to keep in mind is to make sure you specify an id on the row that you will be appending your data to. This Id will be used in the JavaScript. Also, be sure to include your JavaScript page (load_index.js), JQuery, and Bootstrap in the header section of your page.

The Full PHP Service (load_index.js):

The JavaScript

For this example, I am calling the JavaScript on page load. I use an asynchronous ajax request to pull the data from the service. In the data section of the ajax request, I set the GET variable for the limit of results. If you were sending other data to the service, you would include it in this section. On success, a function is called to actually display the data (displayUsers). This function generates the HTML for one card box and loops through all returned records to provide user information.
The Full JavaScript (load_index.js):


View the working example:

Comments

Post a Comment