Auto Fill HTML Form With Data Using ISBNdb API

We have a small library of slightly less than 1,000 books at this time but new books are added occasionaly. At the moment, all the details are held on an OpenOffice database but the data is a mess so we've refined the data and created a MySQL database and an online HTML form to enter relevant details. To make sure the data is always entered the same way, we want to use the API from isbndb.com to fill in the form.

The record fields are for ISBN, Book Title, Author(s), Publisher and Date of Publication.

We have search buttons for the ISBN and Book Title inputs to use either to retrieve the data from ISBNdb.

How do we attach the API to the search buttons that will retireve the relevant data and put it in the correct input fields of the form but still be able to hand fill if necessary?
LVL 1
Martin CotterillDabblerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
There are a few moving parts to this, but the basic idea is that your Search button would submit your terms to your PHP server-side script. That script would then make a CURL request to one of the API endpoints using your search terms and your API Key (you'll need to register to get that). The CURL request would then return the results in JSON format.

You would then parse the results to extract the information you needed, and insert them into your database.

From their API docs, a CURL request for an ISBN looks like this:

$url = 'https://api.isbndb.com/book/9780134093413';  
$restKey = 'YOUR_API_KEY';  
 
$headers = array(
    "Content-Type: application/json",  
    "X-API-Key: " . $restKey  
);  
 
$rest = curl_init();  
curl_setopt($rest, CURLOPT_URL, $url);  
curl_setopt($rest, CURLOPT_HTTPHEADER, $headers);  
curl_setopt($rest, CURLOPT_RETURNTRANSFER, true);  

$response = curl_exec($rest);
$info = json_decode($response);

Open in new window

$Info would then be an array containing the book info for that given ISBN, and you can use that data to insert into your DB:

$info['isbn']
$info['title']
$info['title_long']
$info['publisher']
$info['date_published']
$info['authors'] -- this is likely to be an array that would need to be looped through.

Here's the link to their API docs: https://isbndb.com/apidocs

You can use mysqli or PDO to insert your records into your DB.

Come back if you have further question
Martin CotterillDabblerAuthor Commented:
Hi there

Thanks for the reply.

I saw this in the documation but couldn't understand how it would work in our situation. Is the code above php?

To get it to work the way we have at the moment, would we split the current HTML form in to two separate forms? The first part would have the search for, say, the ISBN number and the second part would have the <input value="isbn"...> and so on?

We know how to 'manually' add records to the database using an HTML form but not how to populate it using the data from the API. How would we do that?
Chris StanyonWebDevCommented:
Hey Martin,

Depending on your needs, there are several ways to do this. For example, you could have a single Search form with one text field, and maybe a couple of radio buttons to choose whether the search query is for ISBN or Book Title. The submit button could then send that info to your server-side script (yes - it's in PHP) which would do the request to the API and insert the data directly into the database.

Alternatively, if you want to give the users a little more control, you could do it in couple of steps. Have the Seearch form I've just mentioned that makes the same request to the API, but instead of automatically inserting into the database, it would return the results back to your HTML page. You could lay these results out however you liked, fo example in a table, and allow the users to select which ones needed inserting into the database. You would then push that data back to the server to be inserted in the database. A few more moving parts if you go this route, but probably a better experience for your users. You would effectively need to write your HTML page, the server-side scripts, and probably tie them both together with some AJAX calls written in Javascript (jQuery).

Once you know what you want, it's fairly straight forward to code.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.