Part 2 – Starting the Project and Bootstrap Integration

In the previous article. I defined the user stories for the web site RateMyMehndi.com as well as I selected the technologies that I would be using to build this application. In this blog post I will directly dive into starting the project, and integrating it with Twitter Bootstrap to get a rich HTML5 template ready to start building our application.

Setting up the Visual Studio Project

Before you get started with the project make sure that you have ASP.NET MVC 4 installed for Visual Studio else you can download it from ASP.NET MVC 4 Beta. Once you have everything in place, fire up Visual Studio (as administrator since we want to create a new IIS project) got to File menu –> New Project to bring up the New Project dialog (Figure 1 below).

 
Figure 1: New Project dialog

Expand the Visual C#, Web project templates and select the ASP.NET MVC4 Web Application template. You can also see that I prefer to store my project in the c:\apps folder rather than in My Documents folders which Visual Studio tries to save by default. You can choose where you want to save your folder so that you can easily access it later. I have also provided the name of the project and solution as RateMyMehndi. Click OK to create the project, and VS opens the New ASP.NET MVC4 Project (Figure 2) dialog.

 
Figure 2: New ASP.NET MVC4 Project

There are different MVC4 templates provided by Microsoft which act as starting points for different kinds of applications. I want to start from scratch so I select the Basic template and click OK to create the project. Visual Studio will go ahead and create an empty MVC4 project with basic JavaScript's and some other plumbing files but no controllers. If you do not want any JavaScript files to be generated then Empty project template can also be selected. Now we have the project setup we can move ahead with building our application.

Setting up HTML5, CCS3 boilerplate template

UI Design and consistency of UI is one of the most important aspects of any website. Since I plan to use HTML5 instead of starting the UI from scratch there are some very useful HTML5 based boilerplate templates which not only provide a standards compliant HTML5 markup but are also supplied with a rich CSS3 and JavaScript framework making it very easy to build good looking, consistent and standards compliant websites very quickly. These templates also provide responsive layouts for mobile browsers. There are a wide variety of websites offering such templates like 960 Grid System, 1kb Grid, Blueprint CSS, one of the most popular and widely used template system from Twitter Bootstrap, HTML5 Boilerplate and Initializr which uses the HTML5 Boilerplate template but provides far more flexible options. Template systems like HTML5 Boilerplate go a step ahead and also provide lots of commonly used IE hacks as well as other important tags and scripts to make your development experience faster. Which template system is the best? Well it totally depends on what are the needs of your project, each one of them allows you to configure the various elements of the template and download a custom version so that the size of the template is at minimum. Its interesting to see how much effort has been put in to minimize the size of these templates while providing some very rich features for developers.

In my RateMyMehndi web application, I have decided to use the template from Bootstrap since its one of the simplest and most popular template available. You can look through the Bootstrap website to learn more about using the template. Download the zip file from the Bootstrap website and extract its content to a known folder.

Merging Bootstrap with ASP.NET MVC4 template

When you extract the Bootstrap zip file it contains 3 folders css, img and js containing respective files. In order to use them we need to copy over the files into our Visual Studio. Expand the css folder from Bootstrap and copy the bootstrap-responsive.min.css file into your visual studio projects Content folder, in my case the full path to copy the file is C:\apps\RateMyMehndi\RateMyMehndi\Content. You can see that bootstrap provides 2 different style sheets one is normal bootstrap.css and another is bootstrap-responsive.css the later allows you to define layouts that automatically adapt themselves on mobile devices. Hence I choose to use the responsive layout css. They also provide the minified versions of the same css file for faster download on the client side, again since I do not plan to debug or modify their original css, I use the minified version.

Then from the js folder copy the file bootstrap-min.js to your visual studio projects Scripts folder, in my case the full path to copy the js file is C:\apps\RateMyMehndi\RateMyMehndi\Scripts. Bootstrap provides a single JavaScript file bootstrap.js as well its minified version. Since I do not plan to debug or modify their JavaScript, I use the minified version directly.

