Web Programming TutorialsMovie Select Project

Movie Select Project

Today we are going to practically use Ajax with JSON in this Movie Select Project. In this project we are going to create a drop-down list box containing movie titles. It contains such a mechanism that when we select any of the movie title from the drop down list, its details viz year, genre and director will be displayed asynchronously i.e. without refreshing the page. The information will be fetched from the movies.json file created in few previous tutorials.
As this uses Ajax, we again need server to run the project. We will use xampp server. We have learned to install xampp server and start the Apache from the xampp control panel in the last tutorial.

So let’s start the process step by step.

  1. Create a folder on desktop and name it as “Ajax”.
  2. Copy and paste the file “movies.json” previously created in this “Ajax” folder.
  3. Now open a new notepad++ document and save it as “index.html” in the “Ajax” folder created on desktop.
  4. Write the following html code in this “index.html” file./li>
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Movies</title>
    </head>
    <body onload=”getMovieTitles()”>
    <div id="container">
    <h1>My Favourite Movies</h1>
    <div id="movie_title"></div>
    <br/>
    <div id="movie_info"></div>
    </div>
    </body>
    </html>
    • Here, in the above html code we have defined a main div tag with id container to hold the rest of the div blocks.
    • A function getMovieTitles() is called on the onload event of the body tag.
    • Next we have placed a title “My Favourite Movies” in the h1 heading tags.
    • Then another div block with id “movie_title” is defined that will hold the drop-down list containing movie titles fetched from the file movies.json.
    • Then again a third div block with id “movie_info” is defined that will hold the detailed information about a selected movie title in the drop-down list.
  5. Now after writing the html code let’s run the page.
    • For this we need to paste our folder “Ajax” in the htdocs folder which is inside the xampp folder placed in C drive.
    • Now after copying the “Ajax” folder to htdocs folder, open the xampp control panel and start the Apache module. Otherwise page will not run.
    • Now open the browser and type localhost/Ajax in the address bar. Ajax is the name of our folder from where the page will run.
    • The output is shown below:

    initial_html_output
    fig 1

  6. Let’s do some styling to the page. Write the following code in head section above
    <title>--</title>

    tag.

  7. <head>
    <style>
    	h1
    	{
    		text-align:center;
    	}
    </style>
    <title>My Movies</title>
    </head>
    
    • Here, we have simply aligned the heading My Favourite Movies at the center of the page.
    • The output is shown below:
    • center_aligned_heading
      fig 2

  8. Now let us move to the processing part. Write the following getMovieTitles() function that will be called at the onload event of the body element in the head section in the
    <script>--</script>

    tags.

  9. <head>
    <style>
       h1
       {
    	text-align:center;
       }
    </style>
    <title>My Movies</title>
    <script>
    function getMovieTitles()
    {
       var xmlhttp;
       if(window.XMLHttpRequest)
       {
    	xmlhttp=new XMLHttpRequest();
       }
       else
       {
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    
       xmlhttp.onreadystatechange=function()
       {
          if(xmlhttp.readyState==4 && xmlhttp.status==200)
          {
    	jsondata=JSON.parse(xmlhttp.responseText);
    	var movies=jsondata.movies;
    	var output='<form>';
    	output+='<select id="movie_select" onchange="movieSelect()">';
    	
    	for(var i=0;i<movies.length;i++)
    	{
    	    output+='<option value="'+i+'">'+movies[i].title+'</option>';
    	}
    	output+='</select>';
    	output+='</form>';
    	document.getElementById('movie_title').innerHTML=output;
          }
       }
       xmlhttp.open("GET","movies.json",true);
       xmlhttp.send();
    }
    </script>
    </head>
    
    • Here, we have the code for getMovieTitles() function in the script tag.
    • We have used the AJAX technology to get the desired output.
    • It uses XMLHttpRequest object to send and receive the request asynchronously.
    • Hence we have declared a variable xmlhttp and created the object of XMLHttpRequest using the following code:
    • if(window.XMLHttpRequest)
      {
      	xmlhttp=new XMLHttpRequest();
      }
      else
      {
      	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      
    • Here, all browsers does not support XMLHttpRequest i.e. browsers with version IE6 and below does not support XMLHttpRequest but the browsers other than these support XMLHttpRequest.
    • So, for browsers supporting XMLHttpRequest, XMLHttpRequest object is created and for those that do not support ActiveXObject is created.
    • Next on the onreadystatechange event the readyState and status properties of the XMLHttpRequest object are checked in the if statement. If the condition is satisfied, we get the response and it is designed to be shown in a dropdown list in a form as follows:
    • xmlhttp.onreadystatechange=function()
      {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
      	jsondata=JSON.parse(xmlhttp.responseText);
      	var movies=jsondata.movies;
      	var output='<form>';
      	output+='<select id="movie_select" onchange="movieSelect()">';
      	
      	for(var i=0;i<movies.length;i++)
      	{
      	 output+='<option value="'+i+'">'+movies[i].title+'</option>';
      	}
      	output+='</select>';
      	output+='</form>';
      	document.getElementById('movie_title').innerHTML=output;
        }
      }
      
    • Here, inside if block we get the response from xmlhttp.responseText statement. We don’t have direct method for getting JSON response. So we convert the received response to JSON using JSON.parse() method as shown below:
    • jsondata=JSON.parse(xmlhttp.responseText);
    • The response is stored in jsondata variable.
    • Next the movies array in the movies.json file is stored in the variable movies as shown below:
    • var movies=jsondata.movies;
    • Next output is stored in the output variable.
    • It contains a form. Inside the form we have a select tag that creates a dropdownlist. This select tag has an id movie_select and it calls movieSelect() function on onchange event.
    • The titles of the movies are put in the option tags that form the values of the dropdownlist.
    • All this output is displayed in the div block having id movie_title.
    • Next the details for transfer of response is given in open method as shown below:
    • xmlhttp.open("GET","movies.json",true);
    • It contains the transfer with GET method, response will be fetched from movies.json file and true indicate the asynchronous transfer.
    • Then response will be sent using the statement
      xmlhttp.send();
    • Reload the page and see the output as shown below:
    • dropdownlist_output
      fig 3

  10. We now have all the movie titles in the dropdown list. Now we need to write the logic to select or get and store the selected movie title to get the further information. Hence, write the following function movieSelect() below getMovieTitles() function.
  11. function movieSelect()
    {
       var selectBox=document.getElementById('movie_select');
       var movieIndex=selectBox.options[selectBox.selectedIndex].value;
       getMovieInfo(movieIndex);
    }
    
    • Here, the function movieSelect() is called at the onchange event of the select tag of dropdownlist.
    • Purpose forthis function is just to get the index of the selected dropdownlist item.
    • So first of all we have stored the element having id movie_select i.e. the dropdownlist in the selectBox variable.
    • Next we retrieved the index of the selected movie title using the statement
    • var movieIndex=selectBox.options[selectBox.selectedIndex].value;
    • The retrieved index is stored in the variable movieIndex.
    • After retrieving the selected index we want to fetch its details which is done in getMovieInfo() function, hence this retrieved movieIndex is passed to getMovieInfo() function and the function is called using the following statement:
    • getMovieInfo(movieIndex);
  12. Now as the function getMovieInfo() is called from the movieSelect() function, let us write code for it below movieSelect() function. The code for getMovieInfo() function is given below:
  13. function getMovieInfo(i)
    {
       var xmlhttp;
       if(window.XMLHttpRequest)
       {
    	xmlhttp=new XMLHttpRequest();
       }
       else
       {
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
    	
       xmlhttp.onreadystatechange=function()
       {
    	if(xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
       	   jsondata=JSON.parse(xmlhttp.responseText);
    	   var movies=jsondata.movies;
    		
    	   var output='';
    	   output+='<li>Year : '+movies[i].year+'</li>';
    	   output+='<li>Genre : '+movies[i].genre+'</li>';
    	   output+='<li>Director : '+movies[i].director+'</li>';
    		
    	   document.getElementById('movie_info').innerHTML=output;
    	}
       }
       xmlhttp.open("GET","movies.json",true);
       xmlhttp.send();
    }
    • The above function getMovieInfo() is written to get the detailed information of the selected movie title.
    • The movieIndex variable value in the movieSelect() function is received in the getMovieInfo() function in variable i.
    • Here also we have AJAX for asynchronous transfer, so all the things are same as explained for getMovieTitles() function.
    • The only difference is in the displaying code inside if statement that checks the satisfaction of readyState and status properties of XMLHttpRequest object.
    • The code for it is shown below:
    • if(xmlhttp.readyState==4 && xmlhttp.status==200)
      {
         jsondata=JSON.parse(xmlhttp.responseText);
         var movies=jsondata.movies;
      			
         var output='';
         output+='<li>Year : '+movies[i].year+'</li>';
         output+='<li>Genre : '+movies[i].genre+'</li>';
         output+='<li>Director : '+movies[i].director+'</li>';
         document.getElementById('movie_info').innerHTML=output;
      }
    • Here, the response is received, converted to javascript object i.e. and stored in the variable jsondata.
    • Then we retrieved the movies array from the jsondata object and stored it in the movies variable.
    • The output to be displayed is stored in the output variable.
    • We have retrieved the year, genre and director details of the selected movie using the following code:
    • var output='';
      output+='<li>Year : '+movies[i].year+'</li>';
      output+='<li>Genre : '+movies[i].genre+'</li>';
      output+='<li>Director : '+movies[i].director+'</li>';
      
    • Then this output is displayed in the div block having id movie_info.
    • Reload the page and see the output as shown below:
    • details_displayed_of_selected_movie
      fig 4

    • We finished displaying the output. You can see in the above output that the year, genre and director of the selected movie Superbad are displayed.
  14. Now let us make it more attractive by applying some styles. Write the code for it in the head section in
    <style>--</style>

    tags as shown below:

  15. <style>
    	h1
    	{
    		text-align:center;
    	}
    	li
    	{
    		list-style:none;
    		padding-left:5px;
    	}
    	#container
    	{
    		width:600px;
    		margin:80px auto;
    		overflow:hidden;
    		border:1px #666 dashed;
    		min-height:200px;
    		padding:15px;
    	}
    </style>
    
    • In the above code, we have seen the styling for h1 beforehand, so let’s start with styling of li tag.
    • In the styling of li tag we have removed the bullets using list-style:none; and have given a padding of 5 pixels to the left side using padding-left:5px;.
    • Next we have styled the id container. # sign is used before it because it is an id.
    • The container div is given a width of 600 pixels, a top and bottom margin of 80 pixels and left and right margin as auto so that output should be displayed at the centre.
    • A 1 pixel dashed border with gray color is drawn with minimum height 200 pixels and padding of 15 pixels from all sides.
    • After styling reload the page and see the output as shown below:
    • final_output
      fig 5

We have used Ajax and JSON and practically learned to retrieve data asynchronously.
Thus we finished our Movie Select Project.

Previous articleVariables and Arrays in PHP
Next articlePHP Loops

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -