Jump to content

Recommended Posts

When the user visits viewer.html, they should be prompted to enter a search term. Oncethey have entered the term and hit the submit button, an XHR request for getThumbs.phpshould occur that performs a cURL request of the Flickr API that returns 40 results forphotos that match the search term entered by the user as XML.-­‐ That XML response should be parsed using one of the following methods: OUTPUT 1 – XML to PHPo getThumbs.php should loop through the XML response and output a set of <img />elements that contain thumbnail URLs as the src attribute and the photo_id as the altattribute of each image ONLY for images that were taken on a Monday. OUTPUT 2 – XML from PHPo getThumbs.php should return an XML object to a2.js, and a2.js should loop throughthe XML response and dynamically generate a set of <img /> elements that containthumbnail URLs as the src attribute and the photo_id as the alt attribute of eachimage ONLY for images that were taken on a Monday. Main page (when you click submit loads the php file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIG4503 – Caitlin Havener Assignment 2</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/styles.css" /><script type="text/javascript" src="js/a2.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">window.onload = function (){  var submitClicked = document.getElementById("submit");  submitClicked.addEventListener('click', function(e)	{	 e.preventDefault();	 var xmlhttp;	 if (window.XMLHttpRequest)	   {// code for IE7+, Firefox, Chrome, Opera, Safari	   xmlhttp=new XMLHttpRequest();	   }	 else	   {// code for IE6, IE5	   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");	   }	 xmlhttp.onreadystatechange=function()	   {	   if (xmlhttp.readyState==4 && xmlhttp.status==200)	  {	  console.log("Ive loaded");	  document.getElementById("thumbs").innerHTML=xmlhttp.responseText;		 }	   }	 xmlhttp.open("GET","getThumbs.php",true);	 xmlhttp.send();		}, false);}	</script></head><body><div id="wrapper">	 <div id="header">		<img src="#" alt=""/>		<h1>A Case of the "Mondays"</h1>		</div>	  		<div id="content">		 <div id="search">			 <form name=myForm><input type="text" value="search" /></form>				<input type="submit" value="Submit" id="submit"/>			</div>			<div id="thumbs">			</div>			<div id="specific">			</div>		</div>	  		<div id="footer">		 <h1>Designed by Caitlin Havener with Flickr API, cURL, jQuery, XHTML</h1>		</div>	  	</div></body></html>

The php file that is loaded when submit is clicked:

<?php/*should contain a PHP script that performs a cURL request for datafrom Flickr using the flickr.photos.search REST API and should return an XMLresponse.*/print "hey";$ch = curl_init();$url = ' http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=686c634ab46cfad9ea78f85912d7bc0e&text=%24searchText&content_type=1&media=photos&per_page=40&format=rest&api_sig=6c762eab06cf258c37735f5bc90a03fb';curl_setopt($ch, CURLOPT_HEADER, 0);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);curl_setopt($ch, CURLOPT_URL, $url);$curl_response = curl_exec($ch);curl_close($ch);print "the response: " . $curl_response; /*$params = array('api_key' => '5aa2e3914789e3d69c436425697af6fb','method' => 'flickr.photosets.getPhotos',//'photoset_id' =>'extras' => 'original_format','format'=> 'php_serial');$encoded_params = array();foreach($params as $k => $v){$encoded_params[] = urlencode($k).'=' .urlencode($v);}*/?>

The professor's powerpoint had the above code (in php file) that is not commented out. But I saw a tutorial with the commented out code (incomplete). How do I use this darn flickr.photosets.getPhotos and retrieve its xml??

Link to post
Share on other sites

since the params are in an array, you need to loop through them to construct a query string (like the url example) to build up a URL that you can then use with cURL to make a request to the flickr api. If you put the URL you have now into a browser, you will get an API key invalid error. what you want to produce is a url that looks likes the one there, but uses the values in the commented our code.

Link to post
Share on other sites

but wait... there's more. according to the docs you need to use OAuth.... that's definitely not what one might call a picnichttp://www.flickr.com/services/api/auth.oauth.html

Link to post
Share on other sites

you had a mistake in your url. the format you were defining was rest. i changed it json and was able to get JSON. so this should get you to your next step... OAuth! Welcome to he big boys/girls club. :)

 <?php/*should contain a PHP script that performs a cURL request for datafrom Flickr using the flickr.photos.search REST API and should return an XMLresponse.*/$url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=686c634ab46cfad9ea78f85912d7bc0e&text=%24searchText&content_type=1&media=photos&per_page=40&format=json&api_sig=6c762eab06cf258c37735f5bc90a03fb'; $cURL = curl_init($url);curl_setopt( $cURL, CURLOPT_RETURNTRANSFER, true );$content = curl_exec( $cURL );curl_close ( $cURL ); echo $content; ?>

Edited by thescientist
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...