This assigment explored using API’s from varying sources including Time Magazine, The New York Times & Billboard Magazine.
Part 1. Time to Process Form Input with PhP (TIME MAGAZINE)
Your goal is to write your own script mimicking the behavior of getcover.php. Given a
date string in mm/dd/yyyy format, it should:
a. Verify that the date is valid; if invalid, display an error message.
b. Make sure that the date is within the range of dates included in the archive.
c. Find the date of the current issue, which will always be the Monday preceding the
date specified.
d. Construct a URL to retrieve the cover image for that issue.
e. Output HTML to display the cover image.
Working URL: p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0.0001pt; font-size: 12pt; font-family: “Times New Roman”; }div.Section1 { page: Section1; } http://itp.nyu.edu/~ryane03/lab3/03-finaltimecover.php
Final Code:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Building a Table</title>
</head>
<?php
$scriptName = $_SERVER['PHP_SELF'];
$pageTitle = “TIME MAGAZINE COVERS”;
# Error Reporting in Browser
error_reporting(E_ALL ^ E_NOTICE);
ini_set(‘display_errors’, 1);
$getDate = $_POST["date"];
?>
<html>
<head>
<title><?=$pageTitle?></title>
<style type=”text/css”>
body {
font: 13px arial;
color: #000;
background-color: #fff;
padding: 10px;
margin: 0px;
}
</style>
</head>
<body>
<b><?=$pageTitle?></b>
<p>
Enter the date below.
<p>
<form action=”<?=$scriptName?>” method=”POST” enctype=”application/x-www-form-urlencoded”>
mm/dd/yyyy: <input type=text name=”date” value=”" size=10 maxlength=10>
<input type=”submit” name=”dateField” value=”Submit”>
</form>
<?php
if (!isset($_POST['dateField'])) {
// The form has not been submitted, so we will display it.
} else {
$prefix = “http://img.timeinc.net/time/magazine/archive/covers/”;
$suffix = “_400.jpg”;
//$t = strtotime($getDate);
if (($t = strtotime($getDate)) === false) {
echo “The string ($getDate) is bogus”; exit;
}
if (strftime(“%Y”, $t) < 1923)
{
echo “Too early!”;
exit;
//mktime(1923,2010
}
if (strftime(“%Y”, $t) >= 2011)
{
echo “Too late!”;
exit;
//mktime(1923,2010
}
//
$day=strftime (“%w”,$t); //pulls day of week from date $t
if ($day==0){ //sunday
$t = $t – (60*60*24*6);
}
else if ($day==1){ }
else if ($day>1) { //tuesday on
$t=$t-(60*60*24*($day-1));
}
//$t is now monday
$year = strftime(“%Y”, $t); //pulls year from date $t
$code = strftime(“%y%m%d”, $t);
echo “<img src=\”".$prefix.$year.”/”.”1101″.$code.$suffix.”\” />”;
}
?>
</body>
</html>
<body>
</body>
</html>
Part 2: This Just In: Calling Web APIs with PHP
Your goal: given a date, retrieve the front-page headlines for that date.
Working URL: http://itp.nyu.edu/~ryane03/lab3/NY2.php
Final Code:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<?php
$scriptName = $_SERVER['PHP_SELF'];
$pageTitle = “NY TIMES Headline Search”;
# Error Reporting in Browser
error_reporting(E_ALL ^ E_NOTICE);
ini_set(‘display_errors’, 1);
$getDate = $_POST["date"];
?>
<title><?=$pageTitle?></title>
<style type=”text/css”>
body {
font: 13px arial;
color: #000;
background-color: #fff;
padding: 10px;
margin: 0px;
}
</style>
</head>
<body>
<b><?=$pageTitle?></b>
<p>
Enter the date below to search the NYTimes.
<p>
<form action=”<?=$scriptName?>” method=”POST” enctype=”application/x-www-form-urlencoded”>
mm/dd/yyyy: <input type=text name=”date” value=”" size=10 maxlength=10>
<input type=”submit” name=”dateField” value=”Submit”>
</form>
<?php
//function cmp_by_title($a, $b)
//{
// define comparison function here that returns -1, 0, or 1
// if ($a[title] == $b[title]) return 0;
// if ($a[title] > $b[title]) return 1;
//if ($a[title] < $b[title]) return -1;
//}
function cmp_by_word_count($a, $b)
{
if ($a[word_count] == $b[word_count]) return 0;
if ($a[word_count] > $b[word_count]) return 1;
if ($a[word_count] < $b[word_count]) return -1;
// define comparison function here that returns -1, 0, or 1
}
if (!isset($_POST['dateField'])) {
// The form has not been submitted, so we will display it.
} else {
$searchResult = “$getDate”;
$result = strtotime($searchResult);
$fullDate = date(‘Ymd’, $result);
$prefix = “http://api.nytimes.com/svc/search/v1/article?query=date:[";
$suffix = "]%20page_facet:[1]&fields=small_image,small_image_url,title,word_count&api-key=6fdb622bd9b4e76abe00988403b26de9:8:61239144″;
$finalURL = “{$prefix}{$fullDate}{$suffix}”;
//echo $finalURL;
//GET DATA FROM NYTIMES
$homepage = file_get_contents($finalURL);
//echo “<pre>$homepage</pre>”;
$data = json_decode($homepage, true);
//echo “<pre>”; print_r($data); echo “</pre>”;
usort($data[results], ‘cmp_by_word_count’);
//echo “<pre>”; print_r($data[results]); echo “</pre>”;
foreach ($data[results] as $display) {
$wc = $display[word_count];// + 0; //convert to integer
echo “<p>”;
if ($display[small_image] == true){
printf(“<img src=\”%s\” />”, $display[small_image_url]);
printf ($display[title]);
printf ($wc);
} else {
printf ($display[title]);
printf ($wc);
echo “</p>”;
}
}
}
?>
</body>
</html>
Part 3: Climbing the Charts: More PHP Data Processing
Part A. For this exercise, we will be using the “Billboard Hot 100” chart, which has a chart ID of
379. Formulate a query to return the first 50 items of the Hot 100 Chart for the week of
August 16, 2008, in XML format. Include the query URL (with the API key omitted) in
your assignment hand-in.
$firstFiftyURL = “http://api.billboard.com/apisvc/chart/v1/list?&sdate=2008-08-16&edate=2008-08-23&start=1&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$firstFifty = file_get_contents($firstFiftyURL);
$data1 = json_decode($firstFifty, true);
Part B: Construct a PHP script that reads the date specified by this form, and displays the Top
Ten list for the date specified.
Working URL: http://itp.nyu.edu/~ryane03/lab3/Billboard3.php
Final Code:
<?php
$scriptName = $_SERVER['PHP_SELF'];
$pageTitle = “Billboard Chart Search”;
# Error Reporting in Browser
error_reporting(E_ALL ^ E_NOTICE);
ini_set(‘display_errors’, 1);
$getDate = $_POST["date"];
?>
<html>
<head>
<title><?=$pageTitle?></title>
<style type=”text/css”>
body {
font: 13px arial;
color: #000;
background-color: #fff;
padding: 10px;
margin: 0px;
}
</style>
</head>
<body>
<b><?=$pageTitle?></b>
<p>
Enter the date below to search the billboard chart.
</p>
<form action=”<?=$scriptName?>” method=”POST” enctype=”application/x-www-form-urlencoded”>
mm/dd/yyyy: <input type=text name=”date” value=”" size=10 maxlength=10>
<input type=”submit” name=”dateField” value=”Submit”>
</form>
<?php
if (!isset($_POST['dateField'])) {
// The form has not been submitted, so we will display it.
} else {
$searchResult = “$getDate”;
$result = strtotime($searchResult);
$startDate = date(‘Y-m-d’, $result);
$endDate = date(‘Y-m-d’, $result + 7 * 24 * 60 * 60);
$prefix = “http://api.billboard.com/apisvc/chart/v1/list?id=379&”;
$suffix = “&start=1&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$dateRange = “sdate=” . $startDate . “&edate=” . $endDate;
$firstFiftyURL = “{$prefix}{$dateRange}{$suffix}”;
$prefix2 = “http://api.billboard.com/apisvc/chart/v1/list?id=379&”;
$suffix2 = “&start=51&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$dateRange2 = “sdate=” . $startDate . “&edate=” . $endDate;
$nextFiftyURL = “{$prefix2}{$dateRange2}{$suffix2}”;
//$firstFiftyURL = “http://api.billboard.com/apisvc/chart/v1/list?id=379&sdate=2008-08-16&edate=2008-08-23&start=1&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
//$nextFiftyURL = “http://api.billboard.com/apisvc/chart/v1/list?id=379&sdate=2008-08-16&edate=2008-08-23&start=51&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$firstFifty = file_get_contents($firstFiftyURL);
$nextFifty = file_get_contents($nextFiftyURL);
//$homepage = file_get_contents($finalURL);
$data1 = json_decode($firstFifty, true);
$data2 = json_decode($nextFifty, true);
$dataMerged = array_merge($data1['searchResults']['chartItem'], $data2['searchResults']['chartItem']);
function cmp($a, $b)
{
if ($a['rank'] == $b['rank']) {
return 0;
}
return ($a['rank'] < $b['rank']) ? -1 : 1;
}
usort($dataMerged, “cmp”);
//echo “<pre>”;
//print_r($dataMerged);
//echo “</pre>”;
for ($i = 0; $i < 10; $i++) {
echo $dataMerged[$i]['rank'] . “.” . ” “;
echo $dataMerged[$i]['artist'] . “:” . ” “;
echo $dataMerged[$i]['song'];
echo “<br/>”;
}
}
?>
</body>
</html>
Part 4: Put it together in Style!
Create a single PHP script that takes a date as input, and displays a page with all of the elements
you pulled from external websites in the previous exercise: a Time Magazine cover, a set of New
York Times headlines, and the Billboard Top Ten list.
Use HTML tags to structure the content, and add CSS styles to position the elements and give
them a compelling visual style. Include the URL to this page in your assignment hand-in.
Working URL:
http://itp.nyu.edu/~ryane03/lab3/BillboardTIMESNYTIMES.php (without styling)
Final URL: http://itp.nyu.edu/~au319/mashups/week4/demo/final.php
Source Code {HTML}
<!DOCTYPE html> <!– The new doctype –>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Mashups & Final</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<!– Internet Explorer HTML5 enabling code: –>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<style type=”text/css”>
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]–>
</head>
<body>
<section id=”page”>
<header>
<hgroup>
<h1>MASHUPS</h1>
<h3>Learning APIs</h3>
</hgroup>
<nav class=”clear”>
<ul>
<li><a href=”#time_final”>Time</a></li>
<li><a href=”#nyt_final”>NYT</a></li>
<li><a href=”#billboard_final”>Billboard</a></li>
</ul>
</nav>
</header>
<section id=”articles”>
<div class=”line”></div>
<article id = “search box”>
<h2>SELECT A DATE</h2>
<div class =”line”></div>
<div class=”articleBody clear”>
<p>Enter a date below and view the corresponding New York Times headlines, TIME cover and Billboard’s Top 10 singles:<p>
<form action=”<?=$scriptName?>” method=”POST” enctype=”application/x-www-form-urlencoded”>
<p>mm/dd/yyyy: <input type=text name=”date” value=”" size=10 maxlength=10>
<input type=”submit” name=”dateField” value=”Submit”></p>
</form>
</div>
</article>
<article id=”time_final”>
<h2>Time Cover</h2>
<div class=”line”></div>
<div class=”articleBody clear”>
<!– TIME MAGAZINE –>
<?php
$scriptName = $_SERVER['PHP_SELF'];
$getDate = $_POST["date"];
$timeResult = “$getDate, last Monday”;
$tresult = strtotime($timeResult);
$tyear = date(‘Y’,$tresult); //returns year
$tfullDate = date(‘ymd’, $tresult);
$tprefix = “http://img.timeinc.net/time/magazine/archive/covers/”;
$tsuffix = “_400.jpg”;
?>
<p align=”center”>
<?php
echo “<img src=\”".$tprefix.$tyear.”/”.”1101″.$tfullDate.$tsuffix.”\” />”;
echo “<br/>”;
?>
</p>
</div>
</article>
<!– TIME section end –>
<!– NYT section start –>
<div class=”line”></div>
<article id=”nyt_final”>
<h2>New York Times Headlines</h2>
<div class=”line”></div>
<?php
$scriptName = $_SERVER['PHP_SELF'];
$getDate = $_POST["date"];
function cmp_by_word_count($a, $b)
{
if ($a[word_count] == $b[word_count]) return 0;
if ($a[word_count] < $b[word_count]) return 1;
if ($a[word_count] > $b[word_count]) return -1;
// define comparison function here that returns -1, 0, or 1
}
if (!isset($_POST['dateField'])) {
// The form has not been submitted, so we will display it.
} else {
$searchResult = “$getDate”;
$nytResult = strtotime($searchResult);
$nytDate = date(‘Ymd’, $nytResult);
$nytPrefix = “http://api.nytimes.com/svc/search/v1/article?query=date:[";
$nytSuffix = "]%20page_facet:[1]&fields=small_image,small_image_url,title,word_count&api-key=f724eb5a7adf17f9e6e2b366ee4918dc:5:3981646″;
$nytURL = “{$nytPrefix}{$nytDate}{$nytSuffix}”;
//echo $nytURL;
//GET DATA FROM NYTIMES
$nytHomepage = file_get_contents($nytURL);
$nytData = json_decode($nytHomepage, true);
usort($nytData[results], ‘cmp_by_word_count’);
foreach ($nytData[results] as $display) {
$wc = $display[word_count];// + 0; //convert to integer
?>
<p font-size=”1.5em”>
<?php
if ($display[small_image] == true){
printf(“<img src=\”%s\” />”, $display[small_image_url]);
printf ($display[title]);
printf (” ” . “(Word count:” . ” ” . $wc . “)”);
} else {
printf ($display[title]);
printf (” ” . “(Word count:” . ” ” . $wc . “)”);
echo “</p>”;
}
}
}
?>
</p>
</div>
</article>
<!– NYT API END –>
<!– BILLBOARD API START –>
<div class=”line”></div>
<article id=”billboard_final”>
<h2>Billboard Charts</h2>
<div class=”line”></div>
<div class=”articleBody clear”>
<?php
$scriptName = $_SERVER['PHP_SELF'];
$getDate = $_POST["date"];
$result = strtotime($searchResult);
$startDate = date(‘Y-m-d’, $result);
$endDate = date(‘Y-m-d’, $result + 7 * 24 * 60 * 60);
$prefix = “http://api.billboard.com/apisvc/chart/v1/list?id=379&”;
$suffix = “&start=1&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$dateRange = “sdate=” . $startDate . “&edate=” . $endDate;
$firstFiftyURL = “{$prefix}{$dateRange}{$suffix}”;
$prefix2 = “http://api.billboard.com/apisvc/chart/v1/list?id=379&”;
$suffix2 = “&start=51&count=50&format=json&api_key=vprr57c4xfewq9ywjsbnwkut”;
$dateRange2 = “sdate=” . $startDate . “&edate=” . $endDate;
$nextFiftyURL = “{$prefix2}{$dateRange2}{$suffix2}”;
$firstFifty = file_get_contents($firstFiftyURL);
$nextFifty = file_get_contents($nextFiftyURL);
$data1 = json_decode($firstFifty, true);
$data2 = json_decode($nextFifty, true);
$dataMerged = array_merge($data1['searchResults']['chartItem'], $data2['searchResults']['chartItem']);
function cmp($a, $b)
{
if ($a['rank'] == $b['rank']) {
return 0;
}
return ($a['rank'] < $b['rank']) ? -1 : 1;
}
usort($dataMerged, “cmp”);
for ($i = 0; $i < 10; $i++) {
echo $dataMerged[$i]['rank'] . “.” . ” “;
echo $dataMerged[$i]['artist'] . “:” . ” “;
echo $dataMerged[$i]['song'];
echo “<br/>”;
}
?>
</div>
</article>
<!– BILLBOARD API END –>
</section>
<footer>
<div class=”line”></div>
<p>Copyright 2010 – Minu, Emily & Aaron</p>
<a href=”#” class=”up”>TOP</a>
</footer>
</section>
<!– JavaScript Includes –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script src=”jquery.scrollTo-1.4.2/jquery.scrollTo-min.js”></script>
<script src=”script.js”></script>
</body>
</html>