Flex, Java/JavaFX, Silverlight, AJAX & RIA Frameworks

RIA Developer's Journal

Subscribe to RIA Developer's Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get RIA Developer's Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


RIA & Ajax Authors: Javier Paniza, Pat Romanski, RealWire News Distribution

Related Topics: RIA Developer's Journal, CMS Journal

RIA & Ajax: Article

Building a Simple Content Management System

Learn how to enable your editors to visually edit HTML content online

In this article you'll learn how to create a basic content management system that stores articles in a database using Microsoft's Visual Web Developer Express Edition (or Microsoft Visual Studio) and KTML 4 Lite edition.

At the end of this article users of the Content Management System will be able to:

  • See the list of articles that exist in the site database with the title and short description.
  • Display the full article.
  • Edit or add articles using the free online HTML editor KTML Lite that is easy to learn and use just like Microsoft Word.
Using KTML Lite the text boxes or text areas used to edit content can be replaced with an online HTML editor that lets you format text, style it using CSS, upload and insert images and media, upload and manage files.

You need 20 minutes to complete this tutorial.

Getting Started
Before starting on this project, there are some prerequisites to take care of. You need:

  1. Microsoft Visual Web Developer 2005 Express Edition (see http://msdn.microsoft.com/vstudio/express/vwd/) or Microsoft Visual Studio 2005 (see http://msdn.microsoft.com/vstudio/default.aspx). Since the steps are the same for both platforms there will be no distinction in what follows.
  2. KTML 4 Lite for ASP.NET Visual Studio Control (see www.interaktonline.com/Products/Online-HTML-Editor/KTML-for-.NET/Try-Download/).
  3. A database system, either Microsoft Access or Microsoft SQL Server.
  4. A basic knowledge of databases and the .NET platform.
The first step in building this application is to set up your working environment.

Setting Up the Environment
It only takes three easy steps to get you up and going. Let's do it now:

  1. Start the IDE you're using. On the Welcome page that's shown select the option to create a new ASP.NET Web site. Select the path to store the files and give it a proper name, say, SimpleCMS. Note: If you've disabled the Welcome page, you can create the new application from File > New Web Site.
  2. The new Web site starts off with a single page - default.aspx. On this page you'll display the list of articles. For the editing page right-click the project title in the Solution Explorer and select the Add new Item option. Name the new page edit.aspx.
  3. Next create a database with the same structure as in Figure 1 or download the sample Microsoft Access database and copy it into the site root. You'll also have to refresh the Solution Explorer view to access it from within the platform.
Your application setup is almost complete. All you need to check now is that you have all the components handy.

Add the KTML 4 Lite Control to the Toolbox
You'll only use three controls to build your pages: the DataList, DetailsView, and the KTML 4 Visual Studio control. The first two are present by default in your platform, right under the Data tab in the Toolbox. The latter is a custom control that you must manually add to the Toolbox:

  1. Download the KTML 4 Lite for the ASP.NET zip archive. Unpack it to a folder of choice.
  2. Inside the main package there are two more archives - one for ASP.NET 1.1 and the other for version 2.0 of ASP.NET. Use the one that's appropriate to your specific ASP.NET version.
  3. Unpack the zip with KTML to a folder on your hard drive (e.g., c:\InterAKT\Ktml). The archive contains two folders - bin and includes - and two files - one containing a sample KTML control applied and a sample web.config file. You won't use any of these files in the tutorial.
  4. Back in the IDE right-click an empty spot on the toolbox and select the Add Tab option. For the name you can use InterAKT, the developer of the KTML control.
  5. Right-click the newly added tab and select the Choose Items option. A dialog box will load displaying already installed components and a Browse button to select new components to install.
  6. Click Browse and navigate to the folder where you unpacked KTML. From within the bin subfolder select the InterAKT.KTML4LITE.dll file and click Open.
  7. Back in the Choose Toolbox items interface click OK.
Now the KTML control is displayed in the Toolbox and it should look like in Figure 2 .

With this last step the working environment is completely configured and all bits and pieces are gathered in the same spot. Now let's start gluing them together.

Create the Article List Page
The first page of the CMS displays a list of current articles. The list doesn't go into detail - only the article title and a short description are displayed. To build the list you'll use the DataList control:

  1. Open the Default.aspx page by double-clicking it in the Solution Explorer.
  2. Make sure it's set to display the Design mode. If it shows some code, just click the Design button at the bottom of the screen to switch modes.
  3. In the Toolbox expand the Data tab and drag and drop the DataList item onto the page. The DataList Tasks pop-up should be automatically displayed. If not, click the Smart Tag to open it (the > icon on top of the control).
  4. From the Tasks pane in the Choose Data Source dropdown menu select the New Data Source option. This will open the Data Source Configuration wizard.
  5. In the wizard's first step click on the Access Database icon and in the ID text field enter SimpleCMS. Then click OK to proceed to step 2.
  6. In the second step you have to pick out the database to use. Click Browse and select the simpleCMS.mdb file in the site root. The IDE will convert the path to one relative to the application: ~/simpleCMS.mdb.
  7. In the last step select the database table and table columns to display in the list. Only check the title_art and description_art columns. Then click Next and Finish.
Now the article list has been created. And although it does its job as it should it looks…awful. So let's make it look a little better:
  1. Click the Smart Tag icon to display the Tasks pane if needed.
  2. From the list of tasks click the Edit templates option. Now you can edit the content inside the list items. The only concern isn't to remove the dynamic labels - they're bound to the data fields to display.
  3. First replace the title_art item with Article title. Type it in then select it and click the Bold button on the toolbar.
  4. Next replace description_art: with Article description. Then select it and apply the Bold formatting. To separate it better from the actual description hit SHIFT+ENTER to add a line break.
  5. To complete and save the change, select the End template editing option from the Tasks pane.
  6. For the last look change select the AutoFormat option in the Tasks pane. From the interface that loads, select the Simple skin in the left list. Then click OK to apply it.
With this last step the article list page has been created and styled. If you want to test it out, simply save the page (File > Save), right-click on it in the Solution Explorer, and select View in Browser. You should get a result similar to the one shown in Figure 3.

To allow the site's content editors to move from the article list to the article editing page without having to remember or bookmark the URL let's make a last addition to this page - a link:

  1. Put the cursor on the last element on the page and type Edit article.
  2. Select the text you've just entered and click the Hyperlink button in the toolbar.
  3. In the URL text box enter edit.aspx and hit Enter to create the link.
With the article list in place we can move on and create the article details page.

Create the Article Details Page
After reviewing the list of articles, the site editor can move on to the details page and edit one or more of the entries. The detail page displays a full article at a time and links to add another article, edit or delete the current entry, and links to navigate through the articles. When clicking the edit link, the editor will be displayed. To build this page, follow the next steps:

  1. Open the edit.aspx page.
  2. From the Data tab of the Toolbox drag and drop the DetailsView item on page.
  3. The first steps for configuring the control are the same as for the DataList: create a new data source and select the simpleCMS.mdb database.
  4. In the third step of the wizard you must select all the columns for retrieval. To do this just check the option marked with *.
  5. Next click on the Advanced button. Since this data source must allow updating content, check the Generate Insert, Update and Delete statements option. Then click OK.
  6. Press Next and Finish to create the data source.
  7. The DetailsView page item is updated with the actual columns and a set of checkboxes are displayed in the Tasks pane. Check all four of them:
    a. Enable paging - this option generates links to navigate through the records.
    b. Enable Inserting - this option generates code that allows adding a new article.
    c. Enable Editing - this option generates code that allows editing an article.
    d. Enable Deleting - this option generates code that allows deleting an article.
  8. As you check each option, notice that new links are displayed on the control: Edit, Delete, New.
  9. By default the control displays all columns retrieved from the table. To change this, select the Edit Fields option from the Tasks pane. The user interface that loads has three areas:
    a. Available fields - located in the upper-left section displays all fields that can be added to the control.
    b. Selected fields - in the lower left displays the fields that are currently associated with the control.
    c. BoundField properties - on the right allows setting the properties for any selected field.
  10. Since we already have all the fields in the control, and we want some of them removed, we use only the second and third area.
  11. Select the id_art field from the Selected fields area and press the Delete button - the one with a large red X-shaped icon.
  12. Next select each of the remaining data fields - text_art, description_art and content_art and for each one change the Header Text property in the BoundField properties area. Use Article title, Article description, and Article content. (Figure 4)
  13. Also, for each of the three fields, after changing the Header Text, click the Convert this field into a TemplateField link beneath the properties area. This allows defining the exact behavior for each element - from display to delete.
  14. When done setting up all fields, click OK to apply the changes.
  15. When adding the control by default, it's set to a minimum width that doesn't work too well with larger texts. So grab the right horizontal resize handler with the mouse and make it a little larger. About half of the page is fine.
  16. Last, just as for the list, let's pick an appearance to use from the predefined set. Select the Auto Format option from the Tasks pane and select the Simple color scheme from the gallery.
  17. Then click OK to apply the option and File > Save to save the entire page changes.

More Stories By Cristian Ivascu

Cristian Ivascu is a technical writer with InterAKT Online. He is a strong supporter of open-source software and a fan of Japanese culture and rock music.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.