Secure Login from an Unsecure Page

I am currently coordinating the implementation of a complete reskin of a client web application. One of the things that has changed is the login flow. The header of the master page now has a place for the user to enter their credentials and log in from any page, whether that page is secured or not. That presented an interesting dilemma. We had previously used a separate login page that would check for a secured connection and redirect to a secured connection if one wasn’t being used. Now, we needed to allow for a secure login from an unsecure page.

Turns out that doing so isn’t too difficult. As long as the login form has an action that is pointing to a secured page, such as ‘https://www.sweetapp.com/login’, the credentials would be encrypted prior to posting the data.

When a secured page is requested, there is some hand-shaking happening behind the scenes between the browser and the server. This hand-shaking takes place before any data is passed around, which allows us to send login credentials from an unsecured page and not have to worry about them flapping in the wind. Pretty sweet, huh? As long as the page you post the data to grabs the credentials from Request.Forms instead of just Request (to keep things limited to POSTs and not GETs), you are good to go.

Of course, there is always a catch. Ours was that we were working with an ASP.NET Form. As you may know, everything on an ASP.NET Form is typically inside of a <form> tag, which is how post-backs happen. Since <form> tags cannot be nested, I needed to put the login form outside of the server-driven form and position it back into place in the design with CSS. Not too difficult, but something to keep in mind when you are faced with this same scenario.

There you have it! A secure, inline login that will make the user experience flow nicer and keep the security your site demands.

Share

Building a Website From Scratch | Part 4 – Bring It Home to ASP.NET

In Part 1 of the Building a Website Series, we talked about taking a graphic design and prepping it for the web by slicing it up.  In Part 2, we dove into a crash course on CSS to prep you for actually coding the website.  In Part 3, we put it all together in a static HTML page.  Now, let take a little dip into .NET land and convert our work so far into a ASP.NET web app.  This will be the first time where we start focusing on a specific server-side technology.  Up to this point, you could go with whatever server-side technology your heart desires.  But, since I am a .NET guy, it’s time to bring it home.

I am working with Visual Studio 2008, so that is the IDE I will be basing this talk around.  The plan is to take the static HTML page that we created in Part 3 and create a Master Page out of it.  Then, we will create a ASP.NET Server Control out of the container we created, so we can just drop the container control on the page wherever we want to use it.

Create the Project

For starters, you’ll want to create a new ASP.NET Web Application, giving it whatever name you want (I used MySweetWebApp).  You’ll want it as part of a solution, to enable clean separation when you actually start building out the functionality and guts of your web app.  Once you have the app created in Visual Studio, you will see a single file, Default.aspx.  That file will be of use to us later, so just leave it alone for now.  The first thing that we need to do is bring over the image files and css files that we used for the static page.  So, just copy those from their original location and drop them into the root folder of the web app.  Note that the root folder of the web app is likely a sub-folder of the solution itself, if you just went with the defaults that Visual Studio offers when you created your project.

Before you are able to see the files you just copied over in the Solution Explorer, you have to add them to the project.  To do this, right click on your web app project and choose Add > Existing Item…  This will open a file dialog to select the css files and the images folder.  Select them and click Add.

Now that the files are there, we will start adding our pieces, beginning with the Master Page.  Go ahead and find your web app project in the Solution Explorer (mine is called MySweetWebApp.csproj), right click on it and go to Add > New Item…  Once the Add New Item dialog is showing, click on the Web Category, to filter out the stuff we don’t need.  On the right, you should see an option for Master Page.  Click on the Master Page option and give it a name of your choosing (I will be using SweetMaster.Master).  Once you have added your Master Page, you will see that it looks something like this:

For the most part, it looks like a standard HTML page.  A few notable exceptions are the <%@ Master Language=”C#” … %> definition at the top and the tags in the and .  The first one is the server-side code that defines the page as a Master Page, this is required for it to function as a Master Page.  The second are ASP.NET server controls, specifically ContentPlaceHolder controls.  Those define where you can place variable stuff, the stuff that each page will define for itself.  Essentially, everything else defined in the Master Page will be exactly the same for every page that uses that Master.  It’s the ContentPlaceHolder controls that will give each page the capability of defining new elements.  With that in mind, it’s time to start modifying the Master Page to make it ours.

