Real - World ASP .NET—Building a Content Management System - StephenR. G. Fraser

Figure 11-1: Standard Web page frames

§Banner frame: This section frequently holds the Web page logo and banner ads. It also sometimes holds links to major sections, zones, or areas of the site.

§Contents frame: This is the home of most NavBars. You might think of it as

the table of contents frame. If the banner frame has links to sections or zones, the contents frame would then have links to content within only the current section.

§Main frame: This is where the content of the site is placed.

§Ads frame: Targeted ads associated with the content or other referenced story links are found here. This frame is less common than the previous three.

§Footer frame: Company copyrights and a simplified site map are often found here. This frame is seldom used.

As sites became larger, they started to outgrow the Web page real estate limitations imposed by frames. Also, Web users have become more sophisticated and don't need all the coddling and hand-holding. Thus, Web sites have now moved toward a better use of the entire browser screen area. Instead of forcing particular areas of the browser screen to hold certain types of content, now the Web page itself is broken up into these sections, and the browser is allowed to scroll over to these sections.

The Web browser is now a window looking at a section of the whole page. Users know that at the top will be the company logo and probably some form of advertisement, the left side will have a NavBar, the right side will contain additional relevant material, and the bottom will have a high-level site map and the company copyright notices. Some sites deviate from this, but most now use this layout.

CMS.NET's CMA uses a frame layout because Web page real estate is not an issue and a frame layout is much easier to understand. Chapter 12 covers the more prevalent approach of Web page design when you look at displaying Web page content.

Creating a Frame

After you create a new directory called CMA, off of the Administration directory, you need to add a good old-fashioned HTML page to house your frame. Frames use standard HTML and actually have nothing to do with ASP.NET or .NET. Even so, Visual Studio

.NET provides a miniwizard to handle the building of them.

1.Right -click the new CMA directory in the Solution Explorer.

2.Select the Add HTML Page menu item from the Add menu. This will bring up the standard Add New Item dialog box.

3.Select the Frameset icon in the Templates window.

4.Type CMA.html in the Name edit box. (I prefer the suffix .html, but you can leave it as .htm, which is the default.)

5.Click the Open button. This will bring up the Select a Frameset Template dialog box, as shown in Figure 11-2.

Figure 11-2: The Select a Frameset Template dialog box

6.Select the Banner and Content template.

7.Click the OK button.

You should now have a frameset in your main Web page designer. The design tool is pretty easy to use. The only thing you have to realize is that this is just a Web page holder. You have to build other Web pages separately and then insert them into the frame in which you want to view them.

Inserting a Page into a Frame

Follow these steps to insert a page into a frame:

1.Create a new Web page and then, when you've finished, come back to the frameset you built.

2.Right -click the frame you want to fill.

3.Select the Set Page for Frame menu item. This will bring up the Select Page dialog box shown in Figure 11-3.

Figure 11-3: The Select Page dialog box

4.Navigate to the page you want placed in the frame.

5.Click the OK button.

You can get pretty elaborate with your frame layout, but personally, I think the simpler the better. By right-clicking anywhere in a frame, you can select how you want it to be split.

You need to add this statement because the browser needs to know where to place the page it is linking to. Without the statement, the browser will place the selected Web page in the same frame as the hyperlink, thus overwriting the NavBar.

First CMS.NET Administration Page

All you need is a logo (one is provided in the Downloads section of the Apress Web site at www.apress.com) to place in the header frame of the CMA.html frameset page. Then you will have all the components that make up the first and most basic CMS.NET Web page. As you progress through the book, this simple page will expand considerably into something you will be truly proud of. Figure 11-4 shows your first masterpiece.

Figure 11-4: Your CMS.NET Administration Web page

As you can see, CMS.NET doesn't use ads or footer frames, as shown in Figure 11-1, but that doesn't mean your administration site can't. Changing your frameset to support this is as simple as selecting a different frameset icon when creating your initial Web page.

Content Database Table

Two major approaches exist for storing content for a CMS: an XML file or a database. For a small CMS, storing data in an XML file is fine because its biggest benefit is that it doesn't cost anything. As the system gets larger, however, you should definitely consider a database because it allows for better performance, concurrent users, and a myriad of other features that a straight XML file does not.

Microsoft has merged the two, and with Microsoft SQL Server 2000, you now have a database that can act like an XML file. CMS.NET uses any database you configured using the setup procedure, which was covered in Chapter 10. This book uses the MSDE provided with Visual Studio .NET samples for developing CMS.NET.

The Content database table (see Table 11-1) is designed to be simple and requires just the columns needed to support CMS.NET. Like the Account database table, optional data should be stored in a key/value property table called ContentProperty.

