Blog
This is a website designed to share motorsport news and videos. Once logged in, you can view feeds from various websites and have the option to share them on the home page to comment and rate.
There is also a countdown calendar to the next race for sports covered, as well as relevant Twitter feeds. A mobile view allows content to be displayed seamlessly - whenever the screen is detected to be less than a certain width, mobile view is enabled by adding a class to the main container. Items are then selected through CSS based on this new container to switch dynamically between views when required.
The content for the feeds section is dynamically retrieved from public RSS feeds after a fixed period of time, and the first 200 characters of the feed are stored in a local database, so as not to keep pounding external servers each time a page loads. The URL of the original article is also stored, so a link is displayed to view the whole article - the website acting as a kind of advertisement for multiple relevant websites.
I've just created a feed reader in PHP and Javascript to quickly view favourite sites. It's also possible once signed in to manage your own feeds so that only you can view them, and also to not see the default ones I have added.
On the feed, you get the usual title and links sections so when you click it takes you to the article. When hovering over the feed, you also get the option to expand the feed list to view older articles (assuming the RSS feed goes longer than 10 articles), or to view the article itself - if the article is included in the description tags on the RSS feed, which is the standard. As it relies on other people's sites being done in the same way, little sections don't work, but I've added some exceptions to help work around those. It's set up so that if a website is down where the feed is hosted, it will skip that one and continue, rather than breaking the whole page.
My main reason for creating it is that I couldn't find a reader that worked exactly how I wanted - so I decided it was easier to make my own. The closest I have found to a reader I want is Newsrack for the iPhone, which I like, although when you're sat at a PC, it's pretty pointless looking at your phone.
Next step will be to improve the speed (Firefox Beta 7 helps a little for this), as it gets a bit clunky at times. The code also needs tidying up as I've been tweaking and refining. As it's only me working on it so haven't felt the need to clean up or comment my scripts like I normally would. I may change the styling slightly for an iPhone version, although the app I mentioned does a good job already I probably won't bother, unless it unexpectedly becomes amazingly popular. Loading icons would be handy too, so you know it's trying to do something (or the internet has broken).
Update: Loading icons have now been added. Also included a sidebar to add favourite links that you can return to later - works when signed in and not, so you can either have a personalised set of bookmarks, or a public set that anyone can use. Added a history too, to keep track of which sites have been updated since you last visited the page. Optimised the loading and animation a little, but it still needs the code tidying up further, It's getting there!