Flesh out the Master Page

Let’s start in the header.  Our original static page has the style sheets included in the header, so let’s bring those in.  There will be a slight modification, though, to make sure that the correct path is always used:

There are two differences to take note of here.  The first is the href attribute has ~/ added to the beginning.  The second is the addition of the runat=”server” attribute.  Those two attributes work together with ASP.NET to ensure that the file paths are injected on the server side and they are always relative to the root of the web app file structure.  Adding those two lines makes your Master Page header look like this:

Visual Studio added id attributes to both of my CSS links, but that doesn’t really affect us.  Note that by having the ContentPlaceHolder server control in the header, it gives pages that use this Master Page a chance to include other links into the header on an individual basis.

Now, for the body.  We’ll want to keep the ContentPlaceHolder control in the body as well, but we’ll want to move it into the middle of our markup.  So, you can do the fudging if you like, but I’ll just give you the code to make it happen:

Note that the only real difference between the static HTML body code and the code we are using for the Master Page is the addition of a <form> element and the ContentPlaceHolder control.  The <form> element allows ASP.NET to do postbacks, which some ASP.NET controls require.  The ContentPlaceHolder control is added to our content div, which his where the main content of the page is intended to go.

Another quick note…  The menu portion will be static in our case, so you will need to add links that you want to show up here by hand, as you add more pages to your website.  You will most likely want to convert to using the ASP.NET Menu control to make things easier going forward, but that control requires some background that I will not be going into with this post.

One more quick addition we will be adding is another ContentPlaceHolder control as the last element in the to give us a place to put any javascript includes that individual pages may require:

With that, our complete Master Page looks like this:

Now that we have our Master Page set up, let’s go back to our Default.aspx page and put it to use.  At the top of Default.aspx, add the attribute MasterPageFile="~/SweetMaster.Master" to the Page definition.  Then, you can delete the rest of the contents of the page and put in your Content controls (which match up to the ContentPlaceHolder controls we added to the Master Page):

If you run the web app now, you should see our page come to life with no content.  Play around with that page a little by added something to the ContentPlaceHolder1 control.  You should see the page change as you do that.  Next we will create a control for our container to give our content a place to hang out.

Our first Server Control: The Container

In the Solution Explorer, right click on the web app and choose Add > New Item…  Select the Web category and choose ASP.NET Server Control, giving it a name of your choosing (I’m using SweetContainer.cs).  You will see that it defines a class for you that derives from WebControl.  Visual Studio automagically adds a property called Text to show you how it is done.  That property is useful to us, but needs to be renamed to Title.  That gives us the following code:

There are three methods that you can override, which are of importance to us here: RenderContents (as shown above), RenderBeginTag, and RenderEndTagRenderContents will allow you to define what will be rendered for the guts of the control.  In our case, we want to be able to drop the control on a page (or even another control) and add content to it using markup.  So, the RenderContents function isn’t of much use to us here and can be removed.  RenderBeginTag and RenderEndTag do what their name suggests, render the beginning and ending of the control.  Those are the functions that matter the most for us.

RenderBeginTag will be where we put the code for rendering out the title and tags before the content and RenderEndTag will be where we put the code for rendering the tags after the content.  Also, to enable us to add markup to the content of the container, we need to set some class attributes: ParseChildren and PersistChildren.  So, here is the code for the container control:

You’ll notice that ParseChildren and PersistChildren are both added as class attributes.  You’ll also notice that RenderBeginTag and RenderEndTag are both fleshed out by outputting the tags required before the content and after the content as well as adding the title of the container.  Now we have a control that can just be dropped in wherever we want a container, without having to copy all the junk that comes along with it every time.  To use it, the page (or control) needs to register the control:

The control needs to be added with the prefix defined by that registration (in this case the prefix is cc1):

You’ll note that I added a paragraph for the content of the container.  If you want to use the Visual Studio designer, you can see that your control is added to the top of the tool box, when in design view.  Just drag it onto the page where you want it, setting the title if you want.  Sweet huh?

Conclusion

