Asp.Net MVC 2 Quick and Simple Site – v1

*Note: Asp.Net MVC 2 project in Visual Studio 2010

I sat down last night and was thinking about how I could get a simple starter site up and running for a client, until I could design something more tailored to their needs. There is nothing worse than having a “under construction” page or a “coming soon” page. It doesn’t really say much about what is happening or what might be coming. So I sat down and came up with the basics of what a client might want right from the start, here were my requirements.

  • Set a Logo, Name, and Subtitle
  • Be able to quickly edit a small about section (Content)
  • Quickly add some of the more important social networks (Twitter, YouTube, FeedBurner, Delicious, MySpace, and Facebook).
  • Be able to add Google Analytics (Optional)
  • A dynamic image gallery (drop images in a directory and everything is done for you).
  • Basic contact information. Email, Phone, and Website.
  • No external libraries to install (this hurts but is helpful).

So I sat down and started writing. I wanted someone to be able to push this site without editing a lot of files or having to setup a database. I opted to put a lot of the client’s settings in configuration. Yes configuration sections are not the new hotness but they can still serve a powerful purpose.

My first iteration had me using controller actions for each part of the site, but I slowly realized it was overkill. I opted to have one controller action from my index, and then break sections up into partial views that would be all rendered at the same time. Then those sections would be hidden and made visible using JQuery. After a little design, I ended up with this.

image

Let’s look at how to set this up.

Step 1 – Setup the Configuration

There are some pretty simple configuration sections in the web.config included with this project. You will see two App settings: WorkImagesDirectory and GoogleAnalyticsCode. The WorkImagesDirectory is used to find all the images in your gallery. Thumbnails for all your images will be automatically created if they are missing. The GoogleAnalyticsCode setting should be set to your Google Analytics code UA-XX-XXXX (or something like that). If you leave out the Google Analytics code then the script won’t be output to the page.

Next you will see a ContactInformation section. In this section you can set the name, site subtitle, email, phone, and website.

Finally, you will see a SocialNetworks section. Only the social network usernames you set will show up on the page. You can set Twitter, Facebook, YouTube, Delicious, MySpace, and FeedBurner(a blog maybe).

Step 2 – Setup Content

Once the configuration is done, then you probably want to change some of the content to reflect some good information.

All tabs are separated into partial views: About, Contact, Work, Social. Just replace the HTML content in here with what you want, leaving the nested RenderPartials.

Step 3 – Modify Colors and Images

All the images and style sheets you need to modify are under the Content directory. If you like the color and just want to modify the avatar at the top, just overwrite the avatar.png under Content/img.

Step 4 – Deploy It

Just publish what is there to your hosting provider and you are ready to go.

Conclusion

This is a good little site to get up and running for your clients, but it isn’t anything ground breaking. The code is straight forward, so even a novice can get in there and change things. The point here was not to over complicate the solution with third party libraries. It is to get a site up with in minutes, while still giving some great functionality to the people that need it.

AquaBird.StarterSite

Git –newbie –workflow

Introduction

I recently found the time to dedicate to learning a distributed version control system. I had the choice between Mercurial and Git. Both are great systems but what it came down to ultimately was the fact that I already had TortoiseGit on my machine. Yes you read that right, it came down to the fact that I didn’t want another source control provider taking up space in my context menu; frankly my context menu is getting a little ridiculous.my context menu I know it isn’t exactly a scientific method of picking between the two, but honestly, I see very little that is different between the two (for a learner).

Initial Reaction

When I first read the description of Git, I thought “who would be stupid enough to have source control on their own machine?” The second thought to go through my SVN-centric brain “I like SVN, so why should I change to Git?” The first question came out of ignorance to the ideas behind a distributed source control system, the second is a completely valid rebuttal.

I will attempt to address the first question. Yes your source control is on your machine but think of it as your own personal local copy of the “Truth.” You edit your version of the “Truth” until you feel comfortable with your additions and changes. The next step is to push your changes to a central version, possibly on GitHub or Unfuddle. That last step is important, because your source is no longer local. Your code now exists somewhere that is hopefully safe, secure, and accessible to you and your team of developers. What is powerful about Git is the fact that most of the expensive actions performed locally: commits, merges, additions, and deletions. This makes Git crazy fast, CRAAAAZZZY FAST! The two most expensive actions are pull and push, but even these can be quick if your central source control repository is on the local network. After a couple hours playing with Git, my ignorance about the ideas behind this system were overcome by an understanding and comfort.