Once the files have been copied over, fire up Visual Studio and open the Solution Explorer window. In the Solutions Explorer window click on the Show All Files icon (circled in Figure 3 below). This will show all the files in the project folder, the ones which are not included in the project are shown greyed out.

 
Figure 3: Solutions Explorer – Show All Files

You can see from Figure 3 above that under the Content folder the file bootstrap-responsive.min.css and under the Scripts folder the file bootstrap.min.js which I had copied over are shown in gray. Right-click on the bootstrap-responsive.min.css file in Solution Explorer and select Include in Project from the context menu. Repeat the same step for including the bootstrap.min.js file into the Solution. Once these files have been included in the solution you are ready to use them in your project as well as when you are ready to deploy the application these files will get automatically get copied in the final deployment package. The next step is to delete the Site.css style sheet file under the Content folder, this file contains the default styles defined by Microsoft in the empty template, since we want to use the styles from the boostrap template its best to delete the default file. Right-click on Site.css in Solution Explorer and select Delete from the context menu and confirm the alert to delete the file.

In Solution Explorer expand the App_Start folder and open the BundleConfig.cs file. This file has the configuration for bundling of JavaScript and CSS files in MVC 4. Bundling is a great feature of MVC4 which allows you to bundle multiple different JavaScript/CSS files  into a single JavaScript/CSS file at runtime. This significantly reduces the round trip the browser needs to make to download all the separate JavaScripts/CSS files required by the application, thus speeding up your applications load time. We need to update this file to include our bootstrap files in the Bundling configuration.

using System.Web;
using System.Web.Optimization;

namespace RateMyMehndi
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.*"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui*"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap-*")); 
	   
	    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap-*"));

	    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

Listing 1: BundleConfig.cs

If you look at line number 23, you can see that I am calling the Add method on the BundleCollection object bundles to include a new script to the bundle. I create a new object of type ScriptBundle giving it a virtual path of “~/bundles/bootstrap”, this virtual path name will be used when we want to inclue this particular script bundle on our page. Then I call the Include method of ScriptBundle class and pass the virtual path to the actual JavaScript file to include in the bundle. You can either provide the full name of the file or wildcard character * is also allowed. 
On line 26 similar to the above code, I add the bootstrap style sheet to the bundle using the StyleBundle class instead.

Rough Site Layout

Now that I have the project setup the next step for me is to build a rough layout of the various elements on the website. This helps me setup the basic layout template in my project. Based on the layout required I will update the _Layout.cshtml master template file so that it provides areas to plug-in partial pages. Figure 4 (below) shows the various high-level elements of my website, the site is divided into 3 common areas of header, content and footer. The header area holds the logo and navigation menu. The content area will hold the main mehndi design, rating and comments for the design as well as a side column to show case the top artists and top mehndi designs. The footer will hold the usual copyright notice.

 
Figure 4: RateMyMehndi rough site layout

Based on the rough layout that I have decided to use for the website, the next step is to update the _Layout.cshtml layout file for my MVC4 project to represent the above structure using HTML5 semantic markup. Open the _Layout.cshtml file from Solution Explorer, expand Views –> Shared. In MVC4 project this folder contains the views which are shared across screens.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
</head>
<body>
    <!-- Start of Bootstrap container -->
    <div class="container">
        <!-- Start of header Row -->
        <header>

            <div class="row">
                <div class="span7">
                    <h1>Welcome to Rate My Mehndi.com</h1>
                </div>
                <div class="span5">
                    <!-- Show Facebook Login details -->
                </div>
            </div>

            <menu>
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav">
                                <li class="active"><a href="@Url.Content("~/")">Home</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </menu>

        </header>
        <!-- end of header row -->
        <!-- start of content row -->
        <section>

            <div class="row">
                @RenderBody()
            </div>
        </section>
        <!-- end of content row -->
        <footer>
            <!-- Start of footer Row -->
            <div id="footer" class="row">
                <div class="span12">Copyright 2012 - RateMyMehndi.com. All Rights Reserved.</div>
            </div>
            <!-- end of footer row -->
        </footer>
    </div>
    <!-- End of bootstrap container -->

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Listing 2: _Layout.cshtml containing basic page layout 

