Formatação de código

Os códigos coloridos daqui do blog, são "criados" neste site:
http://www.pygments.com/colorize/

É isso!

Como criar seu próprio conteúdo (2)

Atenção: Olhe a nota de correção (FIX) ao final do post!

Continuando um post anterior…

Quero incrementar as informações da minha revista: quero colocar uma capa para cada uma :)

Vá para /admin/build/modules ou (Administer > Site Building > Modules) e habilite o módulo “Upload”.

Agora vá para a parte de edição do conteúdo da sua revista.
No fieldset “File attachments”, escolhe seu arquivo (o meu eu baixei do mesmo site: SpawnAlley) e clique em “Attach”.

Clique em “Save”, verifique o resultado e…. a imagem aparece listada, mas apenas como um link! Isto se deve à customização que foi feita na apresentação deste conteúdo.
Obs.: Se quiser que o link para o arquivo anexado suma, basta desmarcar a opção “List” correspondente ao arquivo.

Mostrando a imagem

Vá para /admin/content/templates/revista.

Verifique novamente os body variables e procure pela imagem anexada. No meu caso, o caminho para a imagem se encontra em:

$node->files[1]->filepath

Repare que esta variável já nos fornece o caminho certo para acessar a imagem, logo se colocarmos o valor desta variável dentro de um “src” de uma <img >, já teremos uma maneira simples de visualizar a imagem.

No arquivo node-revista.tpl.php, insira a seguinte linha:

<img src="<?php print base_path() . "/" . $node->files[1]->filepath ?>" height="150" >

Salve e verifique o resultado na página da sua revista. O conteúdo, ao seu ver, pode ter ficado meio bagunçado.

Mas a partir daqui é só questão de organizer seu layout no arquivo node-revista.tpl.php. =)

Segue o resultado do meu site:

FIX: Ao inserir mais revistas, percebi que o índice "1" usado na linha de código mais acima, só funciona para o primeiro caso (ou seja para a primeira imagem anexada).

O comportamento que ocorre aqui, pelo que eu pude perceber, é: o índice varia de acordo com o contador de arquivos "upados" no site. E se a revista não anexou um arquivo (imagem, etc) este contador não avança.

Logo, deve-se testar se o array está vazio, caso contrário procurar pela primeira posição não nula:

<?php
if ($node->files != null) {
$i = 0;
while ($node->files[$i] == null) $i++;
?>
<img src="<?php print base_path() . "/" . $node->files[$i]->filepath ?>" width="100" >
<?php
}
?>

Com isso, cada "revista" mostrará a imagem correspondente.

Para saber mais sobre Theming, visite o Theming guide.

Google Analytics

Eu acabei de “instalar” neste blog. É uma ferramenta que serve para monitorar vários tipos de dados sobre visitas ao seu site e, o melhor, é bem simples de instalar :D

Entre em:

https://www.google.com/analytics/

* crie uma conta, caso necessário :)

• Clique em “+ Add new profile”
• Selecione a opção “Add a Profile for a new domain”, coloque a URL do seu site e clique em “Continue”
• Copie o tracking code disponibilizado e clique em “Finish”

Agora abra o arquivo html/php/asp/etc principal do seu site e cole o código logo antes de terminar o Body da sua página (logo antes de </body>):

<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-XXXXXXX-X"); pageTracker._trackPageview(); } catch(err) {}</script>

Se o seu site em questão for um blog aqui do blogger (como no meu caso):

• Clique em “Personalizar”
  
• Na aba “Layout”, clique em “Editar HTML”
  
• Na caixa de texto, vá até o final do código HTML e encontre as seguintes linhas:
  
  </div></div> <!-- end outer-wrapper –>
  </body>
  
  
• Cole o tracking code entre estas duas linhas.
  Obs. Cuidado ao copiar-colar diretamente do google analytics para seu blog, pois caracteres como ‘aspas duplas’ podem sair meio “estranhos” :P
• Fim!

Com isso você pode monitorar seu site através do Google Analytics =D

Para maiores informações, visite o Analytics Help.

Instalando um novo módulo

Este post é bem rápido (ao contrário do último)… só para esclarecer como é feita a instalação de um módulo no Drupal.

1. Baixe o módulo que deseja utilizar, dando preferência áo repositório do drupal.org. Por exemplo: contemplate. Escolha o pacote correspondente à sua versão de Drupal (6.x-1.1 no meu caso).