The second question is valid. If you like SVN, why should you switch? Well nobody is forcing you to switch, and people won’t call you a loser if you decide to stick with SVN. I still have a warm place in my heart for SVN, it was the Han Solo of my escape from the Death Star known as VSS (Visual Source Safe). That being said, Git is a lot easier when it comes to branching and merging. In SVN branching occurs remotely on the SVN repository, which can be slow. In Git, branching happens locally and is even encouraged by most resources that I read. The one thing developers might gripe about Git is the fact that there really isn’t much Visual Studio integration. SVN has a ton of integration tools inside Visual Studio. What I would say about this though, is that the projects I work on have more than enough files outside of my VS Solution to negate the good aspects of integration tools. File types like third party assemblies, documentation, build scripts, and other files all exist outside the scope of my solutions. Now to add them to your SVN repository you are forced to use TortoiseSVN, a tool that exists outside Visual Studio.

I may or may not have convinced you to try Git, but I really feel you should. More and more compelling projects are being hosted on GitHub. How will you get involved and help these projects grow with a knowledge of Git? Also, Codeplex now offers Mercurial support, so don’t be suprised when your favorite projects on Codeplex start moving to a distrubuted SCM.

Basic Workflow

To get started with Git download MsysGit. This will setup an environment ready for Git on your windows machine.

I also recommend TekPub, they have a great series about mastering Git.

To learn about a system you have to use it, and that is what I did with Git. I wouldn’t call myself an expert but I do feel comfortable enough with it now to jump into a Git project. The basic Git workflow is as follows (type: “git help” in a command window):

  1. init or clone: if you are starting a repository use init, if you are getting use clone.
  2. branch: create a new branch to start working in or just work in the master branch.
  3. add: add any or all files involved in your project.
  4. commit: commit staged files to your local source repository.
  5. pull: get any changes that have occurred at the central repository.
  6. merge or rebase: make sure all your changes and branches are reflected in the master if need be.
  7. patch or push: some repositories online are private so you can produce a patch to send to the owners, if you own the repository the push away.
  8. Rinse and Repeat until content.

These are the commands you’ll need to know to just get by, but there are many more to become a master. I modified my environment to work with WinMerge for both merging and diffing. Below are the instructions to get that working.

  • You will need to modify your git environment. This is done through modifying the .gitconfig file found in your user folder (C:\Users\<yourname>\.gitconfig).

*Note, when you install WinMerge be sure to check the box that installs WinMerge into your system path.

[/diff]
    external = “c:/users/khalid abuhakmeh/difftool.sh”
[merge]
    tool = winmerge
[mergetool "winmerge"]
   cmd = ‘WinMergeU.exe’ \”$MERGED\”
   trustExitCode = false
   keepBackup = false

  • Create a bash script to execute against WinMerge. Create a file called difftool.sh and save it in the same directory. Below are the contents of my file.
#!/bin/sh
echo Launching WinMergeU.exe: $1 $2
"C:/Program Files (x86)/WinMerge/WinMergeU.exe" -e -ub "$1" "$2" | cat
#!/bin/shecho Launching WinMergeU.exe: $1 $2"C:/Program Files (x86)/WinMerge/WinMergeU.exe" -e -ub "$1" "$2" | cat

Now when you execute the commands "git diff @{1}" (compares against previous version)  or "git merge" you will get to use WinMerge to perform those actions. Pretty cool.

Conclusion

So there you have it, my initial interactions with Git and what I have learned so far. There are more things to learn, but I am definitely a convert to Git. Can you Dig Git?

shaft

Aqua Bird Consulting has moved to CoolHandle Web Hosting

Aqua Bird Consulting has just finished its move from its old hosting company to its new location at CoolHandle Web Hosting. I can honestly say that I am 100 times happier with the move and the service that CoolHandle offers. For those who have been reading our blog posts, we apologize for the long wait. In an effort to get back into blogging you can expect to see a lot of helpful blog posts in the up coming weeks.

