Thursday, November 8, 2012

Creating a complete ASP.NET 4.0 website–Blogging application: Chapter One

Instead of giving an example of a code snippet, I’ve decided to write a complete blogging application that will allow us to have users, blast emails, list website resources and above all show blogs in complete form.  This will allow your readers the ability to not only see a website use code, but HOW it uses code.  Along the way I will describe the basic concepts that we need to accomplish to get the application done. 
I have no idea how many chapters this will take, but we’ll find out together.  I decided this method is better as it focuses on the complete application as a whole, while serving code snippets and hints and tips along the way in an organized (book) type format.

The Concept
Here’s what we are trying to do.  Let’s make a web application that can be used either in an internet or intranet fashion.  The site should allow users to read blogs, post comments, rate the blog, and recommend specific blog posts to other like minded users. 

Materials Needed
Visual Studio 2010
.Net Framework 4.0
A website template (Here I would suggest looking HERE for CSS Templates.  Most are royalty free as long as you give proper credit).  I decided on the emerald2 template.  You can view it HERE – Mainly because it functions well in a blog type format.

Lets Get Started
So once you download and extract your files for your template from the website, we need to immediately do some housekeeping.  Lets start with directory structure.  Most developers keep their projects (and websites) in one parent folder with the projects in sub-folders.  Keeping this in mind, lets go ahead and setup this hierarchy.  In your parent project folder lets create a new folder called Blogger.  In the Blogger folder, create two additional sub-folders.  One called DotNet and one called Original.  Place your extracted .zip template files in the Original folder -
image 

So in my C:\Personal Projects\Blogger\Original folder I have placed the extracted files from the template -
image
You can see my files here.  This is so that we always have an original copy of the site incase we mess something up (as it tends to happen from time to time).  Now we need to fire up the old Visual Studio 2010 and get the ASP.NET website template files in place.  Once inside Visual Studio 2010 left-click File | New Web Site… You will be presented with the following modal window -
image

Make sure you are using Visual Basic in the Installed Templates tab on the left, and select ASP.Net Web Site.  Then click the Browse button at the bottom and browse to the DotNet folder we created.  In my instance, it looks like -
image

Click OK.  Visual Studio will then copy/create the files we need in the appropriate directories.  There are a couple reasons why we decided to use an already populated (templated) website.  For once it fits the purpose of using MasterPages.  Secondly, it has a lot of the setup done for us in the web.config (although we will be adding quite a bit there).  Now, before we do anything else, we need to get our images and stylesheet over to the website so we can start making a site that looks like what we want it to.
Go into your Original directory using file explorer and copy the images folder and style.css file into the root directory of the DotNet directory (If you decided to use Free CSS Templates, otherwise it will be at your discretion to decide what files you need).  Now if you go into the Solution Explorer in VS2010, and highlight the project and click the Refresh Button, your solution should look like -
image

Looking at the image above the project is C:\…\DotNet\ and needs to be highlighted when clicking the refresh button which is the second icon from the left above the solution name.
When you created the project, it should have opened to the Default.aspx file.  Additionally, it should have templated some HTML into the file.  We need to everything in the BodyContent ContentPlaceHolder.  After removing the the templated HTML, your Default.aspx should look like -

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" 
AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server"
ContentPlaceHolderID="HeadContent">
</
asp:Content>
<
asp:Content ID="BodyContent" runat="server"
ContentPlaceHolderID="MainContent">

</
asp:Content>

Or something very similar.


Now we need to modify the MasterPage.  Go into Solution Explorer and Double Left Click the Site.master file which should open the file.  Remove everything between the Form tag.  Also, in the Head tag remove the link reference to the style sheet.  Finally in the Title tags, lets add our title as Blogger.  Your Site.master file should now look like -




<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" 
Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<
head runat="server">
<
title>Blogger</title>

<
asp:ContentPlaceHolder ID="HeadContent" runat="server">
</
asp:ContentPlaceHolder>
</
head>
<
body>
<
form runat="server">

</
form>
</
body>
</
html>




Now we need to add our new StyleSheet back into the website.  In Solution Explorer, drag the Style.css file to where it used to exist in the Head tag.  Your Head tag should now look similar to -



<head runat="server">
<
title>Blogger</title>
<
link href="style.css" rel="stylesheet" type="text/css" />
<
asp:ContentPlaceHolder ID="HeadContent" runat="server">
</
asp:ContentPlaceHolder>
</
head>




