Graeme's Playground Blog

Creating a Simple Captcha Image for an MVC Application by Graeme

The following is a walkthrough to create a simple captcha image to use in your MVC application, for the purpose of say verifying blog comments are coming from a human source.  Which is purely the reason I created mine, I was sick of getting spam comments on the posts and using a Captcha is the quickest way to prevent the deluge of automated spam responses.

1. The first step is to create an ImageResult MVC ActionResult (if your application hasn't had need of one already).  This is a simple class that inherits from the standard ActionResult but instead of streaming a html response, streams the binary of your image. Your action code may look something like this:

2. Once you have the ImageResult it becomes very simple to return any image you create (or load from elsewhere e.g. from disk) as the result of a controller action.  You can construct a very basic bitmap image, containing your captcha word and return it to the user with some code like the following:

Nb. I also take the simplistic approach to storing the captcha string of simply putting this in the session.  To be safer (in case of a user having multiple pages open simulteanously) I should have had the captcha value stored against a request key and embed the request key into the view page, so it was available on post back.

3. Now all you have to do us make sure on the viewpage to have an image thats url points to the controller action

4. Lastly check that the user has entered the correct string of characters before allowing your post action to continue.

There you have it a simple Captcha system that you can use inside an Asp.Net MVC application.  My image for the captcha is very basic but you can improve this by any of the drawing functions to help make it harder for a non-human to parse the text for themselves, such as making the text wavy, fuzzy adding grid lines over the top etc.
Posted at 5/26/2010 9:26:50 PM | Comments(2)

Back Again by Graeme

Well I've never really left, just found that other things got in the way of meaningful progress on this site.   None the less I've been able to spend some time in the last few weeks to get some things sorted and plan to really get back into working on new things using this site.

Unfortunately most of the recent changes I've added are behind the scenes, so on appearance it may not seem too different to an observer. I wanted an admin function so that I could Post and Edit blog articles from the browser and also keep on top of the spam that had been generated in the comments in my absence from updating this site.  Another small change that has been implemented recently is the introduction of a simple CAPTCHA system to prevent automated spam messages, so hopefully I'll not end up with the deluge of garbage as seen previously.  Suffice to say I've used my new admin section to remove all the spam comments from the system and will do so going forward.

Now that I'm back I will be hoping to write some articles relating to the implementation of these recent changes in the coming weeks and also hopefully spend some more time improving the function of this site and add some projects that show the new stuff I've been playing with.
Posted at 5/6/2010 6:44:23 PM | Comments(0)

Adding A User Control to a Page in WPF by Graeme
I decided to post this as a tip, as I came across it when attempting to do my first WPF application and couldn't get a quick and easy answer through Google.

Simply put there is no way to just drag a user control you have created onto another page in your WPF application. In order to use the control on the page you want to see it on, that page needs to add a reference to the namespace that the control is in. By default that namespace is the assembly of the application, thus you need to add something like the following to your window element in you page's xaml:

xmlns:my="clr-namespace:WPFFractalGenerator"

I've tagged the namespace my, so that when you add your control to the page it looks like <my:control1>. Below is an image of how it looks in the visual studio designer. Note that while the namespace says clr-namespace:<Your Namespace>, in the intellisense drop down you'll see <Your Namespace> in assembly XYZ.


(In my example WPFFractalGenerator is the application I'm building)




Then once you've added the namespace to your page you can begin adding UserControls or CustomControls you have created that belong to that namespace, like:



Hopefully, this help's someone out. As it doesn't seem to be an easy thing to find an example of on the web.
Posted at 7/9/2009 9:11:16 PM | Comments(0)

Creating the Site - Part 3: RSS for the blog by Graeme
I went through a few versions of getting the RSS feed of the blog into the application, before coming across a very neat way of adding subscriptions to your MVC application.

First I thought I could use the ASP.NET RSS Toolkit (http://www.codeplex.com/ASPNETRSSToolkit). It would have worked well but would have been an external dependency and I would have also needed to import it's handler and overall it wasn't that neat a fit into the MVC solution.

Next I did the obvious solution, which was to create a simple View that instead of outputting html, generated the RSS xml. This solution works well and as RSS isn't too complex it didn't take much time to implement. The only issue, is the view pages are designed to be HTML and outputting xml was a bit of an issue.
Then I came across this excellent solution by ekampf, where by you use the SyndicationFeed classes in WCF to format the Rss xml for you and then create your own RssActionResult to return this formatted document - no need for a view, minimal code to create the feed - excellent!

So the result of this looks rather like so:


Using this elegant solution it was also trivial to create an atom feed from the same syndication feed I'd already created, I just needed to create another ActionResult to return the atom formatted feed.


The last step was to sign up to Feed Burner and add this as a link to the site so that people can find the RSS feeds.
Posted at 7/6/2009 10:45:52 PM | Comments(0)

Creating the Site - Part 2: Implementing a Basic Blog by Graeme
One of the features I wanted on the site from the start was to have a basic blogging function. On the blog I could write about my experiences with creating the site or the test projects that are the reason for the site or just write about my thoughts relating to the technologies I'm using (or want to be using).

To start with in creating the blog, I wasn't going to be too fussed with how the blog content got added to the database - I could implement some admin functionality later to make that easier for me, I just wanted to get a simple table structure together where I could show blog entries that I'd added to the database manually and go from there.

That meant the first step therefore was to define a data model to host the blog entries I would input and the result of my design is below:



The main items needed in the blog database are:
  • Blog - In case I want to have multiple blogs on the site, it will differentiate which blog they belong to
  • Blog Entry - To hold a single Blog Entry
  • Comments - To hold comments against a blog entry. I also added a parent comment id for the comments table because I had a Google Wave/Slashdot like idea to do hierarchical comments, where by you could comment under a comment.
  • Blog Label - To hold labels or tags against a blog
  • BlogAuthors - To keep track of who is authoring blog posts
  • lnkBlogLabels - a join table to take the many to many relationship between blog entries and labels.
Now that I have the database in place, I can create some LINQ to SQL Entities to access the blog entries and relay those to the relevant view to show them. As I'm thinking that eventually I'll have a look at Entity Framework or other ORM systems later, I've also decided to go for the Repository pattern to hide away the implementation of the Data Entity Layer from the controllers.




Now I have a repository of blogs in which I can query from the blog controller to pass on to the relevant blog view. The scenarios that the blog controller will have to handle (eventually) are an index listing - say last 10 posts, a paged archive of 10 posts at a time, filtered lists by date (year/month) or label and finally to view an individual blog entry. Also will need to add a post method to receive the input from when a user adds a comment.

Now that I've implemented the Blog Controller I will need to create the relevant views to match the actions returned via the controller. I'll do this by adding typed views (right click on the views folder and select Add->View...) and using the MVC provided wizard to create some default views.




Lastly we will need to play with the controller routing to handle the requests for the blog controller and then that's it we have a simple blog, with some very basic features that I will extend over time. Also at some point later I'll need to add a neat system for getting blogs into the database, for the moment I'll just stick to adding it the SQL directly.

Now to try and add the first of the extended features, a RSS feed based off the content... I'll blog about that experience in the near future.
Posted at 7/5/2009 11:02:00 PM | Comments(0)

Creating the Site - Part 1: Generating the Skeleton Site by Graeme

As my first post I thought it best to write about my experience in starting the site and what tools I've used to create it.

To begin with I'm using the new ASP.Net MVC framework and that will drive the majority of the site. This is for a few reasons:

  • I need to learn it for a project; and
  • It is simple but very powerful - making it the ideal base for a website such as this.

The snag with using the MVC framework is that I'd also want to use LINQ to SQL or Entity Framework for my data interactions and both of those require full SQL Server Access (without resorting to non MS LINQ providers). However my current host would only let me use SQL Server for an extra $US10 p/m, thus I ended up hosting www.graemesplayground.com with www.godaddy.com as they were the cheapest reputable host I could find that allowed SQL Server access and .Net 3.5 use and the total cost of hosting was less than the $US10 p/m.

Now back to what I did for the site:

  1. I started with the default ASP.Net MVC project



  2. In order for the site to be at least basically useable for what I need it for I added in place holders for the sections of the site I wanted to create : This Blog and a Project Repository.



  3. Next I needed to add basic actions in the home controller to handle these high level actions



  4. And simple Views to go along with them.



So this left me with the basic skeleton to begin building the features of the site.
Posted at 7/2/2009 6:16:39 AM | Comments(0)


© 2010 Graeme Finn