Handily, the loading is done with jQuery, so you only load the page once and everything animates within the page whenever you click on something.
Have a play here.
Well, here it is. My first tutorial. I've decided to write this tutorial on creating a basic RSS/XML feed in PHP because it's something I couldn't really find a good tutorial on to suit my needs, so hopefully this will help somebody out. The same technique can also be applied to create XML feeds for sitemaps, which is always good for search engines.
I'll assume you have content being fed from an SQL database, know how to connect to the database from your website to display the information, and this is the content you expect to be put into your feed. It's quite a basic tutorial, so aimed at PHP novices, as I guess many tutorials are as that's kind of the point.
To begin with, create a blank .xml file on your website, and give it full control access in your web host settings. Mine's in the root of my website - http://www.adamgleeson.co.uk/rss.xml.
Next, in your admin area, make the rss.php page. This needs to include your database connection information as usual.
Then from this point onwards, the RSS/XML content will be added to as one single variable in PHP. This means the file will effectively be one long line, but web browsers and feed readers will sort this out and make it into a sensible layout as long as all the tags are correct.
The XML file needs to start with a definition and a channel open tag:
$xml = "<rss version=2.0>";
$xml .= "<channel>";
Note the ".=" to keep adding to what is previously in the variable without discarding it.
Continue by adding title and description tags for your feed. A title tag I would say is the minimum, but if you don't even want that you can skip this section I guess.
$xml .= "<title>Adam Gleeson</title>";
$xml .= "<description>Animation and Computer Games</description>";
$xml .= "http://adamgleeson.co.uk/</link>";
$xml .= "© Adam Gleeson 2008";
Now for the feedy goodness. Grab your SQL from the database like you would for a normal page:
$sql = "SELECT * FROM table_name LIMIT 25";
$rs = mysql_query($sql);
while($rss = mysql_fetch_array($rs)){
And open up tags to start a new feed item:
$xml .= <item>";
$xml .="<title>";
Add the title of the item, or whatever your table field heading is, then close the item tag.
$xml .= $rss["title"];
$xml .= "</title>";
Next comes the description. In my description I just have the date and category, rather than reformatting the text:
$xml .= "<description>";
$xml .= $rss["date"];
$xml .= "(";$xml .= $rss["category"];
$xml .= ")";
$xml .= "</description>";
Last tag to be entered in my feed is the all-important link. Just to make it easier, I've linked it to the ID of the relevant item, which the page then uses PHP GET to decide what to display by grabbing the ID from the URL.
$xml .= "http://www.adamgleeson.co.uk/blog/?article=";
$xml .= $rss["id"];
$xml .= "</link>";
Remember to close the item tag, then rinse and repeat as necessary. If all your data is contained within one table, this should be enough to display everything. The close bracket here is to end the while loop, while the close item tag only ends this current part of the feed, before continuing down the rest of the table as required.
$xml .= "</item>";
}
Finally, close your channel and RSS tags that are still open.
$xml .= "</channel>";
$xml .= "</rssl>";
Now to actually write the file. Using the empty file we created earlier, the PHP fwrite command is used to add the $xml variable we have just created into the file. Remember that PHP will only allow relative links in this stage.
Last thing to do then is simply to close the PHP tag.
$file = fopen("../../rss.xml", "w");
fwrite($file, $xml);
fclose($file);?>
To add some confirmation that it has been created (or rather, that nothing went wrong if you see no error), a simple link to the file is always helpful.
And that's it, you should now have a working RSS feed. To make the feed visible in your web browser like on many websites, add this to your head tags on the pages you want the RSS feed to be visible:
As with most web things, there are many ways of doing the same thing, and this is simply one of them. I'm not suggesting it is the best way, but it works for me, so I hope this will help someone. I appreciate any comments, let me know if it's any use to you, or any requests for future tutorials!
Tags
- ott !animation php highlights assassins creed character motorsports PHP web game web development canada animation looks like the guy from the crystal maze css jQuery lip sync cycle mental case mysql XML !webapps jump MySQL 11 second club dance orange robot update xml balls calendar head explode physics work in progress javascript Mobile development website july 2011 2011 idiot soldier amazing superhero 3D jquery rss run fota chat silverstone wtf feedreader reel demo development trailer f1 the box webapps mask stuff portfolio maps june 2011 fight tasks Interface matrix evil site !animation bounce webapp design dragon sentinel unnecessarily extravagant !character mclaren fall climb
Archive
- April 2012 [1]
- March 2012 [2]
- September 2011 [6]
- July 2011 [6]
- June 2011 [5]
- May 2011 [4]
- April 2011 [7]
- March 2011 [1]
- January 2011 [7]
- December 2010 [2]
- November 2010 [4]
- October 2010 [12]
- September 2010 [7]
- August 2010 [1]
- July 2010 [5]
- June 2010 [4]
- May 2010 [3]
- April 2010 [6]
- March 2010 [6]
- February 2010 [5]
- January 2010 [1]
- October 2009 [2]
- September 2009 [5]
- August 2009 [4]
- July 2009 [6]
- June 2009 [4]
- May 2009 [2]
- April 2009 [6]
- March 2009 [3]
- February 2009 [4]
- January 2009 [4]
- December 2008 [4]
- November 2008 [1]
- October 2008 [5]
- September 2008 [2]
- July 2008 [1]
