Criando um sistema de postagens em ASP.NET

Todos ou a maioria de nós já vimos algum dia um site onde se cadastra conteúdo que será exibido dinamicamente. Um exemplo bastante comum disso são os blogs, onde o usuário cadastra postagens que são listadas em uma página principal e o visitante consegue acessá-los dinamicamente.

Nesse artigo veremos como montar uma estrutura desse tipo, onde um usuário cadastrará posts que serão listados em uma página principal, a partir da qual as postagens poderão ser acessadas.

Não é objetivo desse artigo tratar questões como segurança ou cadastro de usuários. Haverá um único usuário responsável pelas postagens e apenas três páginas:

• Página principal onde serão listadas as postagens.
• Página de cadastro de postagens.
• Página da postagem que exibirá o conteúdo de cada publicação.

O banco de dados

Como precisaremos armazenar informações como o título e o conteúdo das postagens, nada mais adequado que utilizar um banco de dados. Portanto, começaremos definindo a tabela que armazenará as publicações do site.

Nesse exemplo foi utilizado o SQL Server 2012, mas o leitor pode optar por utilizar o sistema de banco de dados de sua preferência.

CREATE DATABASE DB_SisetemaPostagens
GO

USE DB_SisetemaPostagens
GO

CREATE TABLE TB_Posts
(
	ID		INT IDENTITY PRIMARY KEY,
	TITULO		VARCHAR(100) NOT NULL UNIQUE,
	AUTOR		VARCHAR(100) NOT NULL,
	CONTEUDO	VARCHAR(MAX) NOT NULL
)
GO

Precisaremos apenas de uma tabela bem simples, uma vez que o objetivo desse artigo é apresentar conceitos básicos.

A página de cadastros

Podemos então iniciar o desenvolvimento do sistema propriamente dito. No Visual Studio vá até o menu File –> New –> Web Site e selecione o template ASP.NET Web Forms Site.

Observação: nesse artigo foi utilizado o Visual Studio 2012, mas para outras versões o procedimento e estrutura não são muito diferentes, sendo possível adaptar.

É viável para nós criarmos primeiramente a página de cadastro de posts, já que a página principal irá listar essas postagens. Então, adicione um novo web form ao projeto clicando com a direita sobre a Master Page e escolhendo a opção Add Content Page. Em seguida altere o nome do arquivo criado para Cadastro.aspx.

Em seguida abra a Master Page, localize o menu principal da aplicação e adicione um link para a página recém criada. No Visual Studio 2012, o menu encontra-se em uma tag nav e sua estrutura já alterada pode ser vista na listagem a seguir.

<nav>
    <ul id="menu">
        <li><a runat="server" href="~/">Principal</a></li>
        <li><a runat="server" href="~/Cadastro.aspx">Cadastro</a></li>
    </ul>
</nav> 

Na figura a seguir é possível visualizar o resultado, onde o menu encontra-se destacado.

Logo acima do menu encontram-se as opções padrão de login do template do ASP.NET, mas esses itens não serão utilizados aqui.

Vamos então montar a estrutura da página de cadastros, adicionando alguns campos para inserção de dados. Acesse a página Cadastro.aspx, visualize o código HTML e o altere conforme a Listagem 3.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeFile="Cadastro.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" 
Runat="Server">    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" 
Runat="Server">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Cadastro de posts</h1>                
            </hgroup>
        </div>
    </section>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" 
Runat="Server">
    <h3>Preencha os dados a seguir</h3>
    <div>
        <label for="txtAutor">Autor:</label>
        <input type="text" id="txtAutor" runat="server" />
        <label for="txtTitulo">Título:</label>
        <input type="text" id="txtTitulo" runat="server" />
        <label for="txtConteudo">Conteúdo:</label>
        <textarea id="txtConteudo" runat="server" style="width:100%; 
        height:auto"></textarea>
        <asp:Button Text="Cadastrar" ID="btnCadastrar" 
        OnClick="btnCadastrar_Click" runat="server"/>
 <span id="lblMensagem" runat="server" />
    </div>
</asp:Content>

De volta a browser, clicando no menu “Cadastros” seremos redirecionados para a página cujo layout acabamos de alterar. O resultado é visto na figura a seguir.

Se observamos, na linha em que adicionamos o botão definimos o valor btnCadastrar_Click para a sua propriedade OnClick. Isso indica que teremos um método com esse nome no code behind para tratar o evento click desse elemento. É nesse método que implementaremos o processo de cadastro do post.

Então, acesse o arquivo Cadastro.aspx.cs e, caso o Visual Studio não tenha criado automaticamente, adicione o método supracitado com o seguinte código.

