Building a basic CMS in SQL Server and NET
Context
This article was first written in 2012. Technology has advanced considerably in this time, but we will leave it here in case anyone finds it of use.
Welcome to the article for the creating of a CMS. This article require at least some basic knowledge of SQL and HTML, and a copy of SQL Server and Visual Studio 2008 installed.
Your site has got to the stage where you want to start adding content dynamically, there are plenty of options out there, both free and paid for (List on Wikipedia), but what about taking out the middle man and building your own?
Let's get straight into the coding, first step is to add the built in ASP user store, if you have never done this then read this article Introduction to Membership.
The second step to take will be adding our SQL tables and stored procedures to the database. The DocumentID field is set to a Primary Key for better performance. If you are an SQL Novice then please research the following ideas;
- Primary Keys
- Foreign Keys
- SQL Data Types
SQL
CREATE TABLE DocumentMenu(
DocumentMenuID int IDENTITY(1,1) NOT NULL CONSTRAINT PK_DocumentMenuID PRIMARY KEY,
DocumentMenuName nvarchar(100) NULL,
DocumentMenuMulti bit NULL
)
INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'Home',0
INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'About',0
INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'SQL',0
INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'NET',0
GO
CREATE TABLE Document(
DocumentID int IDENTITY(1,1) NOT NULL CONSTRAINT PK_DocumentID PRIMARY KEY,
DocumentMenuLinkID int NULL CONSTRAINT FK_DocumentMenuLinkID FOREIGN KEY REFERENCES DocumentMenu(DocumentMenuID),
DocumentName varchar(100) NULL,
DocumentHeader varchar(100) NULL,
DocumentText varchar(max) NULL,
DocumentLastUpdated datetime NULL,
DocumentKeyWords varchar(250) NULL,
DocumentDescription varchar(250) NULL,
DocumentSubjects varchar(250) NULL
)
GO
INSERT INTO Document(DocumentMenuLinkID,DocumentName) SELECT 1,'Home'
INSERT INTO Document(DocumentMenuLinkID,DocumentName) SELECT 2,'About'
GO
--Update Documents
CREATE PROC UpdDocument(@DocumentID INT,@DocumentMenuLinkID INT,@DocumentName VARCHAR(100),@DocumentHeader VARCHAR(100),@DocumentText VARCHAR(MAX),@DocumentKeyWords VARCHAR(250),@DocumentDescription VARCHAR(250))
AS BEGIN
IF @DocumentID = 0 BEGIN
PRINT 'Insert'
INSERT INTO Document(DocumentMenuLinkID,DocumentName,DocumentHeader,DocumentText,DocumentLastUpdated,DocumentKeyWords,DocumentDescription)
SELECT @DocumentMenuLinkID,@DocumentName,@DocumentHeader,@DocumentText,GETDATE(),@DocumentKeyWords,@DocumentDescription
SELECT SCOPE_IDENTITY()
RETURN
END
IF @DocumentID <>0 BEGIN
PRINT 'Update'
UPDATE Document SET
DocumentMenuLinkID=@DocumentMenuLinkID,DocumentName=@DocumentName,DocumentHeader=@DocumentHeader,DocumentText=@DocumentText,
DocumentLastUpdated=GETDATE(),DocumentKeyWords=@DocumentKeyWords,DocumentDescription=@DocumentDescription
WHERE DocumentID=@DocumentID
END
END
GO
--Get Documents
CREATE PROC GetDocuments(@SubjString NVARCHAR(100)) AS BEGIN
DECLARE @DocumentMenuLinkID INT=(SELECT TOP 1 DocumentMenuID FROM DocumentMenu WHERE DocumentMenuName LIKE @SubjString)
SELECT 'Article: ' + DocumentName DocumentName,
REPLACE('Blog/'+DocumentSubjects+'/'+CAST(DocumentID AS VARCHAR(10)),' ','')+'/'+REPLACE(DocumentHeader,' ',' ') URL,
'Description: ' + DocumentDescription DocumentDescription,
'Keywords: ' + DocumentKeyWords DocumentKeyWords,
CONVERT(VARCHAR(10),DocumentLastUpdated,103) DocumentLastUpdated
FROM Document
INNER JOIN DocumentMenu ON DocumentMenuID=DocumentMenuLinkID
WHERE DocumentMenuLinkID=@DocumentMenuLinkID
ORDER BY DocumentLastUpdated DESC
END
GO
--Get Document
CREATE PROC GetDocument(@DocumentID INT) AS BEGIN
SELECT TOP 1 Document.*,DocumentMenuMulti
FROM Document
INNER JOIN DocumentMenu ON DocumentMenuID=DocumentMenuLinkID
WHERE DocumentID=@DocumentID
END
GO
Application Set Up
That's it for the SQL code, the next stage is setting up a web pages to handle displaying our document, a list of documents to edit and an edit document page.
Open up either a new project or the one you are to add this to. We need to add Global.asax (Global Application Class) to this project, add route handling to it and register the routes to the table. The following application has the following pages accessible to all;
- Home page
- About Page
- Login Page (Covered in separate article)
- Blog Directory (All Documents)
- Blog Sub Directory (SQL, .NET for instance)
- Blog Articles
Web Routing Config
<add name="MySqlConnection"connectionString="Data Source={servername};Initial Catalog={databasename};Integrated Security=True"providerName="System.Data.SqlClient" />
<connectionStrings>
<system.web>
<httpsRuntime requestValidationMode="2.0"/>
<system.web>
<system.webServer>
<modules runAllManagedModulesForAllRequests="True"/>
<system.webServer>
Import
You will need to import System.Web.Routing.
I have commented each line to show you what each is doing. we also need to create an SQL connection in our web config file.
I am using TinyMCE, a Java Script editor further on, so we also need to change the Request Validation Mode and the page routing requires the modules updated.
VB
'Fires when the application is started
RegisterRoutes(RouteTable.Routes)
End Sub
Sub RegisterRoutes(ByVal routes As RouteCollection) 'This code you will need to add
routes.MapPageRoute("", "Home/", "~/Home.aspx", False, New RouteValueDictionary(New With {.ArticleID = "1"})) 'Manual Route ID 1 is home page
routes.MapPageRoute("", "About/", "~/About.aspx", False, New RouteValueDictionary(New With {.ArticleID = "2"})) 'Manual Route
routes.MapPageRoute("", "Blog/{ArticleSection}/{ArticleID}/{*pathInfo}", "~/ContentPage.aspx") 'Article route to ignore anything further than the Article ID
routes.MapPageRoute("", "Blog/{ArticleSection}/{ArticleID}/", "~/ContentPage.aspx") 'Article route using the Article ID
routes.MapPageRoute("", "Blog/{ArticleSection}/", "~/ContentSubj.aspx") 'Article route using the Section ID
routes.MapPageRoute("", "Blog/{*pathInfo}", "~/ContentSubj.aspx") 'Route to take us into the index
routes.MapPageRoute("", "DocumentManager/{DID}/", "~/ManageDocument.aspx") 'Route to take us to edit document
routes.MapPageRoute("", "DocumentManager/", "~/ManageDocuments.aspx") 'Route to take us to the list of documents
End Sub
C#
{
//Fires when the application is started
RegisterRoutes(RouteTable.Routes);
}
public void RegisterRoutes(RouteCollection routes) //This code you will need to add
{
routes.MapPageRoute("", "Home/", "~/Home.aspx", false, new RouteValueDictionary(new { ArticleID = "1" }));
//Manual Route ID 1 is home page
routes.MapPageRoute("", "About/", "~/About.aspx", false, new RouteValueDictionary(new { ArticleID = "2" }));
//Manual Route
routes.MapPageRoute("", "Blog/{ArticleSection}/{ArticleID}/{*pathInfo}", "~/ContentPage.aspx");
//Article route to ignore anything further than the Article ID
routes.MapPageRoute("", "Blog/{ArticleSection}/{ArticleID}/", "~/ContentPage.aspx");
//Article route using the Article ID
routes.MapPageRoute("", "Blog/{ArticleSection}/", "~/ContentSubj.aspx");
//Article route using the Section ID
routes.MapPageRoute("", "Blog/{*pathInfo}", "~/ContentSubj.aspx");
//Route to take us into the index
routes.MapPageRoute("", "DocumentManager/{DID}/", "~/ManageDocument.aspx");
//Route to take us to edit document
routes.MapPageRoute("", "DocumentManager/", "~/ManageDocuments.aspx");
//Route to take us to the list of documents
}
Manage Document Library
Here we will have a list of all documents, and links to view or edit them...
For this add a new web form called ManageDocuments.aspx
HTML
<asp:GridView ID="MyDocs" runat="server" AutoGenerateColumns="False" Width="100%" BorderStyle="None" GridLines="None">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="EditURL"DataTextField="DocName"
HeaderText="EditDocument" />
<asp:BoundField DataField="DocumentHeader"HeaderText="DocumentHeader" />
</Columns>
</asp:GridView>
</div>
<div>
<a href="DocumentManager/0/">Add New</a>
</div>
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
If User.IsInRole("SiteAdmin") Then
'If Not IsPostBack Then
Dim com As New SqlCommand("SELECT 'DocumentManager/'+CAST(DocumentID AS VARCHAR(10)) EditURL,DocumentName DocName,DocumentHeader,REPLACE('Blog/'+DocumentSubjects+'/'+CAST(DocumentID AS VARCHAR(10)),' ','')+'/'+DocumentName PreviewURL FROM Document", con)
con.Open()
Dim dr = com.ExecuteReader
MyDocs.DataSource = dr
MyDocs.DataBind()
con.Close()
'End If
End If
End Sub
C#
protected void Page_Load(object sender, System.EventArgs e)
{
if (User.IsInRole("SiteAdmin"))
{
//If Not IsPostBack Then
SqlCommand com = new SqlCommand("SELECT 'DocumentManager/'+CAST(DocumentID AS VARCHAR(10)) EditURL,DocumentName DocName,DocumentHeader,REPLACE('Blog/'+DocumentSubjects+'/'+CAST(DocumentID AS VARCHAR(10)),' ','')+'/'+DocumentName PreviewURL FROM Document", con);
con.Open();
dynamic dr = com.ExecuteReader;
MyDocs.DataSource = dr;
MyDocs.DataBind();
con.Close();
//wwwd If
}
}
Text Editor
In here I have used Tiny MCE text editor. I have found this works really well with what I wanted to achive, however there a few more steps involved for using it...
Start by adding a new web form called ManageDocument.aspx. You may need to add the script manager manually.
HTML
<ContentTemplate>
<div style="text-align: center;">
<div>Menu</div>
<div>
<asp:DropDownList ID="PageMenu" runat="server">
</asp:DropDownList>
</div>
<div>Page Name</div>
<div><asp:TextBox ID="PageName" runat="server" Width="400px"></asp:TextBox></div>
<div>Header</div>
<div><asp:TextBox ID="HeaderText" runat="server" Width="99%"></asp:TextBox></div>
<div>Content</div>
<div><textarea name="content" cols="1" rows="45" style="width: 100%; margin: 0 0 0 0;" id="ContentText" runat="server"></textarea></div>
<div>Key Words</div>
<div><asp:TextBox ID="KeyWords" runat="server" Width="99%"></asp:TextBox></div>
<div>Description</div>
<div><asp:TextBox ID="Description" runat="server" Width="99%"></asp:TextBox></div>
<div><asp:Button ID="AddUpdate" runat="server" Text="Button"/></div>
</div>
</ContentTemplate>
<triggers>
<asp:PostBackTrigger ControlID="AddUpdate"/>
</triggers>
</asp:UpdatePanel>
JavaScript
</script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
width: '100%'
});
function UpdateTextArea() {
tinyMCE.triggerSave(false, true);
}
</script>
VB
'Above your class
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
If User.IsInRole("SiteAdmin") Then
If Not IsPostBack Then
If Not IsNothing(Page.RouteData.Values("DID")) Then
AddUpdate.Attributes.Add("onclick", "UpdateTextArea()")
Dim docID As String = Page.RouteData.Values("DID").ToString
If docID = 0 Then
AddUpdate.Text = "Add Document"
Else
AddUpdate.Text = "Update Document"
End If
Dim com As New SqlCommand("SELECT * FROM DocumentMenu WHERE (CASE WHEN " & docID & "=0 THEN 1 ELSE DocumentMenuMulti END)=DocumentMenuMulti; " & _
"EXEC GetDocumentByID " & docID & "", con)
con.Open()
Dim da = New SqlDataAdapter(com)
Dim ds As New DataSet
da.Fill(ds)
'Menu
PageMenu.DataTextField = "DocumentMenuName"
PageMenu.DataValueField = "DocumentMenuID"
PageMenu.DataSource = ds.Tables(0)
PageMenu.DataBind()
'Data
Dim dr = ds.Tables(1).CreateDataReader
While dr.Read()
PageMenu.SelectedValue = dr.Item(1).ToString
PageName.Text = dr.Item(2).ToString
HeaderText.Text = dr.Item(3).ToString
ContentText.InnerHtml = httpsUtility.HtmlDecode(dr.Item(4).ToString)
KeyWords.Text = dr.Item(6).ToString
Description.Text = dr.Item(7).ToString
PageMenu.Enabled = CBool(dr.Item(9).ToString)
End While
con.Close()
Else
Response.Redirect("/DocumentManager")
End If
Else
End If
Else
Response.Redirect("/Login")
End If
End Sub
Private Sub AddUpdate_Click() Handles AddUpdate.Click
If Not IsNothing(Page.RouteData.Values("DID")) Then
Dim docID As String = Page.RouteData.Values("DID").ToString
Dim DocumentMenuLinkID As Integer = PageMenu.SelectedValue
Dim DocumentName As String = Replace(PageName.Text, "'", "''")
Dim DocumentHeader As String = Replace(HeaderText.Text, "'", "''")
Dim DocumentText As String = Replace(ContentText.InnerHtml, "'", "''")
Dim DocumentKeyWords As String = Replace(KeyWords.Text, "'", "''")
Dim DocumentDescription As String = Replace(Description.Text, "'", "''")
Dim com As New SqlCommand("EXEC UpdDocument " & docID & ",'" & DocumentMenuLinkID & "','" & DocumentName & "','" & DocumentHeader & "',N'" & DocumentText & "','" & DocumentKeyWords & "','" & DocumentDescription & "'", con)
con.Open()
Dim a As String = com.ExecuteScalar
con.Close()
If docID = 0 Then
Response.Redirect("~/DocumentManager/" + a)
End If
End If
End Sub
C#
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString);
protected void Page_Load(object sender, System.EventArgs e)
{
if (User.IsInRole("SiteAdmin"))
{
if (!IsPostBack)
{
if ((Page.RouteData.Values("DID") != null))
{
AddUpdate.Attributes.Add("onclick", "UpdateTextArea()");
string docID = Page.RouteData.Values("DID").ToString;
if (docID == 0)
{
AddUpdate.Text = "Add Document";
}
else
{
AddUpdate.Text = "Update Document";
}
SqlCommand com = new SqlCommand("SELECT * FROM DocumentMenu WHERE (CASE WHEN " + docID + "=0 THEN 1 ELSE DocumentMenuMulti END)=DocumentMenuMulti; " + "EXEC GetDocumentByID " + docID + "", con);
con.Open();
dynamic da = new SqlDataAdapter(com);
DataSet ds = new DataSet();
da.Fill(ds);
//Menu
PageMenu.DataTextField = "DocumentMenuName";
PageMenu.DataValueField = "DocumentMenuID";
PageMenu.DataSource = ds.Tables(0);
PageMenu.DataBind();
//Data
dynamic dr = ds.Tables(1).CreateDataReader;
while (dr.Read())
{
PageMenu.SelectedValue = dr.Item(1).ToString;
PageName.Text = dr.Item(2).ToString;
HeaderText.Text = dr.Item(3).ToString;
ContentText.InnerHtml = httpsUtility.HtmlDecode(dr.Item(4).ToString);
KeyWords.Text = dr.Item(6).ToString;
Description.Text = dr.Item(7).ToString;
PageMenu.Enabled = Convert.ToBoolean(dr.Item(9).ToString);
}
con.Close();
}
else
{
Response.Redirect("/DocumentManager");
}
}
else
{
}
}
else
{
Response.Redirect("/Login");
}
}
private void AddUpdate_Click()
{
if ((Page.RouteData.Values("DID") != null))
{
string docID = Page.RouteData.Values("DID").ToString;
int DocumentMenuLinkID = PageMenu.SelectedValue;
string DocumentName = Strings.Replace(PageName.Text, "'", "''");
string DocumentHeader = Strings.Replace(HeaderText.Text, "'", "''");
string DocumentText = Strings.Replace(ContentText.InnerHtml, "'", "''");
string DocumentKeyWords = Strings.Replace(KeyWords.Text, "'", "''");
string DocumentDescription = Strings.Replace(Description.Text, "'", "''");
SqlCommand com = new SqlCommand("EXEC UpdDocument " + docID + ",'" + DocumentMenuLinkID + "','" + DocumentName + "','" + DocumentHeader + "','" + DocumentText + "','" + DocumentKeyWords + "','" + DocumentDescription + "'", con);
con.Open();
string a = com.ExecuteScalar;
con.Close();
if (docID == 0)
{
Response.Redirect("~/DocumentManager/" + a);
}
}
}
Directory Page
This page will display all of your articles using the content subject we have routed in.
The way it has been designed we can use the same page for two sections, effectively only supplying a filter where needed...
Add a new web form ContentSubj.aspx
HTML
<div id="ContentText" runat="server"></div>
<div>
<asp:GridView id="ContentSub" runat="server" AutoGenerateColumns="False" GridLines="None"ShowHeader="False"Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div style="width: 80%; float: left;">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("HyperLink") %>' Text='<%# Eval("DocumentName") %>'></asp:HyperLink>
</div>
<div style="width: 19%; float: left;">
<asp:Label ID="Label2" runat="server" text='<%# Eval("DocumentLastUpdated") %>'></asp:Label>
</div>
<div style="width: 100%; float: left; clear: both;">
<asp:Label ID="Label1" runat="server" text='<%# Eval("DocumentDescription") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Try
Page.Title = "gsclayton.net Technical Articles"
Page.MetaKeywords = "gsclayton.net, Databases, Web Design, SQL, HTML, .NET, ASP, CSS, Technical Articles"
Page.MetaDescription = "gsclayton.net Databases and Web Design, SQL, HTML, .NET, ASP, CSS, Technical Articles"
Dim Str As String = Replace(Page.RouteData.Values("Subj").ToString, "'", "''")
Subject.Text = "La " + Str + " Articles"
Dim com As New SqlCommand("EXEC GetDocuments '%" & Str & "%'", con)
con.Open()
Dim dr = com.ExecuteReader
MyDocs.DataSource = dr
MyDocs.DataBind()
dr.Close()
con.Close()
Catch ex As Exception
Response.Redirect("/Blog")
End Try
End Sub
C#
protected void Page_Load(object sender, System.EventArgs e)
{
try
{
Page.Title = "gsclayton.net Technical Articles";
Page.MetaKeywords = "gsclayton.net, Databases, Web Design, SQL, HTML, .NET, ASP, CSS, Technical Articles";
Page.MetaDescription = "gsclayton.net Databases and Web Design, SQL, HTML, .NET, ASP, CSS, Technical Articles";
string Str = Strings.Replace(Page.RouteData.Values("Subj").ToString, "'", "''");
Subject.Text = "La " + Str + " Articles";
SqlCommand com = new SqlCommand("EXEC GetDocuments '%" + Str + "%'", con);
con.Open();
dynamic dr = com.ExecuteReader;
MyDocs.DataSource = dr;
MyDocs.DataBind();
dr.Close();
con.Close();
}
catch (Exception ex)
{
Response.Redirect("/Blog");
}
}
Content Pages
If you don't require custom content in your home and about pages then just add the Content Page and edit the page routing...
In these pages you can add and style however you like, however as long as you have the following code it will work.
HTML
<div id="MyContent" runat="server"></div>
<div id="LastUpd" runat="server" style="clear: both;"></div>
VB
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
'If Not IsPostBack Then
If Not IsNothing(Page.RouteData.Values("ArticleID")) Then
Dim LastUpdated As Label = Master.FindControl("LastUpdatedLabel") 'Control on my Master Page, this can be added to your page insteadv as a labeldocID
Dim did As String = Page.RouteData.Values("ArticleID").ToString
Dim com As New SqlCommand("EXEC GetDocument '" & Replace(did, "'", "''") & "'", con)
con.Open()
Dim dr = com.ExecuteReader
While dr.Read()
HeaderLabel.Text = dr.Item(3).ToString
ContentText.InnerHtml = httpsUtility.HtmlDecode(dr.Item(4).ToString)
LastUpdated.Text = Format(CDate(dr.Item(5).ToString), "dd/MM/yyyy")
Page.Header.Title = dr.Item(3).ToString
MetaKeywords = dr.Item(6).ToString
MetaDescription = dr.Item(7).ToString
End While
dr.Close()
con.Close()
'End If
End If
End Sub
C#
protected void Page_Load(object sender, System.EventArgs e)
{
//If Not IsPostBack Then
if ((Page.RouteData.Values("ArticleID") != null)) {
Label LastUpdated = Master.FindControl("LastUpdatedLabel");
//Control on my Master Page, this can be added to your page insteadv as a labeldocID
string did = Page.RouteData.Values("ArticleID").ToString;
SqlCommand com = new SqlCommand("EXEC GetDocument '" + Strings.Replace(did, "'", "''") + "'", con);
con.Open();
dynamic dr = com.ExecuteReader;
while (dr.Read()) {
HeaderLabel.Text = dr.Item(3).ToString;
ContentText.InnerHtml = httpsUtility.HtmlDecode(dr.Item(4).ToString);
LastUpdated.Text = Strings.Format(Convert.ToDateTime(dr.Item(5).ToString), "dd/MM/yyyy");
Page.Header.Title = dr.Item(3).ToString;
MetaKeywords = dr.Item(6).ToString;
MetaDescription = dr.Item(7).ToString;
}
dr.Close();
con.Close();
}
}
Wrapping Up
This is an old document, but still contains relevant ideas, so use it as a base for whatever you fancy doing!