This time around we talked about taking your static HTML page Part 3 and bringing it into ASP.NET.  We created a web application for it and the Master Page to define it.  Then we created a custom server control to use for the container, saving time and effort for the future.

Now we are sitting comfortably in .NET land again (or uncomfortably, depending on your perspective, I guess).  You can use this web app foundation to go forth and multiply!  Or something like that…  Happy coding!

Share

Building a Website From Scratch | Part 3 – Stand It Up

In Part 1 of the Building a Website Series, we talked about taking a graphic design and prepping it for the web by slicing it up.  In Part 2, we dove into a crash course on CSS to prep you for actually coding the website.  In this part, it’s time to take what we’ve done/learned so far and make something useful out of it.  Are you ready for this action?  Hope so…

Foundation

For starters, we need just some simple markup:

That is the foundation of a web page.  You’ve got your DOCTYPE definition (we’ll go with XHTML 1.0 Transitional), you’ve got your (the root of all the content), you’ve got your (where we will put our CSS includes) and (which defines what the browsers will display as the page’s title), and you’ve got your <body> (where all the visible elements go).

Go ahead and save that markup with a filename of your choosing, ending with .htm or .html.  I’ll be using SweetDesign.html.  Next, we need to get our external css file created.  For that you can just create an empty file with a name of your choosing that ends in .css.  I’ll be using SweetStyle.css.  These can be in the same directory, if you like.  On bigger projects, you’ll probably want to put the css in it’s own sub-folder, but that isn’t a big deal here.

Now that you have the css file created, you’ll need to link it into the html file.  You do that by modifying the <head> as follows:

What we have done here is tell the browser to load the file SweetStyle.css and use it as the stylesheet definition.  Before we go any further, we also want to include a reset stylesheet.  Why?  Because every browser adds default styling to elements and that styling may differ across browsers.  If we include a reset stylesheet, that eliminates all the default styles and puts us on the right track for cross-browser compatibility.  We’ll use the one defined on Eric Meyer’s Blog:

Go ahead and copy that into a file called reset.css, right next to your other css file.  With that we will need to further tweak our <head> as follows:

Notice that I have added the include for reset.css *BEFORE* the original css file include.  That is very important because we want the reset file to be applied first, clearing the default styles for all browsers.  Then our styles can be applied, trumping the reset styles that we want to change.

Now that we have the style sheet and html foundation in place, make sure to copy your sliced images from Part 1 into a subdirectory of your choosing.  Then we can start using the images on the page.

Time to Rock

Before we go any further, a quick disclaimer…  My goal here is to help you get your feet wet by creating your first table-free (or maybe just first) web page.  I don’t want to overwhelm you with complex details, so don’t assume that this approach is the only way to mark up a page.  I will try to keep the markup as clean and simple as possible, but there will definitely be room for improvement once you start to understand the concepts.  I will leave it as an exercise for you to make those improvements.

Now that we have the foundation in place, it’s time to do this thing.  Take a look at the graphic design from Part 1.  You will notice that there distinct vertical sections (rows, if you will).  One is the blue bar at the top, including the logo.  The next is the menu bar.  Finally, there is the gray body section.  Those sections are there for a reason, and I will now show you that reason.  To get the markup of our design started, we will modify the <body> tag as follows:

Notice that I have added one div tag, with the id layout, containing three <div> tags to the, each with an id (header, body, footer).  These tags will make up the logical sections of the page.  From this foundation, we will further elaborate to make the page begin to take shape.  layout will define the styles for sizing for the whole design and the other tags will define elements for their own individual sections.

We’ll throw down some foundation styles to get the ball rolling:

This sets up the background color and gradient as well as the width and positioning of the actual layout.  Now, it’s time to drill down a bit.

Header

Let’s start with the top and work our way down, shall we?  The header is pretty straight-forward in this case.  Still, we will need to elaborate on our foundation a bit to make it happen.  Modify your header tag as follows:

Note that I am using compass directions, W for west (left) and E for east (right), to signify the elements location.  Now, let’s add some style to those tags and see if we can pull this thing together.  Go back into your style sheet (mine is SweetStyle.css) and add the following:

Now, if you view the page in a browser, you should see just the blue header and the gradient background.  If so, you are in good shape.  If not, check your image reference.  Recall that the path defined in the url(…) is relative to the location of the css file that it is defined.