Listing 2 shows the _Layout.cshtml file updated with basic HTML5 mark-up using bootstrap. In bootstrap, the page layout is contained within the top level div at line 16 with the css class container, which contains all the inner layout elements on the page. As shown in Figure 4 the page is divided into three major parts Header, Container and Footer using the HTML5 tags Header, Section and Footer respectively.  Within each of the 3 sections I have defined div elements with css class row from bootstrap. This element allows you to define separate rows within the container div defined below body tag. Under the header I have defined a navigation menu using the HTML5 tag Menu. The menu tag contains an unordered list with the menu items, right now I have defined only one link to Home. The bootstrap css classes navbar, navbar-inner, container and nav are all used to defined a navigation bar. Since I am using the bootstrap css files, the menu item is automatically styled by used the above tags.

This concludes this blog post where I have created an ASP.NET MVC 4 project in Visual Studio and integrated it with Twitter Bootstrap. In the next post I’ll start working on the first user story and integrating with Facebook.

Part1 – User Story Definitions

Overview

Every year technology keeps changing and as developers we need to keep track of the latest upcoming technologies to stay relevant in this competitive game. In this series of blog posts I am going to document my journey of creating an HTML5 based website trying to use the latest relevant technology. The whole point of this series of articles is to give the you a glimpse of the process and few decisions that are involved in building a website. Often we come across various articles and demo’s which do a good job of keeping focus on the code. My motive in this series of articles is to not only show the code, but put more focus on the background process which involves lot of decisions and choices that are faced when creating a real world website.

RateMyMehndi.com – The Website

In this series of articles I’ll be documenting the process of building a Mehndi Design ratings website. To understand more about Mehndi/Henna designs you can read up further at Wikipedia. In short Mehndi/Henna is a traditional form of temporary skin tattoo, extremely popular in Asian countries. The website RateMyMehndi.com will act as a platform for artists as well as end users to post their Mehndi designs and also rate and comment on designs posted by other members. The site features will be very similar to many other rating websites like RateMyKitten, RateMyPuppy etc. 

Why build this site?

As stated earlier, the point of blogging these articles was to try to understand the background process and choices. Likewise, when I was looking to spend some time updating myself on the latest technologies, I wanted to build a relevant website that could be quickly coded as well as something that was useful too. Going through several ideas and finding them already done, the first step was to pick a niche area that was unique as well as had enough users market. In my case, I do know that locally Mehndi Designs are very popular amongst ladies, Mehndi application is considered auspicious and used in many religious ceremonies like weddings etc.
Although, Mehndi design is fairly popular amongst teens, googling I could not find a single large community which focused entirely on Mehndi designs. Another observation that I made locally was that lot of Mehndi artists are from economically backward sections of the society, not having enough resources to promote their art online. Today they purely rely on word of mouth advertising to get new customers. I wanted to build a platform where they could showcase their designs, helping them in marketing their art.

So out of these observations I figured its best to build a Mehndi design ratings website. It served the goal of being in a niche area without a lot of competition, as well as it has social aspects which has the potential for good designs going viral. This would benefit the website as well as the artists. It also served my purpose of being some what smaller in scope so that it can be built quickly. 

Registering the Domain Name

Once the idea for the website was finalized, one of the first things I did before getting into the details of building the website was to register the domain name. It’s the single most important thing for building a website. Unless you have a good domain name that the users can remember and relate with, its going to be hard to drive traffic to the website. Lucky for me, the domain name RateMyMehndi.com was available. I have been using eNom as my domain registrar for a long time since I manage a lot of domain names. But there are several other domain register services ranging from GoDaddy, Yahoo Domains to Verio that you can use. There are many service providers who offer both domain registration as well as hosting as a combined package you can sign-up the one you feel provides you the best price and service. One word of advice is that make sure your domain registry service provides you with a comprehensive domain control panel. The domain control panel allows you to configure finer domain name related settings of DNS, Host Servers, Email Settings etc. I have found at times my friends purchasing domains from resellers, who try to sell domains at a very low price but do not provide them access to the domain control panel. This issue further escalates at the time of renewals when they charge a much steeper price for renewals, so beware of such dubious domain registrars and make sure you register your domain with a good company.

