Crear un CMS básico en SQL Server y NET

Cómo construir un sistema de gestión de contenidos con una base de datos SQL Server y una aplicación de formularios web ASP.NET. Esto es de la primera versión de Ousia.

Contexto

Este artículo se escribió por primera vez en 2012. La tecnología ha avanzado considerablemente en este tiempo, pero lo dejaremos aquí por si a alguien le resulta de utilidad.

Te damos la bienvenida al artículo para la creación de un CMS. Este artículo requiere al menos algunos conocimientos básicos de SQL y HTML, y una copia de SQL Server y Visual Studio 2008 instalado.

Tu sitio ha llegado a la etapa en la que quieres empezar a añadir contenido de forma dinámica, hay un montón de opciones por ahí, tanto gratuitas como de pago (Lista en Wikipedia), pero ¿por qué no crear tu propio CMS?

Vamos a entrar directamente en la codificación, el primer paso es añadir la tienda de usuario ASP, si nunca has hecho esto, entonces lee este artículo Introducción a la Membresía.

El segundo paso será añadir nuestras tablas SQL y procedimientos almacenados a la base de datos. El campo DocumentID es una clave primaria para mejorar el rendimiento. Si no tienes conocimientos de SQL, consulta las siguientes ideas;

Claves primarias
Claves Foráneas
Tipos de Datos SQL

SQL

--Create Tables
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

Configuración de la aplicación

Eso es todo para el código SQL, la siguiente etapa es la creación de un sitio web para manejar la visualización de nuestro documento, una lista de documentos para editar y una página de edición de documentos.

Abre un nuevo proyecto o el proyecto al que vas a añadir esto. Necesitamos agregar Global.asax (Clase de Aplicación Global) a este proyecto, agregarle el manejo de rutas y registrar las rutas en la tabla. La siguiente aplicación tiene las siguientes páginas accesibles para todos;

Página de inicio
Página Acerca de
Página de inicio de sesión (Cubierto en otro artículo)
Directorio Blog (Todos los documentos)
Sub Directorio del Blog (SQL, .NET por ejemplo)
Artículos del blog

Web Routing Config

Importar

Necesitarás importar System.Web.Routing.

He comentado cada línea para mostrar lo que hace cada una. También necesitamos crear una conexión SQL en nuestro archivo web config.

Estoy usando TinyMCE, un editor de Java Script más adelante, por lo que también tenemos que cambiar el modo de validación de la solicitud y el enrutamiento de la página requiere de la actualización de los módulos.

VBC#

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 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#

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
}

Administrar biblioteca de documentos

Aquí vamos a tener una lista de todos los documentos, y enlaces para poder verlos o editarlos...

Para esto añade un nuevo formulario web llamado ManageDocuments.aspx

HTMLVBC#

HTML

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 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 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
  }
}

Editor de texto

Aquí he utilizado el editor de texto Tiny MCE. He encontrado que funciona muy bien para lo que quería lograr, sin embargo hay algunos pasos más para usarlo...

Empieza por añadir un nuevo formulario web llamado ManageDocument.aspx. Es posible que tengas que añadir el gestor de scripts manualmente.

HTMLJavaScriptVBC#

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

VB

Imports System.Data.SqlClient
'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#

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);
}
}
}

Página de directorio

Esta página mostrará todos los artículos utilizando el tema de contenido que hemos enrutado.

La forma en que se ha diseñado nos permite utilizar la misma página para dos secciones, simplemente proporcionando un filtro cuando sea necesario...

Añade un nuevo formulario web ContentSubj.aspx

HTMLVBC#

HTML

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 Try
End 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");
  }
}

Páginas de contenido

Si no necesitas contenido personalizado en tus páginas de inicio y acerca de, entonces simplemente añade la página de contenido y edita la ruta de la página...

En estas páginas puedes añadir y dar estilo a lo que quieras, siempre y cuando tengas el siguiente código.

HTMLVBC#

HTML

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 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#

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();
}
}

Para terminar

Este es un documento antiguo, pero todavía contiene ideas relevantes, ¡así que úsalo como base para lo que te apetezca hacer!