Learn How to Develop a Content Management System
If this is your first time reading this article series, then I strongly encourage you to view part one of this article before continuing.
Development
As I mentioned in Part 1 of the series, you will need to have Microsoft Access. If you need help with Microsoft Access you can get it from https://www.bcschools.net/staff/AccessHelp.htm.
Let’s Start. In Microsoft Access create one database table named “tblPages” in your database. Save your database in the App_Data folder within your application.
Now create following columns in that table:
- PageID – (autonumber)
- PageTitle – (text)
- PageBody – (memo)
Let’s keep it simply for now,
You now need to insert four rows, one per page. To do this you can use the following code:
Insert into tblPages(‘Home Page’,’Welcome to our new homepage’)
Insert into tblPages(‘About Us’,’We are 20 years old company located in NY’)
Insert into tblPages(‘Contact Us’,’Our office is located at 1 Main st, New York, NY 1001’)
Insert into tblPages(‘Services’,’We offer web hosting, web design, web development and SEO products’)
When you’re finished you’ll have a table with four records and the hardest part is done. Now we need to show the page content to the visitors and allow the marketing department and administrator of the site to manage the content.
Showing content on page
So far we have part of the CMS done, we have a data structure but we need to show content on the page, and here is how we can do this.
Step 1. Open default.aspx page. This should already be there in your project.
Step 2. Drag ASP Literal control onto your page and name it litContent
Step 3. You need to create OleDbHelper.cs class if you do not have one. Here is the code for this class. https://www.koders.com/csharp/fid393A2FFC272228B00F960522E1F0513D487F0F6A.aspx?s=mdef%3Adataset
Step 4. Create a connection to your MS Access or SQL Database in your Web.Config file. (Help: https://www.alperguc.com/blog/dotnet/aspnet-webconfig-ms-access-connection-string/ )
Step 4. In your code behind of default.aspx (default.aspx.cs OR default.aspx.vb) write code to select columns, PageTitle and PageBody from tblPages we created little while ago.
string strSql = “select * from tblPages where PageTitle=’Home Page’ ”;
DataSet dsContent = OleDbHelper. ExecuteDataset(‘CONNECTION STRING FROM WEB.CONFIG’,CommandType.Text,strSql);
Now you have one dsContent that has PageTitle and PageBody data. Let’s display it now.
Step 5. After we get the dsContent we can do this,
litContent.Text = dsContent.Tables[0].Rows[0][“PageBody”].ToString();
This will show the PageBody content in the literal control we created.
Allowing admin to edit content
So far we have a data structure and the way to display the content on a page. Now let’s move on to how the administrator / webmaster can manage the content of home page.
Step 1. Create a page EditContent.aspx in your project. (right click on your project and add a new webForm or page)
Step 2. Extract FckEditor.dll from FCKEditor files you downloaded in Part 1 and place them in the Bin director of your website project
Step 3. Include reference of FckEditor.dll in your project. (See the screen shot ‘Add Ref’)
Step 4. Include FCKEditor tag within EditContent.aspx page (Help: https://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/ASP.NET ) and name it fckContent
Step 5. Go to the codebehind now (EditContent.aspx.cs) write this code in the Page_Load event
If(! Page.IsPostBack) //this will make sure we only load content when page loads for the first time
{
string strSql = “select * from tblPages where PageTitle=’Home Page’ ”;
DataSet dsContent = OleDbHelper. ExecuteDataset(‘CONNECTION STRING FROM WEB.CONFIG’,CommandType.Text,strSql);
fckContent.Html = dsContent.Tables[0].Rows[0][“PageBody”].ToString();
}
Notice we are using .Html and not .Text, because the FCKEditor does not have a property called .Text, it has .Html.
At this time when you run your application and view the EditContent.aspx page, your website will query the table, tblPages, and bring back the content for Home Page into FCKEditor.
Now its time to create “Update” button on FCKEditor to save the changes webmaster is going to be making.
Step 1. Create a button under the FCKEditor on EditContent.aspx and name it btnUpdate
Step 2. Double click the button and view its click event. Once you see the code behind, enter this code
string strSql = “Update tblPages set PageBody=’{0}’ where PageTitle=’Home Page’ “;
strSql = string.format(strSql, fckContent.Html.ToString());
OleDbHelper. ExecuteNonDataset(‘CONNECTION STRING FROM WEB.CONFIG’,CommandType.Text,strSql);
Response.Redirect(“EditContent.aspx”,true);
Notice we are using ExecuteNonDataset method because we are only updating and we do not need anything back. Right after we update the content we send user back to the same page. This will make sure the new content loads in your FCKEditor and the administrator / webmaster can see that the changes are saved.
Screen Shot
This post is part of the series: Learn to Develop Custom CMS Applications
You need a custom Content Management System, but you don’t want to spend any money to get it. Relax and read this article series that will show you how to develop a custom CMS application without spending a dime.
