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 TablesCREATE 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',0INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'About',0INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'SQL',0INSERT INTO DocumentMenu(DocumentMenuName,DocumentMenuMulti) SELECT 'NET',0GOCREATE 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)GOINSERT INTO Document(DocumentMenuLinkID,DocumentName) SELECT 1,'Home'INSERT INTO Document(DocumentMenuLinkID,DocumentName) SELECT 2,'About'GO--Update DocumentsCREATE PROC UpdDocument(@DocumentID INT,@DocumentMenuLinkID INT,@DocumentName VARCHAR(100),@DocumentHeader VARCHAR(100),@DocumentText VARCHAR(MAX),@DocumentKeyWords VARCHAR(250),@DocumentDescription VARCHAR(250))AS BEGINIF @DocumentID = 0 BEGINPRINT 'Insert'INSERT INTO Document(DocumentMenuLinkID,DocumentName,DocumentHeader,DocumentText,DocumentLastUpdated,DocumentKeyWords,DocumentDescription)SELECT @DocumentMenuLinkID,@DocumentName,@DocumentHeader,@DocumentText,GETDATE(),@DocumentKeyWords,@DocumentDescriptionSELECT SCOPE_IDENTITY()RETURNENDIF @DocumentID <>0 BEGINPRINT 'Update'UPDATE Document SETDocumentMenuLinkID=@DocumentMenuLinkID,DocumentName=@DocumentName,DocumentHeader=@DocumentHeader,DocumentText=@DocumentText,DocumentLastUpdated=GETDATE(),DocumentKeyWords=@DocumentKeyWords,DocumentDescription=@DocumentDescriptionWHERE DocumentID=@DocumentIDENDENDGO--Get DocumentsCREATE PROC GetDocuments(@SubjString NVARCHAR(100)) AS BEGINDECLARE @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) DocumentLastUpdatedFROM DocumentINNER JOIN DocumentMenu ON DocumentMenuID=DocumentMenuLinkIDWHERE DocumentMenuLinkID=@DocumentMenuLinkIDORDER BY DocumentLastUpdated DESCENDGO--Get DocumentCREATE PROC GetDocument(@DocumentID INT) AS BEGINSELECT TOP 1 Document.*,DocumentMenuMultiFROM DocumentINNER JOIN DocumentMenu ON DocumentMenuID=DocumentMenuLinkIDWHERE DocumentID=@DocumentIDENDGO
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
<connectionStrings> <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
Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) 'This code you only need to update 'Fires when the application is started RegisterRoutes(RouteTable.Routes)End SubSub 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 documentsEnd Sub
C#
public void Application_Start(object sender, EventArgs e) //This code you only need to update{ //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
<div><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
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 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 IfEnd Sub
C#
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString);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
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional"><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 type="text/javascript" src="/tiny_mce/tiny_mce_src.js"></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
Imports System.Data.SqlClient 'Above your classDim 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 IfEnd Sub
C#
using System.Data.Sql;//Above your class
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><h1><asp:Label id="HeaderLabel" runat="server" Text="PageTitle"></asp:Label></h1></div><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
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString)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 TryEnd Sub
C#
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString);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
<h1><asp:Label ID="Subject" runat="server" Text="My QMS System"></asp:Label></h1><div id="MyContent" runat="server"></div><div id="LastUpd" runat="server" style="clear: both;"></div>
VB
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 Not IsPostBack ThenIf 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 IfEnd IfEnd Sub
C#
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings("MySqlConnection").ConnectionString);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!