2. Descompacte o arquivo tar.gz e cole a pasta no diretório:

\meudrupal\sites\all\modules\

3. Vá para

http://localhost/meudrupal/admin/build/modules

4. Habilite o módulo que você copiou e clique em Save configuration.

5. Pronto! :)

Como criar seu próprio conteúdo

Por padrão, o Drupal traz tipos de conteúdo bem simples e genéricos (Page e Story). É possível se criar um site inteiro usando somente estes dois tipos de conteúdo, porém não é o mais adequado.

Vamos supor que eu queira criar um catálogo de revistas de histórias em quadrinhos. Para mim, o mais adequado não seria simplesmente organizar minha informação por Título e Corpo. Eu quero poder separar as informações relativas a: Título, Editora, Ano, Número, Capa (uma imagem), Gênero, etc…

Para isso, vou criar o meu próprio tipo de conteúdo: revistas.

Antes de mais nada, precisaremos dos seguintes módulos:

• CCK: possibilita a criação de diversos tipos de campos de dados;
• Contemplate: nos ajudará na customização da apresentação do conteúdo.

Obs. Caso não saiba como instalar módulos em seu site Drupal, veja este post. (breve)

O processo se divide em três etapas: criar content type, popular, theming.

1. Criar Content Type (CT)

Vá para /admin/content/types (ou Administer > Content Management > Content Types) e clique em Add content type.

Preencha os campos de acordo com o CT:

• Name: Revista
  Aqui vai o nome que você vai usar para identificar
• Type: revista
  Este valor é usado pelo próprio drupal
• Description: Ficha cadastral de uma revista.
  Uma pequena descrição para entender o CT criado. Não é necessário, mas pode vir a ser útil quando se tem muitos CTs.

Clique em Save e na próxima tela, clique em manage fields.

Nesta tela que iremos inserir os campos para o nosso CT:

• Editora – field_editora – Text – Text field

Clique em Save e em Save field settings na página seguinte. Esta segunda página serve para configurar o campo.

• Sinopse – field_sinopse – Text – Text area
• Ano – filed_ano – Integer – Text field
  Minimum: 1900; Maximum: 2100; =D
• Número – field_numero – Integer – Text field
  Minimum: 0;
• Gênero – field_genero – Text – Text field

Com isso já temos um CT basicão :)

2. Populando

Na verdade por enquanto só iremos inserir uma revista para exemplificar :)

Vá para /node/add (ou Create Content) e clique em Revista. Nesta tela vemos um formulário para criar nossa revista.

• Title: Spawn
• Editora: image
• Sinopse: A contagem regressiva para Spawn $200 começa aqui! O maior e mais ameaçador vilão de Spawn se junta ao elenco de vilões nesta edição. Jim descobre que ele não era o único paciente com segredos no Hospital St. Anthony e descobre respostas sobre a sua verdadeira identidade no último lugar em que esperaria encontrar.
• Ano: 2009
• Número: 198
• Gênero: ação

* Infos explicitamente copiadas de: http://spawnalley.blogspot.com/

Clique em Save para ver como ficou o primeiro registro de uma revista…. bonito, né? É, eu também não achei ehehe Por isso que vem a terceira etapa.

3. Theming

Não gostei do jeito padrão que o Drupal apresenta as informações, então resolvi customizar esse página. Este processo de customização da apresentação de conteúdo se chama Theming.

Quero que as informações sejam mostradas da seguinte maneira:

< Título > #<Número>
Sinopse: <Sinopse>
Editora: <Editora>; Ano: <Ano>; Gênero: <Gênero>

Para criar este “layout” diferente, crie uma cópia do arquivo:

\meudrupal\sites\all\themes\meutema\node.tpl.php

com o nome de:

node-revista.tpl.php

Obs. Esta é a forma que o Drupal usa para reconhecer um arquivo de template: revista é o nome especificado em Type, quando criamos o nosso content type.

Vá para /admin/content/types (ou Administer > Content Management > Content Types) e clique em Templates. Clique em Create template correspondente ao CT (Revista).

Este módulo nos permite ver quais variáveis php devemos usar para exibir os campos desejados.
Clicando em Body –> BodyVariables, podemos ver os campos desejados:

