This article is excerpted from the book Sams Teach Yourself the Twitter API in 24 Hours with permission of publisher Pearson/Sams. Copyright 2011 by Pearson Education Inc., all rights reserved.
In this article, you'll learn to create the basic file structure that you would see with any typical website: the HTML, CSS, and PHP code to create the content. As we go through the steps, more advanced programmers may be wondering why we took certain approaches to our coding or choose to use what would seem overly simple techniques. After much debate by the writers and advisors, we decided that at the price of elegant coding, we would try to make things more clear to the beginning programmers.
Let's put our simple framework in place. It's a basic framework compared to more sophisticated applications. Our basic setup will have an HTML file that is called when the user first comes to the site, which will load main.php, as well as call three other files, each designed to perform a certain task, as you can see in the chart at left.
We are going to create six files: the HTML page, the CSS file, and four PHP files. Three of the PHP files will live in a subdirectory called includes.
Creating index.php and main.css
First, let's create the HTML code. You may have noticed that we are using index.php instead of index.html. Depending on your server's configuration, you can use either one, however convention is to use index.php if you have a php code in your file, and we very much do in our example. Create a new file called index.php in your editor and type in the following code:
<meta charset=utf-8><br>
<html><br>
<head><br>
<title>twitterAPI 24 hours</title><br>
<link href=css/main.css rel=stylesheet /><br>
</head>
<?php<br>
include 'includes/twitterAPI.php';<br>
include 'includes/parseTwitter.php';<br>
include 'includes/render.php';<br>
?><br>
<body><br>
<div class=header><br>
<div class=tweet>TwitterAPI24</div><br>
</div><br>
<div class=container>
Next, we make a call to main.php, which we will use to load our content:
<? include 'main.php'; ?><br>
</div><br>
<br>
</body><br>
</html>
Creating main.css
It's not in the scope of this article to explain how CSS works, so we will simply provide the CSS code here. Create a folder called css and then create a file in that folder called main.css. Type in the following code:
/* Global Layout */<br>
body {<br>
margin:0;<br>
padding:0;<br>
font:12px Arial, Helvetica, sans-serif;<br>
color:#999;<br>
width:100%;<br>
}<br>
/* End of Global Layout */<br>
<br>
/* Global Styles */<br>
/* Disable CSS Text Decoration Property */<br>
a {<br>
text-decoration:none;<br>
color:#667;<br>
}<br>
/* Enable CSS Text Decoration Property and select underline */<br>
a:hover {<br>
text-decoration:underline;<br>
}<br>
<br>
/* End of Global Styles */<br>
<br>
/* Section: Header */<br>
.header {<br>
margin:0 auto;<br>
padding:10px 10px;<br>
background:#333;<br>
overflow:hidden;<br>
}<br>
.tweet {<br>
padding:0 10px;<br>
}<br>
<br>
/* Section: Table */<br>
/* Format the Detail Table with border */<br>
#detail_table td{<br>
width:330px;<br>
padding-top:2px;<br>
padding-left:5px;<br>
padding-bottom:2px;<br>
vertical-align: top;<br>
color:#333;<br>
border-bottom:1px solid #DBDBDB;<br>
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;<br>
valign: top;<br>
}<br>
<br>
/* Section: Messages */<br>
/* Format the Message container */<br>
.container{<br>
float:left;<br>
width:320px;<br>
}<br>
/* Format the Message image */<br>
.mess-pic {<br>
background-color:#eee;<br>
padding-right: 5px;<br>
font-size: 10px;<br>
float:left;<br>
}<br>
/* Format the Message container */<br>
.mess-container{<br>
float:left; width: 250px; padding-left:10px;<br>
}<br>
/* Format the Message content */<br>
.mess-row-text{<br>
float:right; padding-left:10px; width:250px;<br>
}
Great. Now that we have the presentation layer out of the way, we can get to the actual code. We are going to create four more files: main.php, parseTwitter.php, render.php, and twitterAPI.php.
Creating main.php
First, let's start with main.php. This file will make calls to all other functions we need to support our simple Twitter client application. The main.php script should not do any tasks in and of itself, but instead serve as the traffic cop for calling other functions. In this example, main.php is going to make three calls: first to callTwitter() from twitterAPI.php to get the latest messages from the Twitter servers; then it will call parseTwitterReply () from parseTwitter.php to convert the returned data into something more usable within PHP; finally, it sends the formatted HTML code of renderTweets() of render.php to the user's browser.
To get started, let's create main.php and type in our first line of code:
<?php
In the next line, we manually defined $twitterName. BREAKINGNEWS is the name of a Twitter account. You could replace this with any valid Twitter account with public tweets. We appended .xml to let Twitter know we want the response to our request to be in XML format:
$twitterName = 'http://api.twitter.com/1/statuses/user_timeline/BREAKINGNEWS.xml';
Next, we make a call to a function called callTwitter() in our twitterAPI.php file. It is here that we make the actual call to the Twitter servers. We will create this file later.
$twitterRequest = callTwitter($twitterName);
After we get our return from the callTwitter() function, we call parseTwitterReply in our parseTwitter.php file to convert the XML text reply we got from Twitter into a structured PHP object that is easier to work with. Again, do not worry; we will create this file later.
$twitterRequest = parseTwitterReply($twitterRequest);
After we have our reply from Twitter in a format we can use, we make a call to renderTweets in render.php to create the HTML code we will send to the user's browser:
echo renderTweets($twitterRequest);<br>
<br>
?>