Agile/Scrum Project Planning

Its important to plan out any project before starting it out so that we have a definite path of action. These days the most popular way of project management is Agile, and this is the path I will be taking to plan my website. Although I’ll be alone building the website, the planning part of Agile methodology will help me stay focused on building the application. The aim of this blog post is not to explain the agile methodology, if you are interested to know more, then you can read up further at Agile Software Development. Even for single developers’ parts of agile methodology are very handy to define the requirements as well as stay focused on the path ahead.

User Story Definitions

The first step in planning is to define the user stories that describe the project. I am playing multiple roles over here of being the client as well as the developer, so we can’t have all the key roles that are required in Agile methodology. But still I find that user story definition on a high level is also very useful to help me expand the website definition and get a clear understanding of the work involved. There are many free and paid tools available for user story planning and management, ranging from simple ones to full blown tools like Visual Studio Team System. I looked at some of the free tools but found it far more easier to capture my user stories in an excel sheet, we use Visual Studio Team System for professional projects in my company Systenics Solutions. Below I am defining some of the top level user stories which I will be building in the application, it will also show the direction of my thinking. There are several more user stories which could be possibly defined in the user story backlog for future usage, but for now I’ll list only those user stories which I plan to implement in the website.

1. As an anonymous user, I can register on the website using Facebook credentials.
2. As a registered user, I can login to the website using Facebook credentials.
3. As a user (anonymous/logged in) , I can view Mehndi designs
4. As a user (anonymous/logged in), I can navigate between different Mehndi designs
5. As a user (anonymous/logged in), I can view the top Mehndi designs of the month
6. As a user (anonymous/logged in), I can view the top Mehndi artists of the month
7. As a user (anonymous/logged in), I can view ratings for a Mehndi design
8. As a user (anonymous/logged in), I can view comments for a Mehndi design
9. As a user (anonymous/logged in), I can view all Mehndi designs uploaded by a selected user
10. As a user (anonymous/logged in), I can share the Mehndi design on various social networks like Facebook, Reddit, Tumbler
11. As a user (anonymous/logged in), I can flag a Mehndi design as inappropriate
12. As an authenticated user, I can upload Mehndi designs
13. As an authenticated user, I can rate Mehndi designs
14. As an authenticated user, I can comment on Mehndi designs

Once the user stories are outlined are the next step is to define the user stories in details as well as prioritize the user stories.

Technology Selection

On one hand as a project planner its important to work with the client to define the user stories and map out the users requirements while on the other hand as a technology expert it is important to determine the mix of technologies that will be used to build the application. We need to look at the clients requirements, the end users requirements as well as the available tools in the market and select a mix of technologies which will be the best for the project. Since our application is going to be a web based application, we can either use the traditional ASP.NET Web Forms to build the front end or use the latest ASP.NET MVC project to build the web application. I have found that MVC framework provides you with much better control over the HTML that is generated in the browser as well as MVC’s default URL routing feature enables us to build SEO friendly URL’s. Hence on the frontend I choose to use ASP.NET MVC 4 as the project type.

As the database engine I choose to use SQL Server Express, for the simplest reason that this web site is not going to be data intensive hence the 10GB per database limitation works fine for us, and using SQL Server Express is free. Alternatively, we could also use MySQL if we wanted a free database. The benefit of MS SQL Server Express is that you can seamlessly upgrade to a paid version of SQL Server, you just need to change the database servers and everything works!

On the tooling side, I will be using Visual Studio 2011 Beta, could you alternatively be using Visual Studio 2010 with ASP.NET MVC 4 installed.

In this blog post I have covered the requirements of RateMyMehndi website as well as I have selected the technologies that I plan to use to build this project. In the next blog post I’ll start RateMyMehndi project and start building out each of the user stories in the order of their priority.