Back-End

21 dez, 2009

Criando um site com caixas de notícias

Publicidade

Veremos como como construir um site com caixas (boxes), onde serão carregadas informações que desejamos. Iremos carregar, em uma página, algumas notícias
que vamos definir como destaque e, ao lado delas, itens de um determinado
tipo, que vamos chamar de artigo. Esse é um exemplo simplificado,
podendo ser melhorado e expandido.

Para realizar o que propomos aqui, é preciso um pouco de conhecimento da língua inglesa e alguma
familiaridade com o Drupal.

Versões

Esse artigo foi feito com base no Drupal e módulos nas versões abaixo:

  • Drupal – 5.7
  • Panels – 2.0-beta3
  • Views – 1.6
  • Nodequeue – 2.0

Ele pode funcionar com versões mais novas desses módulos, mas é provável que com versões anteriores não funcione.

Antes de começar o tutorial você já deve ter instalado o Drupal.

Baixando os módulos

Para começarmos temos que baixar os módulos que utilizaremos nas suas respectivas páginas no Drupal.org

Após baixar esses módulos, vá até a pasta sites/all da sua instalação do Drupal e, ali, crie uma pasta chamada modules.
Dentro da pasta modules descompacte o conteúdo de cada um dos 3 módulos
que baixamos. Isso fará com que você possa instalar esses módulos no
seu site.

Habilitando os módulos

Tendo feito isso e assumindo que o seu site esteja rodando em http://localhost e com as Urls limpas (clean urls) ativadas, vá até http://localhost/admin/build/modules.

Nessa página são mostrados todos os módulos disponíveis para
instalação. Você verá que, apesar de termos baixado 3 pacotes, existem
vários módulos novos para instalação. Isso se dá porque cada pacote que
baixamos pode ter vários módulos.

Você deve então habilitar os módulos que usaremos que são:

  • Panels
  • Panel pages
  • Views
  • Node Queue

Para habilitar basta marcar a caixa de texto na em frente ao nome de cada módulo, e depois clicar no botão Salvar configurações (Save configurations) no final da página.

Entendendo os módulos

Uma vez habilitados os módulos, já temos os módulos necessários para
a construção do nosso site personalizado, mas a simples instalação não
faz o que precisamos. Nesse momento vamos ver o que cada um desses
módulos faz para entendermos porque os habilitamos.

Panels: capacita o site a ter uma visualização em painéis (panels, em inglês). Ele será a peça fundamental para a construção do layout da página.

Panels Page: complemento para o Panels. Ele possibilita criação de páginas com painéis, que é o que queremos.

Views: esse é um dos módulos mais utilizados com o Drupal pois possibilita
uma grande flexibilidade na extração de dados. Ele será usado para
montar as listagens que usaremos no nosso site.

Node Queue: esse módulo não é essencial para uma construção de site no formato
que queremos, mas o utilizaremos por ele trazer uma abordagem mais
simples para a promoção de páginas a destaques.

Definindo um destaque

Uma vez que vamos construir uma página que carregará os nossos
destaques, precisamos definir o que seria esse destaque. Isso será
feito usando-se o módulo Node Queue. Esse módulo permite que adicionemos determinados conteúdos a Queues (filas). Em conjunto com o módulo Views e o Panels ele vai realizar o efeito que queremos. Assim, o primeiro passo é criar um queue.

Criando um queue

Para criar um queue acesse http://localhost/admin/content/nodequeue ou vá navegando pelo menu em Administrar > Organizar conteúdo > Node queue .

Aqui podemos adicionar um novo queue ao clicarmos em Add node queue.

Ao acessar a página de criação de queues você deverá preencher alguns dados:

  • Título – O nome do queue. Para nós será Destaques
  • Queue size – O número máximo de elementos nesse queue. Vamos deixar 0 pois não queremos limitar.
  • Link “add to queue” text – Texto que aparecerá para adicionarmos um item a esse queue. Podemos colocar somente Adicionar aos destaques.
  • Link “remove from queue” text – Texto que aparecerá para removermos um item desse queue. Podemos colocar somente Remover dos destaques.
  • Papéis – Se você quiser limitar quais papeis podem adicionar a destaques, escolha aqui. Não vamos escolher nenhum.
  • Tipos – Aqui são os tipos que poderão ser adicionados a essa fila. Para o nosso tutorial, vamos usar apenas as notícias (ou story).

Por fim, envie o formulário, e teremos o nosso queue pronto.

Somente essa configuração não é suficiente para termos o efeito desejado, mas é o primeiro passo.

Agora vamos adicionar o nosso tipo Artigo que será carregado ao lado dos destaques, conforme especificamos no inicio do tutorial.

Criando um novo tipo