Topics you can expect to see are business oriented, development oriented, and technology rants. To be specific, I have been personally working on a presentation for C4MVC  regarding database migration frameworks. Expect to see a downloadable solution for the migration presentation. For those of you the commented on previous posts, if you do not see your comments then you may have been lost in the transfer (probably a strong argument to use Disqus here). Please comment again and I will try to reply to your question.

We have been up to some really exciting things and can’t wait to share some of them with you. So anyways, the point is the Aqua Bird Consulting Blog is back! Be sure to tune in and keep reading.

Thank You,

Khalid Abuhakmeh

Windows 7 Open Firewall Ports To IIS7

In the saga of trying to figure out where this phantom page is coming from I decided to host the site on my local machine and see if it was ASP.NET MVC 2 itself or my host. If you are reading this I assume you already know how to use IIS and create a web application. The issue i was having is that I needed the external service Web-Sniffer to get my site as a GoogleBot. So you will need the following to open up your site. A word of caution, this opens a port on your machine and could potentially be a security hole if left open.

What You’ll Need To Start

  1. Your Router IPN
  2. Your Internal IP Address
  3. Your External IP Address
  4. Your Web Application Port Number

Forwarding Some Ports

First log into your router using the IPN address. It is usually something like 192.168.1.1. Log in and forward the Web Application Port to Your Internal IP Address. This depends on your router so consult your manual about the specifics.

Opening Some Ports

Although your ports are now forwarded to your machine, all traffic will be blocked by the Windows Firewall. This next step will open those ports.

1.) Open up Control Panel and click System and Security

image

2.) Next Click Windows Firewall

image

3.) Next click Advanced Settings on the left.

image

4.) In the new window click Inbound Rules, Then Click “New Rule…” on the right

image

5.) Then in the new window select Port and click Next

image

6.) Proceed to type in your Web Application Port Number in the textbox

image

7.) And then just keep clicking next until you are done.

Now To See The Site

Open up your favorite web browser and type your External IP Address followed by the Web Application Port. ex. 99.99.999.99:8080. You should see your site come up. If your site doesn’t come up make sure that you are forwarding ports and that your IIS web application is running. You can also enable and disable the rules in the Windows Firewall Advanced Security panel. Good Luck.

GoogleBots and the Phantom ASP.NET MVC Page

No this is not the newest nerd science fiction film directed by James Cameron, instead this is my current problem with ASP.NET MVC 2 and it is a huge one. I was recently reading Justin Etheredge’s blog CodeThinked and his complaints about his Google page ranking. So being curious to how my main site was doing, I began using several tools to get an SEO grade for my main site. The first tool I used was WebSite Grader to give me a grade on my SEO.

image image

 

This grade was poop! But I read a little more and realized that the page Website Grader had read was not my main page. How do I know that? Well for starters, I wouldn’t be stupid enough to keep a page’s title “Index”.

image

So what is the page the GoogleBot is seeing? I decided to use Web Sniffer a tool that let’s you mimic different clients and this is what I got.

image

WHAT THE F@$*%!!!!!! Where is that coming from. The amazing thing is that a page with a title and an empty body get’s a score at all! Obviously, if you go to my site you’ll realize that this is not the main page. What is also strange is that nowhere in my current application does this view exist, well how could it?!?! So as I tried some other pages to see what I would get, and check it out.

image

Ok so I got one page getting a grade. But something strange is occurring. The crawler tried to traverse a page that doesn’t exist! On the good side it did find metadata.

image

image

So what is the culprit here? I have no clue, but I am leaning towards routing. The strange “Services/About” page is giving me a strong a hint that something is not right. But routing wouldn’t explain the phantom view that I am getting. Who wrote it? Is it from some lost civilization of MVC developers and I was lucky enough to find it? “I See You” phantom ASP.NET MVC view, now you need to go away so my real page can get indexed, UGGGGG!

lucy_and_charlie_brown

Cu3er .Net HttpModule Updates Your Configuration

image