There is nothing new about the database table except that the key is made up of two columns: ContentID and Version. Multiple versions of the same piece of content can be created; thus to make a unique key, we need to combine the ID with the version. Another thing you should note is that the database stores each new version of the content in its entirety as opposed to using deltas. The code to create deltas is not simple and is not important to understanding CMS development. If you want to implement delta version control, the source code for GNU CVS (www.gnu.org/software/cvs/cvs.html) and RCS (ftp://prep.ai.mit.edu/gnu/rcs) is available for exploration.

Listing Site Content

Off the NavBar, two options are available to the author of content. The first is to bring up a list of content in the system. Normally, this would only bring up the content available to the logged-in author, but logging in isn't covered until Chapter 12, so for now, the list will display all content. The second option available on the NavBar is to bring up a Web form to create new content, which is covered shortly.

The AutList Web Page

When designing the AutList.aspx page, I had the option of creating the entire list and headings in C# code. Instead, I decided to use the design tool to create the static table headers and then have the code append all the content list information. This approach not only simplifies the code, but it also allows a graphic designer to decide on colors and fonts for the headers, as well as the image for the function buttons found in the right four columns. Listing 11-3 shows the design code used to create the headers.

Listing 11-3: The AutList.aspx Header Design

<form id=AutList method=post runat="server">

<H2>

<FONT color=darkslategray>Author : Content List</FONT>

</H2>

<P>

<asp:table id=tblView runat="server" GridLines="Both" CellPadding="3"

CellSpacing="1">

<asp:TableRow BackColor="#8CD3EF">

<asp:TableCell Width="10%" HorizontalAlign="Center" Text="ID">

</asp:TableCell>

<asp:TableCell Width="6%" Font-Size="XX-Small" HorizontalAlign="Center"

Text="Last Version">

</asp:TableCell>

<asp:TableCell Width="76%" HorizontalAlign="Center" Text="Headline">

</asp:TableCell>

<asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center"

Text="View">

</asp:TableCell>

<asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center"

Text="Updt">

</asp:TableCell>

<asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center"

Text="Sub">

</asp:TableCell>

<asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center"

Text="Del">

</asp:TableCell>

</asp:TableRow>

</asp:table>

</P>

</form>

The AutList.aspx Web form has two distinct states.

The first state is when there is no content available to be seen. When this occurs, a Web page similar to Figure 11-5 is displayed. I decided to give the user the option of clicking a hyperlink within the empty table to generate a new piece of content. I could have just as easily stated that it was empty and forced the user to click the NavBar to create new content.

Figure 11-5: The AutList Web page when empty

The second state is obviously when there is content. As you can see in Figure 11-6, there are four options that a user might choose for each piece of content:

§View: Allows the viewing of the entire piece of content.

§Update: Allows the author to update his content.

§Submit: Allows the author to submit his work to the next stage in the workflow. Because workflow isn't covered until Chapter 14, it will simply be a toggle from a creation state to a submitting state.

§Delete/Remove: Allows the author to delete his content. For now, the code actually deletes the content. Later, the code will simply change the status of the content to "removed." This way, content can be retrieved at a later date if needed.

Figure 11-6: The AutList Web page with content

The AutList Codebehind

Okay, let's look at some code. Listing 11-4 shows all the code needed to handle the first state (no content). All the code can be found in the Page_Load() method and contains pretty standard table control code. The only things new are TableCell's ColumnSpan and HorizontalAlign properties, though, as you can see, there is nothing tricky about them. All you have to do with the ColumnSpan property is set it to the number of columns you want it to span. For the HorizontalAlign property, just assign it

HorizontalAlign's static value of Left, Right, Center, or Justify.

Listing 11-4: The AutList.cs Empty Content Code

private void Page_Load(object sender, System.EventArgs e)

{

content = new Content(new AppEnv(Context).GetConnection());

DataTable dt = content.GetHeadlines();

if (dt.Rows.Count > 0)

{

...

}

else

{

TableRow row = new TableRow(); tblView.Rows.Add(row);

HyperLink link = new HyperLink(); link.Text = "No content, create one?"; link.NavigateUrl = "AutCreate.aspx";

TableCell cell = new TableCell(); cell.ColumnSpan = 7;

cell.HorizontalAlign = HorizontalAlign.Center; cell.Controls.Add(link);

row.Cells.Add(cell);

}

}

The code for handling the state when content exists (see Listing 11-5) is a little more complex, but the complexities are hidden in another submethod. The code in the Page_Load() method is fairly easy to follow. For each row of content, display the ID, version, and headline as well as the setup buttons to functions that the table can call. When setting up the buttons, check to see if the status of the content is "creating." If so, allow the updating and deleting functions.

Listing 11-5: The AutList.cs Content List Code

private void Page_Load(object sender, System.EventArgs e)

{

content = new Content(new AppEnv(Context).GetConnection());

DataTable dt = content.GetHeadlines();

if (dt.Rows.Count > 0)

{

LiteralControl lit; TableCell cell; int prv = -1;

int cur;

foreach (DataRow dr in dt.Rows)

{

cur = Convert.ToInt32(dr["ContentID"]);

if (cur != prv)

{

prv = cur;

TableRow row = new TableRow(); tblView.Rows.Add(row);

lit = new LiteralControl(dr["ContentID"].ToString()); cell = new TableCell();

cell.Controls.Add(lit);

row.Cells.Add(cell);

lit = new LiteralControl(dr["Version"].ToString()); cell = new Ta bleCell();

cell.Controls.Add(lit);

cell.HorizontalAlign = HorizontalAlign.Right; row.Cells.Add(cell);

lit = new LiteralControl(dr["Headline"].ToString()); cell = new TableCell();

cell.Controls.Add(lit);

row.Cells.Add(cell);

BuildImageButton(row, "AutView.aspx?ContentID=" +

dr["ContentID"].ToString());

if (Convert.ToInt32(dr["Status"]) == StatusCodes.Creating) BuildImageButton(row, "AutUpdate.aspx?ContentID=" +

dr["ContentID"].ToString());

else

BuildImageButton(row, null);

BuildImageButton(row, "AutSubmit.aspx?ContentID=" +

dr["ContentID"].ToString());

if (Convert.ToInt32(dr["Status"]) == StatusCodes.Creating) BuildImageButton(row, "AutRemove.aspx?ContentID=" +

dr["ContentID"].ToString());

else

BuildImageButton(row, null);

}

}

}

Commands and CommandArguments

The tricky part of the code falls in the BuildImageButton() method (see Listing 11-6). Originally, I wrote a command event for each of the view, update, submit, and remove functions, but then it became obvious that they were in fact the same command event but with different arguments. The arguments were simply the parameter to the Redirect() method, which each of these methods calls.

Listing 11-6: The AutList.cs BuildImageButton Code