Tutorial - Criando um site com caixas de notícias

Introdução

Esse tutorial foi escrito para suprir a necessidade de várias pessoas na comunidade Drupal Brasil. São pré-requisitos para realizar esse tutorial um pouco de conhecimento da língua inglesa e alguma familiaridade com o Drupal.

Objetivo

O objetivo desse tutorial é mostrar como construir um site com caixas (boxes) onde serão carregadas informações que desejamos.

Pare esse tutorial, 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.

Versões

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

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. Caso você não saiba como instalar o Drupal veja o screencast de instalação do Drupal também feito por mim.

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, alí, 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:

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

Ele 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:

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

À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:

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.
A

ssim 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 prencheremos:

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 alí 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 equanto 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.

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.

Filtros

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

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:

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ê encontará, em inglês, toda documentação desses módulos em:

Se esse tutorial 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.