protected void btnCadastrar_Click(object sender, EventArgs e)
{
    using (SqlConnection con = new SqlConnection("Data Source=SERVIDOR; Initial 
    Catalog=DB_SisetemaPostagens; User Id=USUARIO; Password=SENHA;"))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO TB_Posts 
        (TITULO, AUTOR, CONTEUDO) VALUES (@TITULO, @AUTOR, @CONTEUDO)", con))
        {
            cmd.Parameters.AddWithValue("TITULO", txtTitulo.Value);
            cmd.Parameters.AddWithValue("AUTOR", txtAutor.Value);
            cmd.Parameters.AddWithValue("CONTEUDO", txtConteudo.Value);
            try
            {
                con.Open();
                if (cmd.ExecuteNonQuery() > -1)
                {
                    lblMensagem.InnerText = "Post cadastrado com sucesso.";
                }
            }
            catch (Exception ex)
            {
                lblMensagem.InnerText = "Erro ao cadastrar post.\n" + ex.Message;
            }
            finally
            {
                con.Close();
            }

        }
    }
}

É preciso adicionar a referencia ao namespage System.Data.SqlClient através do comando using no topo do código, como mostra a listagem a seguir.

using System.Data.SqlClient;

Na Listagem 4 estamos instanciando um objeto SqlCommand a partir de uma SqlConnection e executando um script de insert com os dados inseridos nos campos previamente criados.

Observação: essa não é a melhor forma de realizar inserções no banco, mas boas práticas e padrões como MVC fogem do objetivo desse artigo.

Para que o código funcione, altere as credenciais de acesso ao servidor e o nome do mesmo na string de conexão da SqlConnection.

Na Figura 3 temos um exemplo do código funcionando.

Agora que já é possível cadastrar as postagens, podemos trabalhar na página principal para listar as mesmas.

A página principal

Acesse a página Default.aspx criada automaticamente e altere seu código conforme a Listagem.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content runat="server" ID="FeaturedContent" 
ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET 
                application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" 
                title="ASP.NET Website">http://asp.net</a>. 
                The page features <mark>videos, tutorials, and 
                samples</mark> to help you get the most from 
                ASP.NET. If you have any questions about ASP.NET visit 
                <a href="http://forums.asp.net/18.aspx" title="ASP.NET 
                Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" 
ContentPlaceHolderID="MainContent">
    <h3>Postagens</h3> 
    <asp:DataList ID="dtlPosts"   runat="server" DataKeyField="ID" 
    style="width:100%">
        <ItemTemplate>
            <h5><asp:HyperLink NavigateUrl='<%# 
            Eval("ID", "VerPost.aspx?ID={0}") %>' runat="server"><%# 
            Eval("TITULO") %></asp:HyperLink></h5>                
            <asp:Label ID="AUTORLabel" runat="server" Text='<%# 
            Eval("AUTOR") %>' />
        </ItemTemplate>
    </asp:DataList>
</asp:Content> 

Nessa página criamos um DataList que irá listar todos os posts cadastrados. No ItemTemplate criamos um hiperlink que redireciona o usuário para a página VerPost, passando como parâmetro o ID da publicação.

Para que os registros sejam listados, é preciso conectar ao banco de dados e fazer um select. Isso é feito no code behind, no arquivo Defaultl.aspx.cs com o código a seguir.

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        using (SqlConnection con = new 
        SqlConnection("Data Source=SERVIDOR; 
        Initial Catalog=DB_SisetemaPostagens; 
        User Id=USUARIO; Password=SENHA;"))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT * 
            FROM TB_Posts", con))
            {
                try
                {
                    con.Open();
                    dtlPosts.DataSource = cmd.ExecuteReader();
                    dtlPosts.DataBind();
                }
                finally
                {
                    con.Close();
                }

            }
        }
    }
}

A figura a seguir mostra a página principal com alguns itens listados.

Visualizando as postagens

Por fim, a última funcionalidade que falta implementar é a de permitir ao usuário visualizar as postagens. Como já fizemos na Listagem links para a página VerPost.aspx, vamos adicionar um novo web form com esse nome, repetindo o processo de inserção feito anteriormente.

Após criar o web form e renomeá-lo para VerPost.aspx, altere seu código de acordo com a listagem a seguir.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeFile="VerPost.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" 
Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" 
Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" 
Runat="Server">
    <h3><%: Titulo %></h3>
    <br />
    <div>
        <asp:Literal runat="server" ID="litConteudo"></asp:Literal>
    </div>
</asp:Content>

Agora basta inserir o código a seguir no code behind para que seja feita uma consulta ao banco de dados e os devidos valores exibidos nos campos criados.

public string Titulo{ get; set; }
public string Conteudo { get; set; }

protected void Page_Load(object sender, EventArgs e)
{
    using (SqlConnection con = new SqlConnection("Data 
    Source=NEWJOEL-PC\\SQL2012; Initial Catalog=DB_SisetemaPostagens; 
    User Id=sa; Password=exp123;"))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM TB_Posts 
        WHERE ID=@ID", con))
        {
            cmd.Parameters.AddWithValue("ID", Request.QueryString["ID"]);
            try
            {
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                rdr.Read();
                Titulo = rdr.GetString(1);
                Autor = rdr.GetString(2);
                Conteudo = rdr.GetString(3);
                litConteudo.Text = System.Web.HttpUtility.HtmlEncode(Conteudo);
            }
            finally
            {
                con.Close();
            }
        }            
    }
}

Foram criadas algumas variáveis para armazenar o título e o conteúdo do post selecionado. Em seguida preenchemos essas variáveis com o conteúdo vindo do banco de dados.

Ao passar o conteúdo para o objeto Literal, usamos a função HtmlEncode, que nos permite cadastrar códigos HTML no conteúdo do post.

A seguir temos um exemplo de um post aberto, exibindo o título e o conteúdo ao clicarmos sobre um dos itens listados na página principal.

Conclusão

Como vimos, é bastante simples criar um sistema de cadastro e exibição de postagens em ASP.NET. Apesar de aqui não terem sido abordados conceitos avançados como segurança e controle de usuários, utilizamos os princípios básicos necessários para o desenvolvimento desse tipo de sistema.

Então finalizamos aqui esse artigo. Caso surjam dúvidas a respeito do conteúdo aqui apresentado, fiquem à vontade para utilizar a seção de comentários logo abaixo.