A partir do Drupal 5 você pode criar quantos tipos achar necessário, sem
precisar programar nenhuma linha de código. Isso foi criado para
facilitar a vida de pessoas que ainda não têm conhecimento suficiente
de programação mas precisam de algo fácil.

Para o nosso tutorial, vamos criar um tipo Artigo que será, automaticamente, listado ao lado dos destaques na nossa página de destaques.

Para criar um novo tipo acesse http://localhost/admin/content/types/add ou Administrar > Organizar conteúdo > Tipos de conteúdo > Novo tipo de conteúdo.

Aqui serão solicitados alguns campos, mas vou detalhar somente os mais importantes:

  • Nome – Nome do nosso tipo. Preencha como Artigo
  • Tipo – O nome do tipo, em formato de máquina (sem acentos, espaços etc.). Preencha como artigo.
  • Descrição – A descrição do tipo. Ela será exibida na página de criação de tipo. Preencha com o que desejar.
  • Rótulo do campo “título” – O nome do campo título que será exibido para o usuário ao adicionar um novo artigo. Deixe o padrão.
  • Rótulo do campo “corpo” – O nome do campo corpo que será exibido para o usuário ao adicionar um novo artigo. Deixe o padrão.
  • Opções padrão – São as opções de publicação padrão do seu tipo. Desmarque Promovida à página principal.

Ao final, salve esse formulário.

Agora teremos a opção de adicionar o nosso novo tipo no menu Criar conteúdo. Crie uns dois ou três artigos (esse novo tipo que adicionamos) e umas duas ou três notícias (tipo story) pois usaremos esses conteúdos mais na frente.

Ativando o destaque

Como já expliquei no inicio, o módulo Views é o
responsável por carregar informações em formatos que desejamos, sem que
precisemos escrever instruções SQL ou código PHP. Esse módulo será
usado tanto para carregar os destaques quanto para carregar os nossos
artigos.

Na verdade, ao criar um queue com o módulo Node Queue
ele já realizou parte do trabalho. Esse módulo já criou a view que
carregará as informações de destaque, e assim só precisamos ativá-la.
Para isso acesse http://localhost/admin/build/views ou Administrar > Construção do site > Views , e localize a linha onde está a view chamada nodequeue_1 e clique no link Enable dessa view.

Assim teremos a view dos destaques devidamente habilitada e agora
poderemos criar o nosso painel, onde, efetivamente, estará a
visualização que desejamos.

Criando um painel

Para criar um painel, acesse http://localhost/admin/panels/panel-page/add ou Administrar > Panels > Panel pages > Add.
A criação de um painel se dará em forma de Wizard
(telas passo-a-passo). De forma a facilitar o entendimento vamos ver
cada uma dessas telas, mas nos atendo ao que for necessário para o
nosso tutorial. Você verá que existem várias configurações que não
exploraremos mas que fazem com que o poder de construção de paineis
seja maior.

Então vamos à primeira tela.

Aqui podemos escolher a forma como o nosso painel será exibido. Como
definimos no começo, o nosso painel será composto de 2 colunas, cada
uma contendo o bloco que desejamos (destaques e artigos). Assim,
escolhemos a opção Two column.

Na segunda tela, temos algumas informações, das quais preencheremos:

  • Panel name – o nome do nosso painel. Vamos chamar de destaques. Veja que aqui só são aceitos letras, números e caracteres de sobrescrito.
  • Endereço – O endereço que o usuário irá acessar para visualizar o nosso painel. Vamos chamar de destaques.

Por enquanto só iremos preencher esses dados, e vamos clicar no botão Next para irmos para a próxima parte do nosso painel.

Nessa próxima tela, Advanced, não vamos preencher nada, apenas clicar no botão Next.

Novamente iremos passar pela tela Context sem preencher nada, pois no nosso tutorial ela não será usada. Clique no botão Next.

Chegamos, finalmente, à tela Conteúdo. Aqui é onde adicionamos o que desejamos que seja carregado no nosso painel. É onde a ação acontece.
Você pode ver que há dois espaços, um chamado Left side e Right side,
que nada mais são que os locais onde as informações serão carregadas.
Esses dois espaços são exatamente as duas colunas que escolhemos ao
iniciar a criação do nosso painel(se lembra de escolher Two Column no início?). Se houvessemos escolhido 3 colunas, teríamos aqui 3 espaços.

Agora clique ao ícone de + no Left side e você verá que se abrirá uma tela para escolhermos qual bloco iremos carregar nessa nossa região.

Se você reparar na seção Contributed modules dessa pequena janela, verá que há um bloco ali que nos é familiar, o bloco Destaques que criamos ao adicionar o nosso node queue.

Clique no ícone desse bloco para adicioná-lo.
Você irá para uma nova janela, onde não preencheremos nada, e só clicaremos no botão Add pane no final dessa janelinha.