• $node->title
• $node->field_editora[0]['view']
• $node->field_ano[0]['view']
• $node->field_numero[0]['view']
• $node->field_genero[0]['view']
• $node->content['body']['#value']

Agora vamos editar o arquivo recém criado para que este possa exibir as variáveis acima à nossa maneira.
Substitua a linha:

<div class="content"><?php print $content?></div>

Pelo seguinte código:

<div>
<?php print $node->title . " #" . $node->field_numero[0]['view']; ?><br />
Sinopse: <?php print $node->field_sinopse[0]['view']; ?><br />
Editora: <?php print $node->field_editora[0]['view']; ?>; Ano: <?php print $node->field_ano[0]['view']; ?>; G&ecirc;nero: <?php print $node->field_genero[0]['view']; ?>
</div>

Salve o arquivo e confira a mudança dando um Refresh na sua página.

Esta é uma forma simples de alterar a apresentação de conteúdo, mas que nos dá margem a uma customização mais organizada, modularizada, sem ter que fazer gambiarras no arquivo node.tpl.php. =)

Obs. A partir deste método, eu costumo acrescenter várias classes CSS’s e usar Javascript (jQuery) para enfeitar eheh

Criando um Tema para o Drupal

Este é um tema mais “avançado” dos que eu já comentei por aqui: como criar meu próprio theme para Drupal.

As etapas básicas para criar o tema são:

1. Layout
2. Arquivos html, css, imagens, etc
3. html –> php, inserindo os campos necessários (baseado no bluemarine)
4. modificar o .info
5. subsitua o page.tpl.php original pelo seu arquivo html modificado
6. habilitar o novo tema no drupal =)

1. Eu quero que meu site Drupal tenha um tema +/- assim: bem quadradão, simplório, com fundo dégradé, domínio de cores escuras (preto e cinza) e que possua os cinco blocos mais comuns de páginas web: cabeçalho, rodapé, conteúdo, colunas à esquerda e à direita …. tchanam:

* tema bem simplão mesmo! eheh =P

Se você não tiver paciência para criar um seu ou quiser pegar um pronto (e também não tem paciência de procurar na net): baixe o PSD aqui.

2. Transformar o desenho acima em um arquivo html é bem simples, você pode fazer usando table, div, etc… o que vc preferir. Aqui, você pode baixar a versão que eu fiz.

3. A parte a seguir, eu segui basicamente este tutorial do Drupal-br:
http://drupal-br.org/tutoriais/criando-um-tema-para-o-drupal
* atenção: a versão usada no tutorial é a 5.x e a versão que eu uso aqui é a 6.3.

Crie uma pasta chamada themes dentro de \sites\all\ do seu drupal e, nela, crie uma cópia da pasta bluemarine (\themes\bluemarine). Renomeie esta cópia para o nome que deseja dar ao seu novo tema (simple template). Copie os arquivos do template dentro da pasta renomeada.

Abra o arquivo html do seu template lado a lado com o arquivo page.tpl.php, para facilitar as alterações.

Primeiro vamos começar pelo cabeçalho HTML e pelo Header em si. Eu sugiro substituir ambos pelo que existe no page.tpl.php, ou seja, trocar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Template</title>
<link href="style/default.css" rel="stylesheet" type="text/css">
</head>

Pelo código:

<?php
// $Id: rwj.info,v 1.5 2008/12/01 goba Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php print $head_title ?></title>
<?php print $head ?>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/scripts/iepngfix_tilebg.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/scripts/functions.js"></script>
<link href="<?php print base_path() . path_to_theme() ?>/style/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.pngfix
{
behavior: url("<?php print base_path() . path_to_theme() ?>/scripts/iepngfix.htc");
}
</style>
<![endif]-->
<noscript>
<style type="text/css">
div.detail-box{
display: block;
}
div.details-caller-link{
display: none;
}
</style>
</noscript>
</head>

Obs.: Caso você tenha alguma referência a arquivos javascript ou css, salve estas e insira no novo Header, como eu fiz com a linha em negrito.
Obs. 2: Inseri o código PHP para corrigir o caminho relativo do css linkado: <?php print base_path() . path_to_theme() ?>/

No arquivo page.tpl.php, podemos ver vários campos sendo usados, porém como estamos fazendo um tema simples, usaremos apenas alguns destes.

