JSON : API

 

When attempting to connect to a JSON API to pull down data and display on a PHP generated page, suprisingly I had a lot of trouble finding resources that explain the process.  Many of the articles explained how to connect to a JSON resource, but didn’t go into detail how to implement authentication tokens.

To help others who may be trying to create dynamic content from a JSON API URL, I have documented some of the things I’ve learned below.

The Project

My project brief was to dynamically display bible readings, pulling the readings from the ESV API (esv.org).  The API Is pretty simple, as in you send the bible book, chapter and verse (optional) to a URL, and it would return the result in a JSON result.  Results are available in text or pre-formatted HTML (with classes to allow CSS formatting).

The API documentation page has a neat form that allows you to choose the parameters, that generates a URL you can test in the browser.  Pasting a URL into a browser address bar works perfectly, but when calling the URL from a PHP it returned a “not authorised” result.

Setting up Authentication (CURL) to the API

The ESV API required the use of an authorisation token, unique to the project.  Applying for the token was as easy as filling in the online form.  Now I had the Authorisation token, the question was “Where do I put this in the code to authenticate before I make the API request?!”.  After some time Googling I discovered that authentication is set in the HTTP Header.

I’m not 100% sure how this works, but I imagine it stores the CURL initialisation variables in memory, then sends the authentication to the API along with the request for the content – I found this is sent to the API in a CURL_EXEC request.  I found some code (website source unknown) that provided a snippet of code that used CURL to set the connection options, then I fed the URL into the CURL execution, which returned data into a new variable.

Dealing with the data returned from the API

Once the result was stored in the $data field, it was just a matter of using ECHO to display the content on screen.

Dynamic requests

This project required that a string could be fed to the URL to dynamically return bible readings to the end user.  For this I used $_GET to grab a variable from the URL and feed it into the URL that was sent to the ESV API.

I also found the API didn’t like spaces in the URL, so I had to replace spaces with the %20 ASCII code

Here’s the code for that:

Changing the link text to an icon using CSS

Using the CSS after tag I was able to place a speaker icon (from FontAwesome) next to the “Listen” text.  To remove the text I just set the text font size to 0.

The final product!

With some CSS styling and some sliding animation we have made the UI on a mobile feel like you are sliding your finger to turn the page.

The bible reading app can be seen live in the Life Christian Church AU app, or through a browser at http://lifechristianchurch.org.au/readingplan_ESV.php?reading=Numbers%2010-11, but I’ve also provided the full code (minus authenitcation keys) for anyone else who would like to implement this solution on their church website.

 

 

About Gary Walker

I'm the face behind this website and I'm here to help with your IT, Website and custom software needs. I've been helping individuals, businesses and non-profit organisations get online since 2007, and kept up to date with the latest web design trends.

Divi WordPress Theme