So I’ve been playing around with Cu3er, a great flash component for websites. It gives you the ability to create dynamic looking slideshows with great transition effects. I highly recommend you go over to Cu3er site and check it out. What I don’t like about Cu3er is that you can’t point it at a directory and let it pick up the image files dynamically. So I decided to help the .Net crowd with this little speed bump. I’ve done all the tedious work of mapping Xml to objects (trust me, I dislike doing this).

The main goal was to be able to drop images into a directory and update the configuration. I didn’t want to exclude anybody using Asp.Net, regardless whether you are using WebForms or ASP.NET MVC. So I finally ended up going with an HttpModule. The code executes every time a request is made and checks to see whether the contents of the image folder have been updated. For me it isn’t quite ideal, because I am reading the file system every time a request is made. I attempted to to use FileSystemWatcher but I couldn’t seem to get it firing in an ASP.NET environment.

So what are the advantages to using this HttpModule?

  • Minimal editing of Xml. Just setup the main settings node in the config.xml file and it will be preserved.
  • Could add great functionality to a CMS or dynamic site.
  • Configurable from a configuration section

So What are the disadvantages

  • Can only define one type of transition for all images.
  • It is an HttpModule that fires every request (not ideal in my mind)

How do you make it work better for you?

  • If you are using Asp.Net WebForms, create a HttpHandler that creates the configuration every time the config.xml is requested.
  • If you are using Asp.Net MVC, create a controller action that returns a ContentResult containing the config.xml every time it is requested.

This is still an initial start to what I think can be a great helper to an already great flash component. Maybe V2 of Cu3er will have this functionality already built in, so this could be obsolete by then as well. But until then you are welcome to use this library and modify this library. I consider the code I wrote as an Alpha, if that. Realize that there could be bugs. Their is no warranty or guarantee expressed or implied (a little CYA).

To make this solution work you will need to do the following.

  1. Add a reference to the Cu3er .Net Library or Project to your web project.
  2. Add the configuration section to your web.config
  3. define the directory path to watch, and the location of the config.xml
  4. define the Cu3er module in the HttpModules section
  5. import the Html and Swf into the page you’d like to use Cu3er.

Check out the example I included with the Cu3er .Net project to see how to accomplish the steps above, and be sure to read the Cu3er documentation (the example is in ASP.NET MVC, but doesn’t really use the features of ASP.NET MVC to accomplish the goal).

Cu3erExample

Oldie But Goodie : Open Flash Chart – Fixing Open Source

AstroZombies

This is from my old blog “Monster’s Got My .Net.” I didn’t realize that there was link to this on the OpenFlashChart site, so I am reposting it here for anyone that would like to use the code. Hope I didn’t inconvenience anyone.

So if you have ever had to write a report of any kind, you know how much your clients are itching to have some kind of chart on the page, and something with a lot of pizzazz. Well the problem is that those charts usually can cost you a pretty penny. Companies like Telerik and Infragistics offer great products, but for those with a budget (you cheap bast’d) there are great open source alternatives. The problem with open source sometimes is that it usually written to support multiple web technologies and not just ASP.NET. Everybody knows ASP.NET is the best and obviously these open source projects are written with a lapse in judgement, but forgiveness is the best policy because these projects can be awesome (just kidding about the lapse in judgement).