Nos nossos DIVs, copiaremos os seguintes códigos correspondentes:

• HEADER:
  <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
  
• LEFT:
  <?php if ($left) { print $left; } ?>
  
• MAIN:
  <?php print $breadcrumb ?>
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php print $help ?>
<?php print $content; ?>
<?php print $feed_icons; ?>
  
• RIGHT:
  <?php if ($right) { print $right; } ?>
  
• FOOTER:
  <?php print $footer_message ?>
<?php print $footer ?>

* alguns trechos estao um pouco modificados, para melhor adaptar ao código que eu utilizei no meu template.

E para fechar, inclua a seguinte linha antes de fechar a tag body:
<?php print $closure ?>

4. Vamos modificar o info file, que nada mais é a maneira como o Drupal identifica este tema.

Primeiro mude o nome de bluemarine.info para o nome do seu tema: simple template.info.

Abra o arquivo e altere as seguintes informações:

• name = Simple Template
• description = Meu tema simples para testes.
  

5. Penúltimo passo é apagar o seu arquivo page.tpl.php original (ou renomear para algo como old.page.tpl.php) e renomear o seu arquivo html para page.tpl.php.

6. Para verificar se tudo deu certo, entre em: http://localhost/training/admin/build/themes

Agora habilite, configure como Default e salve para ver se tudo deu certo =)

É isso!
Caso de dúvidas e/ou correções, a seção de comentários está logo abaixo ;)

Fix: baixe aqui o tema pronto :)
Fix2: para quem quiser substituir o screenshot que aparece na página de temas: redimensione a figura acima para 150x90 e substitua o screenshot.png na pasta do tema.

Habilitar o mod_rewrite do Apache

Eu não sei por que mas tive até que bastante problema com esse mod_rewrite...
Mas aqui está como eu consegui resolver =)

--

O mod_rewrite é o módulo que habilita o Apache a reescrever os caminhos das páginas, baseado em algumas regras. No nosso caso, queremos que as páginas do Drupal não tenham o "?q=" na URL.

Por default, o Apache instalado pelo EasyPHP vem com este módulo desabilitado.

1. Abra o arquivo "httpd.conf":
   • EasyPHP\conf_files\httpd.conf
   • EasyPHP\apache\conf\httpd.conf
     
2. Tire o comentário (retire o símbolo #) das seguintes linhas:
   #LoadModule rewrite_module modules/mod_rewrite.so
   Fica assim:
   LoadModule rewrite_module modules/mod_rewrite.so
   * Provavelmente é a linha 109.
   
3. Substitua todas as ocorrências de:
   AllowOverride None
   por:
   AllowOverride All
   * Deve ter umas 10 ocorrências em cada arquivo.
   
4. Pronto!

FIX: esqueci de mencionar como habilitar o módulo Clean URLs para realmente limpar as urls do drupal:

1. Vá para /admin/settings/clean-urls
2. Selecione Enabled e salve.
3. Agora sim, pronto! =D

Instalação e Configuração do Drupal

A instalação do Drupal em si é extremamente rápida: basta descompactar dentro da pasta www do seu EasyPHP (ou a raiz do seu servidor) o arquivo "tar.gz" da sua versão de Drupal. Pronto! =)

Agora vem a parte da configuração, que não é extramamente rápida mas também é rápida =)

O nome inicial da pasta (drupal-6.3) foi alterado para "training", logo a URL que acessaremos será: http://localhost/training

Se a seguinte página aparecer, você está quase preparado para configurar seu site.

Mas antes, é preciso criar (apenas criar!) um BD. Para isso vá para: http://localhost/home/mysql

Nesta mesma tela, na parte "Create new database", digite o nome da sua futura DB (por exemplo, "training") e clique em "Create".

