.NET Easy
ASP.NET na prática
Crie passo a passo seu próprio Blog – Parte 2
Neste artigo veremos
· Como desenvolver uma nuvem de tags;
· Como desenvolver a área administrativa do blog;
· Como criar uma tela de pesquisa de posts;
Qual a finalidade
· Melhorar a interação entre usuário e blog através de pesquisas e áreas administrativas;
Quais situações utilizam esses recursos?
· O acesso a banco de dados é sempre uma parte importante no desenvolvimento de qualquer
Web Site. Veremos na prática esse acesso;
Resumo do DevMan
Faremos nesse artigo o desenvolvimento de três recursos especiais.
- Tag Cloud: uma nuvem de tags que podem ser usadas pelo internauta como referência a assuntos mais comentados;
- Área administrativa: Área onde o usuário administrador publicará novos posts;
- Pesquisa: Esquema de pesquisa de assuntos.
Na primeira parte deste mini-curso, vimos como iniciar o desenvolvimento de um blog utilizando o Microsoft Access 2003 como banco de dados e ASP.NET na criação das páginas. Vimos também como criar páginas de administração para manutenção das postagens de nosso blog.
Como dito anteriormente, os blogs tem se tornado grandes canais de comunicação na internet. Cada dia que passa mais e mais pessoas aventuram-se na criação de suas páginas pessoais e expõem suas idéias, notícias, estilo de vida e os mais variados assuntos. O mais interessante nisso tudo é que os blogs acabam se tornando também um grande arquivo on-line sobre determinado assunto, e, certamente, depois de alguns meses de inclusão dessas idéias uma boa pesquisa se faz necessário, caso contrário fica praticamente impossível encontrar todas as informações incluídas na página.
Pensando nisso chegamos a conclusão que todo bom blog deve permitir que o visitante pesquise palavras chave por assunto. No artigo anterior nós criamos uma <div> para armazenar as Tag’s de nosso Web Site. Esse recurso tem sido fortemente utilizando em muitos sites e faz parte da tão chamada Web 2.0.
Tag’s são como rótulos para um determinado assunto. Um assunto pode ter mais de uma tag associada a ele. Por exemplo: se estamos postando uma informação sobre o Campeonato Brasileiro, podemos adotar como tag as palavras: futebol, esporte, campeonato, bola, campo, estádio, jogador, etc. Enfim, tudo que venha a lembrar o tema Campeonato Brasileiro. Um bom exemplo de site que utiliza o recurso de tags é o http://del.icio.us. Eles chamam de tag cloud, ou Nuvem de Tags, Figura 1. Além das tag’s podemos fazer a pesquisa no Titulo e no Texto da postagem.
Nessa parte do artigo, finalizaremos nosso blog dando funcionalidade ao campo pesquisa incluída no topo de nossa página. Além disso, ainda veremos como incluir uma nuvem de tags em nossas páginas e o desenvolvimento de uma área administrativa para inclusão, visualização e exclusão de posts.
Figura 1. Nuvem de tags no del.icio.us
Incluindo pesquisa no blog
Assim como mencionado anteriormente, faremos uma implementação bastante interessante, onde permitiremos que o usuário de nosso blog possa visualize as tags referentes aos assuntos mais discutidos. Através das tags nosso internauta poderá encontrar, através de uma pesquisa, os posts que contém tal assunto.
Para que esta funcionalidade também seja incorporada ao nosso blog, vamos criar uma tela de pesquisa. Portanto abra nosso projeto criado no artigo anterior usando o menu File>Open> Web Site, selecione a pasta onde salvou o projeto e em seguida clique com o botão direito na pasta Blog no Solution Explorer. Por fim selecione a opção Add new item. Escolha Web Form, marque a opção Select master Page e dê o nome de Pesquisa.aspx ao arquivo. Na tela seguinte selecione Blog.master após clicar na pasta Design.
Veja que criamos uma nova página baseada nas páginas anteriores, ou seja, temos uma área comum para o site e outra área que é destinada aos detalhes de página.
Digite o texto Resultado da pesquisa e pressione enter. Na linha debaixo digite Abaixo estão os posts relacionados a sua pesquisa. Por fim, formate-os de acordo com o seu gosto. Insira logo abaixo um controle Literal(litResultado) da paleta Stardard. Esse controle será usado para que tenhamos um título dinâmico, ou seja, modificaremos o título da página de pesquisa de acordo com o resultado. Como o conteúdo será totalmente dinâmico, faremos a inclusão de um Repeater(RPTPaginas) e codificaremos sua aparência e os dados que serão impressos nele.
Clique em Source no rodapé do Visual Studio 2005 para que possamos visualizar o código de nossa página. Localize a tag de fechamento do objeto ContentPlaceHolder(</asp:Content>) e inclua um espaço para que possamos digitar nosso código dentro do ContentPlaceHolder. Altere o código conforme a Listagem 1 e vamos entender o que estamos fazendo.
Listagem 1. Página de pesquisa Blog/Pesquisa.aspx
01 <%@ Page Language="VB" MasterPageFile="~/Design/Blog.master"
02 AutoEventWireup="false"
03 CodeFile="Pesquisa.aspx.vb" Inherits="Blog_Pesquisa" %>
04
05 <asp:Content ID="Content1" ContentPlaceHolderID="CPHBlog" runat="Server">
06 <h1>
07 Resultado da pesquisa
08 </h1>
09 <h2>
10 Abaixo estão os posts relacionados a sua pesquisa
11 </h2>
12 <h3><asp:Literal runat="server" ID="litResultado"></asp:literal></h3>
13 <asp:Repeater ID="RPTPaginas" runat="server">
14 <ItemTemplate>
15 <hr />
16 <p>
17 [<%#Convert.ToString(Eval("DataInsercao"))%>] <a href='<%#
18 "../Blog/Pagina.aspx?PaginaID=" & Convert.ToString(Eval("ID"))%>'>
19 <h3>
20 <%#Convert.ToString(Eval("Titulo"))%>
21 </h3>
22 </a>
23 <%#Left(Replace(Convert.ToString(Eval("Texto")), vbCrLf, "<br />"), 200)%>
24 <i>(...)</i>
25 <br />
26 <a href='<%# "../Blog/Pagina.aspx?PaginaID=" & Convert.ToString(Eval("ID"))%>'>
27 [+] ver post </a>
28 ...