We need to add a ContentPlaceHolder back inside the form inside the Body tag.  This tells the framework where to display child pages (like default.aspx).  We need to name the ContentPlaceHolder as MainContent so that it matches the same ContentPlaceHolder on child pages.  Your Body tag should now look similar to -



<body>
<
form runat="server">
<
asp:ContentPlaceHolder ID="MainContent" runat="server" />

</
form>
</
body>




Finally, we need to get the template from the index.html file that we downloaded into the MasterPage.  In File Explorer Navigate to your projects folder\Blogger\Original.  Right click on the file and tell it to open in Notepad.  We need to highlight and copy everything between the Body tags.  We will place this in the Site.master in the form tag right under our ContentPlaceHolder, like so -



<body>
<
form runat="server">
<
asp:ContentPlaceHolder ID="MainContent" runat="server" />
<
div id="wrapper">
<
div id="header-wrapper" class="container">
-- Removed for simplicity
</div>
<!-- end #header -->
<div id="page">
-- Removed for simplicity
</div>
<
div class="container">
<
img src="images/img03.png" width="1000" height="40" alt="" /></div>
<!-- end #page -->
</div>
<
div id="footer-content">
</
div>
<
div id="footer">
-- Removed for simplicity
</div>
<!-- end #footer -->
</form>
</
body>




I removed code from the sample for simplicity sake.  You should be able to determine whether we have accomplished the task or not by looking at the sample above.



So now that we have the website template in place, we can hit F5 (allow it to debug) and we will be presented the templated website.  The last piece we are going to accomplish is moving the pieces over to the default.aspx page and correctly applying the ContentPlaceHolder.  If you decided to use a Free CSS Template, essentially we want to take everything (to include) the “content” div that is located inside the “page” div.  If you scroll past the logo, menu and image tags you will find the page div.  Physically click inside the div tag for “content”.  It will grey highlight the tag and if you scroll down you will eventually come across the closing tag grey highlighted (for easy identification).  We need to select (highlight) everything from that closing div tag to the “content” div tag (this includes the div tags themselves).  We then need to cut and paste it into the “BodyContent” ContentPlaceHolder in the default.aspx page so that it will look like so -



<asp:Content ID="BodyContent" runat="server" 
ContentPlaceHolderID="MainContent">
<
div id="content">
<
div class="post">
<
h2 class="title"><a href="#">Welcome to Emerald </a></h2>
<
p class="meta"><span class="date">August 28, 2012</span>
<
span class="posted">Posted by <a href="#">Someone</a></span></p>
<
div style="clear: both;">&nbsp;</div>
<
div class="entry">
<
p>This is <strong>Emerald </strong>, a free, fully
standards-compliant CSS template designed by
<a href="http://www.freecsstemplates.org">FCT</a>. This free template is
released under a <a href="http://creativecommons.org/licenses/by/3.0/">
Creative Commons Attribution 3.0</a> license, so you’re pretty much free to
do whatever you want with it (even use it commercially) provided you keep
the links in the footer intact. Aside from that, have fun with it :)</p>
<
p>Sed lacus. Donec lectus. Nullam pretium nibh ut
turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est.
Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut
ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
<
p class="links"><a href="#" class="more">Read More</a>
<
a href="#" title="b0x" class="comments">Comments</a></p>
</
div>
</
div>
<
div class="post">
... Removed for brevity ...
</div>
<
div class="post">
... Removed for brevity ...
</div>
<
div style="clear: both;">&nbsp;</div>
</
div>
</
asp:Content>




Finally, we need to go back to the Site.master page and move the “MainContent” ContentPlaceHolder from just under the form tag down to where we removed the content for the default.aspx page.  You may recall that it was located under the opening “page” div.  So cut and paste the ContentPlaceHolder under the opening “page” div, Like so -



    <!-- end #header -->
<div id="page">
<
asp:ContentPlaceHolder ID="MainContent" runat="server" />
<!-- end #content -->
<div id="sidebar">




 



Now, if we press F5 and run it, we should have the exact same result we had when we ran it the first time, EXCEPT we are using Default.aspx for our content instead.



Summary

In this article Chapter One, we learned how to apply a CSS templated website to a ASP.Net templated website.  Additionally, we learned how to place a ContentPlaceHolder in the Site.master to identify where we want child pages to display their content.



Next Chapter

In the next chapter we will setup the SQL database to house or website’s data.



Håþþ¥ .ñꆆïñg…

No comments:

Post a Comment