Volte para a pagina do drupal (http://localhost/training) para iniciar a configuração:

1. Clique em "Install Drupal in English".
   
   
2. Caso apareça a seguinte mensagem:
   
   
   
1. Vá para a pasta: \training\sites\default\
2. Crie um cópia do arquivo default.settings.php e a renomeie para settings.php. Certifique-se de que esta cópia não está checada com "Read-Only".
3. Volte à página do drupal e clique em "try again".
   
   
3. Para configurar o banco de dados, se você seguiu o tutorial, insira os seguintes dados:
• Database name: training
  Nome escolhido anteriormente.
• Database username: root
  root, padrão do PhpMyAdmin.
• Database password:
  vazio, padrão do PhpMyAdmin.
• Clique em "Save and Continue".
  
  Obs.: Os campos do Advanced options só serão usados se os seus servidores Apache e MySQL estiverem em locais diferentes.
  
  
4. Configuração inicial do seu site. Aqui, cada um escolhe a informação mais adequada ao seu site. Abaixo um modelo:
• Site information
• Site name: Drupal Training
• Site e-mail address: daniel.iguchi@gmail.com
• Administrator account
• Username: admin
• E-mail address: daniel.iguchi@gmail.com
• Password: admin
• Confirm password: admin
• Server settings
• Clean URLs: enabled
• Caso não seja possível marcar enabled, seu apache provavelmente não está com o módulo "mod_rewrite" habilitado. Para saber como habilitá-lo, vá para este post. Caso contrário, deixe "Disabled". A única diferença aqui é que todo endereço dentro do seu Drupal será precedido de "?q=", por exemplo: http://localhost/training/?q=home
  
  
5. Finished!

Não se preocupe com a seguinte mensagem:

Ela apenas diz que seu computador não possui um servidor de email.

A partir destes passos, já se pode brincar no Drupal =)

Instalando o EasyPHP e (des)configurando o IIS

Conforme dito no outro post, aqui faremos a opção pelo EasyPHP, mas este pode ser facilmente substituído por um outro pacote.

A instalação do Easyphp é bem simples, no estilo "Next, Next Finish".

Por ser um computador da empresa, o entrave que eu encontrei por aqui foi: arquivos contidos na pasta "Program Files" sempre precisam de uma permissão para serem alterados, pois são considerados arquivos de sistema, etc... Logo a recomendação aqui é instalar o EasyPHP em uma outra pasta.

Aqui no meu computador, também, eu tinha o IIS instalado. Daqui vc pode fazer duas coisas:

1. Sempre antes de ligar o IIS, rodar o CMD como administrador e digitar:
• C:\> iisreset /stop
  
  
2. Desligar o serviço do IIS, seguindo os passos:
1. Start
2. Control Panel
3. Administrative Tools
4. Internet Information Services (IIS) Manager
5. Selecione o seu Default Website (ou outro que esteja rodando na porta 80) e clique com o botão direito
6. Edit Bindings
7. Altere o valor da porta, por exemplo: 8080

A primeira opção vai te encher mais, pois você terá que parar o IIS toda vez :)

A segunda, vai modificar o seu IIS e se você tiver algum projeto rodando nele, passará a acessá-lo a partir da porta 8080 (ou a escolhida).

* como eu não uso o IIS e sempre uso o Apache, usei a segunda opção =)

** Existem outras opções, mas estas duas já nos servem =)

Básico do básico do Drupal =D

Na verdade acho que é o básico do básico para qualquer desenvolvimento web com php :)

Aqui vai a lista de programas que eu costumo usar no desenvolvimento de suporte de sites:

• Navegadores:
• Internet Explorer 6 (ou IE Tester), IE 7 e se quiser ser mais pedântico ainda, IE8 ;)
• Firefox + Firebug add-on (excelente para debug de layout e javascript)
• Google Chrome
• Safari (estritamente necessário se você quiser montar um site para iPhone)


• AMP:
• o que eu tenho usado sem muitos problemas é o EasyPHP. Já vem com os servidores MySQL e Apache (com módulo PHP já habilitado)


• Edição:
• Notepad++ é exatamente o que o nome diz, um Notepad avançado :)


• Descompactador:
• 7zip: grátis, leve e rápido


• Edição de Imagem:
• Photoshop: é que eu tenho mais familiaridade :)


• Drupal: *esqueci de colocar o essencial*
• a versão 6.3 é a que eu costumo usar.

é isso aê! :)

Estreiando!

Muitos sites, blogs, etc por aí dizem como fazer de tudo no drupal. Pouquíssimas dúvidas minhas não foram sanadas pelo Google :)

A principal intenção deste blog é ser uma ferramenta para registrar e me lembrar dos problemas e das respectivas soluções que eu encontrei ao usar o Drupal.

mas espero que este blog também sirva como fonte de dicas para outras pessoas :)