Now lets add a little polish to the left side of the header:

That defines a width and a height, so the image fits perfectly in where it is supposed to go, then it floats it to the left side of the header.  Viewing the page now, you should see a nice rounding out of the bottom left of the header.  Let’s do the same thing for the right side:

This is basically doing the same thing as the left side, but for the right.  Right?  Viewing your page again should show a nice rounding out of both bottom corners of the header.

Let’s round out the header by adding the style for the logo:

This positions the logo absolutely within the header, so that it goes exactly where we want it.  There we have it: header == done.

Body

The next stop in our tour is the body of the layout.  Go ahead and modify the body div as follows:

And add this to your style sheet:

A little explanation here, the body div will be the container for the menu and the actual content.  This is because these are the two things that can actually vary once the design is in place.  So, we have a parent <div> for both of them and add a new <div> for both the menu and the the content.  The menu is where we will put the navigational menu, so let’s start there.  Elaborate on that tag as follows:

That sets up the left and right finishing to the menu, just like in the header, as well as starts an unordered list with links for the actual menu items.  Now apply the following style to your style sheet:

That sets up the background for the menu and both of it’s sides.  It also sets up the styling for the unordered list items by floating them to the left so they play well with our horizontal menu.

For the actual hyperlinks (anchor tags) in the menu, add the following:

That gets us set up with some initial state for the menu links as well a state for when the mouse is hovering over a link.  Notice that there is a margin of 1px on the initial state and the margin is removed on the hover state, BUT a 1px border is added to the hover state.  That is because borders are added to the *outside* of the element.  Since there is no border on the initial state, we need to add a margin (padding would work in this case also) so that we don’t have any bizarre jumping things happening from borders being added and making the link elements bigger when the mouse is over it.  To see what we are trying to avoid, comment out the margin in the initial state, reload the page, then mouse over a link.  You should notice that it the text jumps a pixel.

That wraps up our menu.  Now, any content we add to the page will go inside the content div.  We’ll gloss over that for the moment and come back to is shortly.  Let’s finish up the layout with some quick additions to the footer.  Add this to your html:

And add this to your stylesheet:

We just added a simple footer that has some text (or links) of your choosing at the bottom of the page.  The footer will get pushed down to make room for whatever content you add to the page.

Containers

Now, lets get back to the content of the page.  In our awesome design, there is a container for each section of content to reside in.  It gives the content definite separation.  So, let’s get that bad boy standing up as well!

This is going to look like a lot, but go ahead and add this markup to your content div:

Let’s start from the outside and work our way in…  The class box is the outermost element for the whole container.  From there, we have three logical rows: the header, the content, and the footer.  The header has the classes boxN* (Note that the use of the compass notation again), the footer has the classes boxS* and the content has the remaining ones.  If you look at each logical row, you will see the usual definitions for left, right, and center.  Note that there is a div at the bottom with the class clearboth.  That is a simple way to make sure that the content element contains all the containers the page may have by clearing all floats.  That should stay at the bottom and any additional containers will be added above it.  Now add the following to your stylesheet:

That’s a lot of css, but each definition is pretty simple if you look at them closely.  The key point to take note of here is that the elements on the left and right have their background images starting in various locations and repeating in various ways.  That is what makes this container look correct.

Now that you’ve got your container set up, copy that markup and drop a few of them in the content element.  You’ll notice a three column layout, which is a pretty good place to start.

Conclusion

This post was a doozy!  There was a lot of info to cover here, but none of it is too complex.  If you take each part as a section, you’ll see that things break down into manageable parts.

We covered the initial markup required for a html page and how to include your external stylesheets.  Then we covered how to break the layout down into logical parts to tackle individually, starting from the top and working your way down the page.  Then we covered how to create your containers to give your content a way to have separation.

I hope that this has proven useful for you get get your graphic design translated into a real web page.  You can use this spankin’ new web page as your template (or master page) for all the pages in your website.  Other things that you can do from there include using Javascript and Ajax to make the navigation animated, smooth and flicker-free.  But, that is a topic for another conversation!

Get the code for my design here

Share