OpenFlashChart.zip (694.51 kb (Visual Studio 2008)

What I found in my search was Open Flash Chart,which is amazing. So I downloaded the project and installed it, and it had a .NET example in there (in chinese) and it worked but I didn’t like how it worked. I then looked on CodePlex and found someone who implemented a cool version of Open Flash Chart, but it didn’t work with the newer Open Flash Chart build. The newer version uses JSON. I decided to take both projects and merge them together to make a better mouse trap.This project was written using some of the new features of C# 3.0, so if you need to run it in 2005 then you might need to modify some of the code.

There are three aspects to this project: the ASP.NET Control, the Charts, and an HttpHandler. If you want to see the details of the infrastructure I suggest you look at the original author’s post, I only take credit for fixing it, but he wrote the ASP.NET infrastructure originally.

If you are intereseted in an Open Flash Chart control you can download the assembly here. I will also try to contact the original author and get the latest version on codeplex.

OpenFlashChart.zip (694.51 kb) Visual Studio 2008

Note: The HttpHandler solution utilizes cache, which works until you try to use it on load balanced machines without distributed cache. You can point the control to data pages as a work around. Play around and see what’s in the code. All credit goes to the original authors, I greatly respect their work and have included credit in the example project.

Update : How Ironic, the download to the fix didn’t work. I think it works now so you can download it.

Chrome Hidden Feature – Search Other Than Google

I love using Google chrome for my daily browsing, it just loads fast and does the job I need it to do (although I love FireFox as a developer). Anyways, I love using the quick search feature they have built into the browser. If you don’t know what I’m talking about I’ll show you.

First you type in Google.com, like below.

image

Then you press the TAB key, and you get the search box.

image

Nothing new here if you are a regular chrome user, but check this out. What if you don’t like Google (I bite my tongue a little as I say this). What if you like Bing? What if you like Yahoo!? What if you want to search Wordpress.com?

image

image

image

Well all you have to do is type the address and press tab. Pretty cool if you ask me. This trick only works with certain sites, so play around with a few and see if you can’t discover one that is search enabled through the Chrome awesome bar.

No longer waste time navigating to the front page of a search engine, you could use those extra seconds for something more useful.

New Year – New Developer

So we are sitting on what is the precipice of a new year. We can either choose to change and evolve with the times, or we can stay stuck in our ways. I have decided to make some new year’s resolutions to make me a better person and developer.

1. Get Into Shape

As developers we can spend a lot of our time on our butts, up to 8 hours a day. That is why I need to make a strong effort to be active. My definition of active is a solid hour of exercise five to six days a week. Exercise is only part of the solution. Did you know your body expends more calories digesting food then it does when you exercise? That is why I have to make an effort to eat less calories. Now that the holiday season is over, the temptation of gorging is gone with it. And finally, cut out all high-sugar drinks. Developers live off of energy drinks but each can of energy drink can be as much as 400 calories. That is equivalent to the calories found in a bagel! Replacing those drinks with water can cut out a lot of unnecessary calories.

2. Work On My Communication Skills

I can talk to people, but sometimes I don’t fully get my idea across. This can cause frustration on both my part and the listener. That is why I have to work on my communication skills. I will do this by being more conscious of the words I say, listen deeply to my counterpart, and being less abrupt with my answers. I will also be working on my vocabulary. Adding words to my vocabulary can give me a more diverse set of words to express my ideas and intentions.

3. Swear Less

Swearing is a powerful tool when used properly. It can express frustration, anger, and happiness all in a couple words. There have also been studies that show swearing can lead to better rapport between co-workers. That being said, I have to remember that there is a place and time to use certain words and phrases. For example, a holy place is no place to start dropping the F-Bomb.

4. Be More Systematic

I am trying more and more to depend on systems to make me more efficient and dependable. This will help me reduce times where I am just thinking of what to do instead of doing what I need to do.

5. Be More Assertive

Over my life I’ve learned that people can take advantage of you if you let them. They can also mistake your kindness for weakness. Letting the other party know why I won’t do something, or the conditions on what I’ll do given a task will make my life much simpler.

6. Give Love to the People that Deserve It

There are a lot of important people in my life, and some not that important. Giving more preference to those I love will make everyone happier.

7. Read, Read, Read

It’s surprising how much more knowledgeable you get by just reading what other people are doing. So I am dedicating 2010 to reading more.

The year is early and things could change, but for right now these are my resolutions. Do you have any?

Main Site Now iPhone Enabled

Have I pronounced my love for ASP.NET MVC yet? Well if I haven’t then let me do it now. I love you ASP.NET MVC! With very minimal effort, about 3 hours, I was able to create an iPhone version of the main site of Aqua Bird Consulting. I used JQTouch for the iPhone functionality, and used a new view engine to determine whether your coming in through an iPhone. Check out the pictures below. I’ll be pushing this nice feature out pretty soon. I still need to delve deeper into JQTouch, but I am confident that most ASP.NET MVC applications can be converted to an iPhone version with no effort at all.

photo photo 2photo 3