Geeks With Blogs

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged

Timmy Kokke …just sorting my bubbles…

Introduction

The WinPHP challenge is running towards it’s closing time. Only a few days before entering I came with the idea to enter the contest. I had to put a lot of my spare time into it, but it was worth it. I learned a lot from exploring the realm of php. It’s fun to work in a language I normally do not work in. And to find ways to implement some thoughts that have been on my mind for a while. Here’s the story about the what, the where and the how of BlogSnor, my entry for the WinPHP challenge.

Flashback

Let’s start by looking back at what I was thinking of before I started. 

I wanted:

  1. Ease of use for styling. By using http://kuler.adobe.com for the coloring and by generating all images.
  2. Microsoft SQL Server for storing all data.
  3. Windows Live ID authentication.
  4. Easy to read urls for search engines and make them easy to read.
  5. Send update to twitter and emails on post.
  6. online and offline editing using windows Live Writer and an online editor.
  7. And run it all on Windows Server 2008 and IIS7.
  8. Generate an RSS feed.

I had some ideas about how to some components, but haven’t had a change to build them into an application. The main thing was the styling part. The idea of using a small set of colors with some relevance to each other to generate an entire website.

Styling

Once a user is registered to BlogSnor and his weblog is activated, he can go to the admin section where he has the   possibility to select a set of colors and a banner. By default a random set of 10 styles is retrieved from kuler.adobe.com, by the user can search for a more distinct set of colors.

kuler

The colors selected by the user are sorted from light to dark of from dark to light according to the user’s preferences. This results in a style with a light or a darker feel to it. The best sets of colors are colors that have a bit of lighter and darker colors in it. The funny thing is that almost all sets of colors will result in an acceptable style. In some situations, where the color of the text and it’s background are to close together, the engine decides to change the text color to white or black to give it a bit more contrast. When the user has selected a set of colors and clicks submit, a whole new set of images and a css file is generated.

For the generation of the images I wanted to use Xaml. Xaml is a great way to define use interfaces, but can be of much help describing graphics too. I’ve written a detailed description about the image generation using WPF thru .NET assemblies in a previous post. For the banners I used 8 big (1800x600) images as a basis. A small portion is randomly selected and colorized.

Storing Data

Using Microsoft SQL server 2008 was the obvious choice, because this contest is about running on Windows server. The design of the database is very straight forward. This constructions allows weblogs to have multiple authors. This isn’t fully supported in the first version of BlogSnor, but can easily be implemented in the future. All possible tags are stored in a single table. This allows a user to add tags with a single click in Live Writer and create an summary of all used tags on the main page. 

databaseDiagram

For querying the database I create a class based on the Singleton Pattern. Because I wanted to query the database multiple times in a single session using the same connection I used a static function. This combination gave me a way to use a single line of code for each query, like $result = db :: query (“select * from Weblog”); .

I configured the SQL server, installed on the remote server that was provided for the challenge, so that I could access it from my local SQL Server Management Studio. This way I could write and test queries without needing to remote connect to the contest server and work in management studio there.

A nice side effect of using the remote access is the possibility to use the SQL Profiler that comes with non-free versions of SQL studio which I happen to run for work. Using the profiler I was able to debug the queries send to the server and catch many unsuspected errors.

Authentication

For authentication I wanted to use the Windows Live ID authentication. I use this mechanism to log into many Microsoft sites for years and always wanted to know how this works. I turned out to be very easy to implement nowadays. Just register your site with Live Service and you’re ready to go. On MSDN there’s detailed documentation on how to implement Live Id in your own site. You redirect to a Windows Live site and let the user login there. A token is returned and the code to process that to a user ID is provided by Microsoft. All you have to do is store a cookie with the token to make sure the users doesn’t have to log in every time he enters the site.signin 

 

 

URL Rewriting

To make the URLs more easy to read I used the URL Rewriter that was installable thru the Web Platform Installer. This uses a Regular Expression to filter parts of the url and send this to another url, thus gives the ability for the user to write a normal readable URL and let the website use URLs with complex query parameters.