Por enquanto não temos o que carregar na outra área, por isso vamos deixá-la sem nada, e clicar no botão Save para criar nosso bloco.

Agora, se acessarmos http://localhost/destaques veremos como ficou nosso painel.

Lembre-se que só será carregado nesse painel notícias (story) que você clicou no link Adicionar aos destaques. Se você não criou nenhuma notícia ou se não adicionou nenhuma aos destaques, a página ficará vazia.

Bacana, temos o nosso painel, mas não é ainda o que prometemos para
esse tutorial. Afinal, ele não está carregando os nossos artigos (você
se lembra que criamos um tipo artigo não é?).

Pois bem, então vamos adicionar esse recurso ao nosso painel.

Criando uma view de artigos

Como já disse, o módulo Views permite uma grande
flexibilidade de carregamento de dados do nosso site. Nós já vimos isso
em ação pois o bloco de destaque que está sendo carregado no nosso
painel é uma view. O que precisamos é criar nossa própria view, com os
dados que queremos.

Vamos lá, então!

Acesse http://localhost/admin/build/views ou Administrar > Construção do site > Views e clique na opção Add para adicionar uma nova view.
Uma
view pode ser algo muito complexo, por isso não vamos abordar todas as
opções disponíveis, apenas aquelas necessárias para o nosso tutorial.
Vamos aos campos, separados por cada uma de suas seções:

Basic Information

Nessa seção preenchemos as informações básicas da nossa view.

  • Nome – O nome da nossa view. Vamos chamá-la de artigos

Bloco

Aqui vamos preencher as informações de bloco. Como vamos usar nossa
view num painel só vamos adicionar um bloco e não uma página.

  • Marque a caixa Provide Block pois o que desejamos é um bloco que será carregado no nosso painel.
  • View Type – Aqui podemos escolher como será exibido o nosso bloco. Escolha Teaser List.
  • Título – O título do bloco. Preencha com Artigos
  • Nodes per Block – A quantidade de elementos que serão carregados nesse bloco. Preencha com 10.

Filtros

Aqui podemos filtrar o que será carregado no nosso bloco. Como só queremos objetos do tipo Artigo será aqui que iremos definir isso.

  • Add Filter – O tipo de filtro. Escolha Node: Type e clique no botão Add filter.
    Será carregada a tela novamente com as outras seções fechadas, não se preocupe, os dados ainda estão lá.
    Agora você apenas precisará escolher como esse filtro irá se comportar.
    Em Operator deixe Is One Of e em Valor escolha Artigo (o nosso tipo).

Sort Criteria

Aqui é a nossa última opção, que nada mais é que a forma como os
dados serão ordenados para exibição. Como queremos ver os últimos
artigos no topo da lista precisamos configurar isso. Para tanto proceda
assim:

  • Add criteria – Escolha Node: Created Time e clique no botão Add Criteria.
    Em seguida a página será recarregada e você poderá escolher como será feita a ordenação e então em Order escolha Descending.

Pronto, agora é só salvar a nossa view e ela já estará disponível para utilizarmos no nosso painel.

Adicionando os artigos ao painel

Agora vamos à parte final do nosso painel. Acesse http://localhost/admin/panels/panel-page ou Administrar > Panels > Panel pages e veja que o nosso painel foi listado.

Clique no link Editar e em seguida na aba Conteúdo.

Essa tela nós já vimos. Agora clique no ícone + da região Right side e na tela que se abrirá escolha, na seção Contributed modules, o nosso recém criado bloco de artigos. Da mesma forma, na tela seguinte ao se clicar no ícone do nosso bloco, não preencha nada, e apenas clique no botão Add pane.

Por fim, clique no botão Save no final da página e em seguida acesse http://localhost/destaques.
Pronto, temos a nossa página personalizada, com informações relevantes.

Considerações finais

Vimos como criar uma página diferente para o nosso site, usando módulos já existentes e sem programar nenhuma linha de código.

Obviamente que algumas pessoas vão querer personalizar ainda mais essas informações. Os
módulos utilizados nesse tutorial permitem um enorme grau de
personalização mas que exigem um pouco mais de conhecimento tanto de
PHP e HTML/CSS quanto de Drupal.

Também existem outras formas de se obter esse mesmo efeito, sem esses módulos. Mas nem sempre são tão simples ou tão rápidas.

Você encontrará, em inglês, toda documentação desses módulos em:

Se esse artigo foi útil para você, e se você pode contribuir com
alguma informação/experiência, sinta-se à vontade para comentar. Se
você encontrar erros ou inconsistências, os comentários também estão
abertos para sua contribuição.

*

Publicado originalmente em Drupal Brasil por Rafael Ferreira da Silva