Simple movie search using PHP, jQuery and themoviedb.org API

I was browsing the web the other day and found free and open movie database http://themoviedb.org. After few moments I saw that they have an API which allows developers to use this database in their applications.

And there was the idea for this tutorial. API is very powerful and there is plenty of goodies that you can get like People search, Movie search, various info on movies like budget, links to trailers etc.

But this tutorial will keep things simple. To give you a feeling of what we are going to build, check the demo below:

What will we need to achieve this. Obviously, you need to obtain the API key from themoviedb.org. All info about this is available here. Then, we are going to download a class developed by Glamoruos and you can download it from GIT Hub. This is PHP Class for using TMDb (themoviedb.org) API.

So lets get started. First, we are going to build a form for entering a movie title to search for:

[code lang=”html”]
<form method="post" action="">
<h2>Type in the title of the movie</h2>
<input type="text" name="search" id="search_box" class=’search_box’ />
<input type="submit" value="Search" class="search_button" /><br />
</form>

<div id="searchresults">Search results for <span class="word"></span></div>
<div id="results" class="update">
</div>
[/code]

As you can see, I already put an empty div with id of results which will hold our search result data. After that, I will add some jQuery magic into action:

[code lang=”javascript”]
$(function() {

$(".search_button").click(function() {
// getting the value that user typed
var searchString = $("#search_box").val();
// forming the queryString
var data = ‘title=’+ searchString;

// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "ajax_calls.php",
data: data,
beforeSend: function(html) { // this happen before actual call
$("#results").html(”);
$("#searchresults").show();
$(".word").html(searchString);
},
success: function(html){ // this happen after we get result
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
[/code]

What this code basically does is clearing the result div, calling ajax_calls.php via AJAX and sending a title parameter through POST method. After successfully retrieving the data from ajax_calls.php, jQuery is appending the result to our div.

So this is our ajax_calls.php file:

[code lang=”php”]
// include the tmdb class
include(‘tmdb.php’);

//if you prefer using ‘xml’
$tmdb_xml = new TMDb(‘YOUR_API_KEY_HERE’, TMDb::XML);

//Title to search for
$title = $_POST[‘title’];

//Search Movie with default return format
$xml_movies_result = $tmdb_xml->searchMovie($title);

$xml = simplexml_load_string($xml_movies_result);

echo ‘<table>’;
echo ‘<tr>’;
echo ‘<th>Cover</th>’;
echo ‘<th>Info</th>’;
echo ‘</tr>’;
foreach ($xml->movies->movie as $movie) {
$moviename = $movie->name;
$imdbid = $movie->imdb_id;
$posterimg = $movie->images->image[3][‘url’];

echo ‘<tr>’;
if (!empty($posterimg)) {
echo ‘<td><a target="_blank" href="’.$movie->url.’"></a></td>’;
} else {
echo ‘<td>No image</td>’;
}
echo ‘<td><a target="_blank" href="’.$movie->url.’"><strong>’.$moviename.'</strong></a> (‘.substr($movie->released, 0, 4).’)<br /><br />’;
echo $movie->overview;
echo ‘</td>’;
echo ‘</tr>’;
}
echo ‘</table>’;
[/code]

This code is pretty simple. First, we include and instantiate the tmdb class, then call the searchMovie method to retrieve the movies. After that we go through each result and form a table row with cover art and some movie info.

And that’s it. I will make another tutorial on this subject soon and will be using raw API calls to build a whole but simple Movie and Person search application which will cache the results.