Another thing I want to mention here is actually a feature of IIS7. Since IIS7 configuration is stored in a Web.Config file. This file is stored in the root of your web application and doesn’t contain machine specific information. This means that you can create a number of URL redirects and rewrites on your local test machine and all you have to do to make this work on your production server is copying this web.config file and all your settings are used there too.

Sending Updates

I thought of sending notifications to twitter and to visitors thru email. I decided at the beginning of the project to let the idea of creating a subscription mechanism go. This would take too much time and doesn’t add very much to the project. Sending Twitter updates was something I definitely wanted to implement. It’s very easy to do and only takes a few lines of code. Because twitter was so easy to use, I added small twitter timeline to the sidebar of the weblog.

twitter Twitter can return a timeline of a user in xml form, which made it very easy to present to the user in a nice looking way. The only thing that took a little more thought was the linking. I wanted to link hash tags like #winphp to the twitter search and the user representation @sorskoot  to the user page. I added one small extra feature. Some twitter updates are replies to other updates. This information is provided in the twitter xml message. Therefore I added a @ in these cases to link to the message that is replied to.

You can follow all updates on @BlogSnor.

Editing of Posts

I personally use Windows Live Writer for writing blog posts. So I wanted to implement this.

livewriter

After doing some research I decided to go with the Metaweblog API. Mainly because this format is supported by Windows Live Writer, but also because other applications may implement this API too and can be used also. Another thing that made me choose this API is that is uses XML-Rpc which was on my personal “things-to-learn” list for a long time. To make thing easier, a detailed description of all functions that needed to be implemented is on MSDN. Windows Live writer is sending messages to my implementation at http://95.211.64.138/BlogSnor/WeblogMetaApi.php. This URL needs to be given to Windows Live writer when it asks for it when configuring a new weblog. If you have any questions about this, please feel free to send me an email. Because Windows Live Writer is such a great tool I decided not to implement a web editor. It’s not that complex to add later and can use the same API.

Unplanned

One thing I forgot to mention at the beginning of the project was Silverlight. I use Silverlight often and I like it very much. I wanted to see if I could do anything with that. I wanted to use Silverlight without using C# and the need to compile it into a XAP file. The only way to do this was to reach back to Silverlight 1.0. The first version of Silverlight  used Javascript for event handling and stuff instead of actual code behind.This way I could use php to create xaml file for Silverlight and still be able to handle some events. I created a simple tag cloud that moves a little when the mouse is hovering over it.

tagcloud

 

Another thing I implemented was the use of a Gravatar. This is a service that enables user to add a picture to there email address that can be used by weblog engines like this one. It’s API is very easy to use and they even provide a funny image when a user doesn’t have his email address registered.

gravatarI wanted to use AJAX to get the kuler color sets from adobe. I’ve found a project somebody is running on codeplex that makes it very easy to implement Microsoft AJAX in php. It lets you get JavaScript from your php file and enable you to call that when needed. This way you can call functions in you php files on the server from the client. 

Last but not Least

I had fun working on this project. I learned a lot from techniques used and a lot from the community. Although everyone has different backgrounds, everyone nice and helpful to each other.

I want to thank to sponsors for running this contest.

And my wife, for having to deal with me putting all my time into this challenge.

 

BlogSnorLogo

Posted on Tuesday, June 2, 2009 8:07 AM WinPHP | Back to top


Comments on this post: WinPHP challenge recap

# re: WinPHP challenge recap
Requesting Gravatar...
Hi,

Where's the source code for blogsnor?

Regards,

Rob...
Left by Rob... on Jul 05, 2009 12:03 AM

# re: WinPHP challenge recap
Requesting Gravatar...
Hi Rob,
The source can be downloaded from http://95.211.64.138/BlogSnor/download/blogsnor.zip

Left by Timmy Kokke on Jul 05, 2009 6:51 PM

Your comment:
 (will show your gravatar)


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net