Drupal 7 para iniciantes

Transcrição

1 Drupal 7 para iniciantes Textos e Imagens condensadas de alguns blogs Essa apostila trata-se apenas de uma Reprodução do conteúdo de seus respectivos autores

2 Sumário Instalando e configurando o XAMPP 3 Instalando e configurando o Drupal 7 3 Colocando o Drupal 7 em Português 10 Exemplos de Sites em Drupal 12 Introdução aos Temas Internos do Drupal 12 Instalando o Tema Marinelli no Drupal 7 14 Gerenciamento de Conteúdo Básico em Drupal 7 16 Utilizando um editor Wysiwyg no Drupal 7 22 Modificando as informações do site com Drupal 7 24 Organizando os Menus do seu site no Drupal 7 25 Modificando o Logotipo e Favicon em Drupal 7 26 Adicionando o Módulo PathAuto no Drupal 7 27 Criando conteúdos personalizados em Drupal 7 28 Modificando a aparência de um conteúdo personalizado no Drupal 7 33 Configurando os Menus do Marinelli para Listar Novo Tipo de Conteúdo em Drupal 7 35 Adicionando um Formulário de Contato em Drupal 7 36 Permissões e Papéis de Usuário em Drupal 7 40 Blocos 42 Multisite 49 Os artigos 1 até 17 pertecem ao blog do Luciano Soares de Souza O artigo 18 foi tirado de tutoriais do Hostnet - O artigo 19 foi tirado do fórum de discussão do Drupal Brasil Esta apostila está sob licença copyleft 2

3 1 Instalando e Configurando o Xampp Antes de instalar o Drupal, vamos precisar de um servidor web onde rodaremos o Drupal. Para facilitar nossa vida utilizaremos o xampp, que já instala o Apache e o MySQL juntamente. Os passos a seguir dizem respeito a instalação numa máquina Windows Vá a página de download do xamp. 2. Baixe o instalador no seu pc (como especificado na imagem abaixo). Nesse caso versão Execute o arquivo 4. Vai dando next 5. Quando aparecer 3 checkboxes marque para instalar o Apache e o MySQL como serviços. O filezilla não precisa. (Fico devendo a imagem desses passos, pois é muito fácil) 6. Vá dando next e confirmando o que ele perguntar. 7. Ao final de tudo abra seu navegador e digite localhot/xampp. Se tudo ficou ok vai aparecer a página inicial do xampp pra escolher o idioma. Bom resumidamente é só isso mesmo. Próximo passo instalar e configurar o drupal. Primeira coisa que precisamos de um servidor web instalado na máquina. Para facilitar nossa vida usaremos o XAMPP, pois já instala tudo que precisa. 2 Instalando e Configurando o Drupal 7 Vamos agora instalar e configurar o Drupal. 1. Faça o download do Drupal 7 no link no seu pc. 3

4 2. Baixe a versão mais recente do Drupal 7. Atualmente a Abra pasta htdocs do seu xamp. Normalmente a instalação padrão fica em C://xampp/htdocs. Essa pasta é onde fica todos os sites que vão ser rodados através do xampp (isso pode ser configurado, mas não vou mostrar aqui). 4. Descompacte o zip que você baixou na pasta htdoc de forma que fique assim C:/xampp/htdocs/drupal e nessa as várias pastas e arquivos do drupal. (como na imagem abaixo) 5. Vamos agora criar um banco de dados para ser utilizado pelo drupal. Abra o phpmyadmin no navegador em 6. Na página inicial já aparece a opção de criar um banco de dados. Dê o nome de drupalbd e aperte o botão criar. 4

5 7. Clique na aba privileges 8. Vamos agora criar um usuário de banco de dados para acesso ao banco de dados do drupal. Não é bom utilizar o root, pois ele tem acesso a todos os bancos e por questões de segurança não queremos isso. Clique no botão Add New User 9. Preencha os campos username com drupalbduser, Host com localhost, Senha qualquer uma, sugiro por fins de exercício (mas não use isso num site real). Na opção abaixo database for user verifique se a ultima opção está selecionada (Grant all privileges ). 5

6 10. Deixe o resto como está e baixe a página e clique em Go (ou executar se estiver em portugues) 11. Pode fechar o phpmyadmin Agora podemos configurar a instalação do Drupal. Abra o navegador em Nessa tela escolha a configuração standard (que é a configuração padrão do Drupal). 6

7 13. Aperte Save and Continue 14. Na próxima tela é pra escolher o idioma de instalação. Deixe em inglês do jeito que está mesmo (posteriormente colocaremos em português) e aperte Save and Continue 15. Agora vamos configurar a conexão do Drupal com o Banco de Dados. Nessa tela preencha os dados de acordo com o banco de dados e usuário para o banco de dados criados anteriormente. 7

8 16. Clique 1 vez em Save and Continue. Se tudo deu certo vai aparecer uma barra de progresso mostrando que o drupal está sendo instalado. 17. Depois de instalado vai aparecer uma tela para configurar as informações do site e do superusuário do site. O super usuário é o usuário que poderá alterar e administrar tudo no Drupal. 18. Na parte Site Information (informações do site) preencha o Site Name [nome do site] (é o título grande que vai aparecer no topo do site) e o Site address [endereço de do site] que é o endereço de que vai ser o remetente de todos os s enviados automaticamente pelo Drupal. 8

9 19. Na parte SITE MAINTENANCE ACCOUNT [Conta de Manutenção do Site] preencha os dados de username [nome de usuário], address [endereço de ], Password [senha] e Confirm Password [confirmação de senha] para criar o superusuário do site. 20. Na parte Server Setting [configurações do servidor] em country [país] escolha Brasil e em Default Time Zone escolha America/Sao Paulo. 9

10 21. Deixe os checkboxes que estão mais abaixo selecionados. 22. Aperte o botão Save and Continue 23. Se tudo ocorreu ok, vai aparecer uma página informando que a instalação está ok e com um link para visitar seu site criado. Clique no link Visit your new site [visite seu novo site]. 24. Irá aparecer a página inicial do Drupal. Nessa página já vai estar com o superusuário logado. A barra preta em cima são os menus administrativos. Toda vez que vc acessar localhost/drupal irá pra essa página (caso esteja logado). 10

11 3 Colocando o Drupal 7 em Português 1. Vá ao site 2. Faça o download para seu pc da tradução para a versão 7.8 (que é a nossa) 3. Vamos agora habilitar o módulo Localize no nosso Drupal. Esse módulo adiciona funcionalidades de línguas que habilitam a tradução da interface do usuário para outras línguas diferente do inglês. 4. Para habilitar o módulo Locale, com o superusuário logado, vá ao menu Modules. 5. Aparecerá uma lista com os vários módulos que já vem instalados por padrão no Drupal. O Locale é um módulo que já vem instalado mas não ativado. (Em outras aulas instalaremos e/ou ativaremos outros módulos) 6. Vá rolando a página pra baixo até encontrar o módulo Locale e marque o checkbox. 7. Vá rolando a página e aperte o botão Save Configuration para salvar as novas configurações. 8. Agora o módulo que nos permite trabalhar com línguas está habilitado. 9. Vamos agora configurar o site para trabalhar com a língua portuguesa. 10. Vá ao menu superior Configuration e clique no link Languages que fica dentro do grupo Regional and Language 11. Nesse local podemos fazer a configuração da língua que usaremos pro conteúdo do site e também pra interface do usuário. 11

12 12. Clique no link Add Language para adicionar uma nova língua. 13. Na caixa de seleção de Language Name [nome da língua], procure Portuguese, Brazil 14. Clique em Add Language 15. Agora a língua portugues pode ser utilizada no site. Escolha a Portuguese, Brazil como Default (padrão). 16. Clique no botão Save Configuration. 17. Agora só falta traduzirmos a interface. Para tanto, vá em Configuration e dentro de Regional and Language clique em Translate Interface [traduzir interface]. 18. Nessa página clique em import para importar as traduções. 19. No campo Language file [arquivo de linguagem] selecione o arquivo que fizemos download. 20. Em import into verifique se está Portuguese, Brazil 21. Em Text Group deve estar marcado built-in interface 22. Em mode marque a primeira opção Strings in the uploaded file replace existing ones, new ones are added. The plural format is updated. 23. Aperte o botão Import. O processo demora um pouco. Se não funcionar faça novamente. 24. Clique no botão Home (a casinha no canto superior esquerdo). Sua interface deve aparecer traduzida. Aperte CNTRL + F5 caso não apareça traduzido pra carrear a página novamente. 12

13 Vários termos ainda vão aparecer em inglês. A tradução ainda não é 100% 4 Exemplos de Sites em Drupal Aqui vai uma lista de sites que reúnem informações sobre sites em Drupal br/quem-usa-drupal Aqui vai uma lista de sites em Drupal versão Acessem e vejam o que vocês podem fazer em Drupal. 5 Introdução aos Temas Internos do Drupal Agora vamos começar uma introdução rápida aos temas que já vem instalados no drupal. 1. Clique no menu Aparência. Vai aparecer uma lista com todos os temas que já vem disponíveis no Drupal. (Em outra aula aprenderemos a instalar um novo tema). 2. Veja que temos dois temas ativos (Enabled Themes), o Bartik que é o padrão e o Seven. 3. Temas ativos significam temas que estão instalados e podem se tornar o tema padrão (que é o exibido para os usuários). 4. Clique em Definir Padrão no tema Seven. 13

14 5. Clique no ícone Home (uma casinha no canto superior esquerdo). 6. Veja que Seven. a aparência do site se modificou para o tema 7. Vamos agora ativar um tema que está desativado. 8. Vá em aparência e role a página até achar os Disabled Themes [Temas Desabilitados]. 9. Verifique que temos 2 temas desativados o Garland e o Stark. 10. Em cada um deles temos a opção Ativar (que ao clicar vai listar esse tema na lista dos ativados) e o Enable and Set Default [Ativar e Tornar Padrão] (que ao clicar já ativa e torna o tema como padrão). Clique em Enable e Set Default. 14

15 11. Clique no ícono da Home de novo e veja o resultado. 12. O Garland era o tema principal de algumas versões mais antigas do Drupal. 13. Agora vamos alterar algumas configurações do tema padrão. 14. Vá em Aparência e clique em Configurações do Tema Garland. Ou na aba configurações. 15. Em Esquema de Cores você pode alterar as cores de partes específicas do site (naquele tema) 16. Em Itens a Exibir você pode configurar o que aparece ou não no site. (Coisas como logotipo e etc, basta ler). 17. Em Logo Image Settings [Configurações de Logotipo], se você desmarcar o checkbox você pode fazer o upload de uma nova imagem para ser o logotipo do site (no lugar da gotinha padrão do Drupal). Faça esse teste! 18. Em Shortcut Icon Setting, você pode configurar a imagem do favicon pra funcionar em alguns navegadores. Se não sabe o que é um favicon (google it). Bom basicamente essa aula é uma introdução aos temas que já vem com o Drupal. Na próxima aula veremos como instalar um tema disponível na internet. 15

16 6 Instalando o Tema Marinelli no Drupal 7 1. Vá ao endereço 2. No formulário de busca vamos filtras temas aplicáveis à versão Em Filte by Compatibility [filtrar por compatibilidade] escolha versão 7 e clique no botão search [pesquisar]. 4. Role a página até achar o tema chamado Marinelli e clique no nome do tema. 5. Role a página até chegar na seção de downloads e baixe no seu pc a versão compatível com o Drupal Vá em aparência e clique em Install New Theme [instalar novo tema] logo no topo da página de aparência. 7. Vá em Upload a module or theme archive to install [faça upload de um módulo ou tema para instalação], e escolha o arquivo do marinelli que acabamos de baixar. 16

17 8. Clique no botão instalar. 9. Na página de confirmação de instalação de tema clique em Enable newly added themes [Habilitar temas adicionados]. 10. Role a página e veja que o Marinelli está na área de temas desativados. 11. Vamos agora tornar o Marinelli como Padrão (como fizemos na última aula). Clique em Enable and set default. 12. Clique no icone da Home e veja o novo tema instalado. 13. Toda vez que o Drupal instala um tema, ele o coloca dentro da pasta sites/all/themes/ dentro da pasta onde está o Drupal. 14. Navegue até esta pasta e veja que os arquivos específicos do Marinelli estão lá livres para edição. Caso você queira mudar algo sinta-se livre. (Teremos no futuro uma aula mais avançada sobre temas). Bom pessoal, naveguem bastante na página de themas do drupal e instale novos temas e vejam que tipo de sites podemos construir com o Drupal 7. 7 Gerenciamento de Conteúdo Básico em Drupal 7 Vamos aprender como criar e gerenciar conteúdos básicos em Drupal 7. Basicamente, temos 2 tipos de conteúdos em Drupal. Article [Artigo] Basic Page [Página básica] Utilizamos o conteúdo do tipo article quando queremos publicar um conteúdo como se fosse uma notícia (ou um artigo de uma revista). É um tipo de conteúdo que pode receber tags para ser categorizado. Usuários podem deixar comentários. Imagens podem ser adicionadas (por padrão), etc. 17

18 Já o conteúdo do tipo basic page destina-se à criação de páginas mais estáticas. Por exemplo páginas que vão fazer parte da estrutura do site. Por padrão elas não recebem tags e não podem receber comentários. Internamente, o Drupal trata esses tipos de conteúdos como nodes [nós]. Um node é um pedaço de conteúdo (independentemente à qual fim se destina). Vamos agora criar um basic page para ser a nossa home page. 1. Vá em Conteúdo e escolha adicionar conteúdo (ou escolha o atalho adicionar conteúdo). 2. Escolha o tipo Basic Page 3. Em title [título] coloque Página Inicial 4. O campo Body [corpo] aparece com um link edit summary. Clique em edit summary. 5. O campo summary [resumo] permite que é um resumo do que se trata o conteúdo. Esse resumo vai aparecer em lugares onde só um pedaço do conteúdo é listado. Se você não criar o resumo, o Drupal utilizará um pedaço do campo body como summary. 6. Escreva algum conteúdo no campo body. Esse campo é o conteúdo propriamente dito que está sendo criado. (Futuramente aprenderemos a utilizar um editor para melhorar os textos nesse campo). Se quiser gerar um conteúdo qualquer pode visitar a página do e gerar lorem ipsum (no canto inferior direito do site) e copiar e colcar no campo body. 7. Em text format [formato de texto] deixe do jeito que está. (Veremos mais sobre isso no futuro). 8. Em configurações de menu aparece a opção provide a menu link. Essa opção nos permite criar um link de menu que direcionaria diretamente para este conteúdo. Mas como já existe um menu para a home, não precisaremos criar, então deixe desmarcado. 9. Em informações da revisão, também deixe do jeito que está. (Veremos mais no futuro). 10. Em configurações de endereço podemos criar uma url alternativa para nosso conteúdo. É aqui que criamos as chamadas urls amigáveis. Digite pagina-inicial no campo. Esse será o link para esse conteúdo. 11. Em configurações de comentário por padrão em uma basic page ele aparece como fechado. Não desejamos permitir que um usuário faça comentário nesse tipo de página. Então deixe como está. 18

19 12. Em autoria também deixe como está. Essa opção serve para indicar quem criou esse conteúdo. 13. Em opções de publicação temos 3 opções. Publicado, promovido para página inicial e destacado no topo da página. Publicado indica se o conteúdo vai estar ou não disponibilizado no site. Deixe publicado marcado. Promovido para á página inicial indica se o conteúdo irá ser listado na página inicial do site. Marque essa opção. Destacado no topo da página indica se esse item vai ser destacado dos demais. Deixe desmarcado. 14. Clique em salvar. (Se quiser pode pré-visualizar antes). 15. Nossa página vai aparecer por completo dando-nos as opções view [visualizar] e edit [editar]. 16. Clique no ícone da Home (casinha no canto superior esquerdo). 17. Veja que nosso conteúdo aparece na página incial. Vamos agora criar um article 1. Vá em Conteúdo e Adicionar Conteúdo 2. Escolha a opção article 3. Em title [título] coloque Meu primeiro artigo Drupal 7 4. Em tags, você pode colocar termos (separados por vírgula) que descrevem sobre que assunto esse artigo trata. Coloque as seguintes tags: drupal, conteúdo 5. Se quiser coloque summary (como visto anteriormente). 6. Em body coloque algum conteúdo. (Sugiro utilizar o gerador de Lorem Ipsum novamente). 19

20 7. Em image [imagem] pode fazer o upload de uma imagem para o artigo. (Faça se quiser, veremos mais disso depois). 8. Nas opções abaixo (já explicadas) altere apenas as que forem pedidas, as outras deixem como está. 9. Em configurações de endereço coloque meu-primeiro-artigo-drupal-7 (em outra aula veremos um módulo que cria essas url amigáveis automaticamente. 10. Em opções de publicação marque publicado e promovido à página inicial. 11. Aperte Salvar 12. Clique no ícone da Home Page. Repare que o artigo ficou em cima do conteúdo que antes tínhamos colocado na página inicial. Isso acontece porque o Drupal lista os conteúdos mais novos primeiro na página inicial. A partir de um certo número (configurado) ele colocará uma paginação na página inicial. Não queremos que o conteúdo da página inicial fique depois do artigo. Então faremos o seguinte: 20

21 1. Vá em Conteúdo e selecione a opção editar em página inicial 2. Lá embaixo em opções de publicação, marque a opção destacado no topo da página. 3. Clique em salvar. 4. Clique no ícone da Home. 5. Repare que ele ficou destacado no topo da página inicial. No tema que estamos utilizando o conteúdo aparece com um label stick vermelho do lado (particularmente feio). Se você mudar de tema (para o bartik, por exemplo), a maneira como ele mostra o conteúdo destacado é diferente. Faça o teste e depois retorne para o tema Marinelli. Cada tema tem suas formas de destacar o conteúdo. Em outras aulas veremos como modificar algumas coisas dos temas. Agora iremos criar basic pages que fazem parte da estrutura do site (tem links diretor para eles). 1. Vá em Conteúdo e adicionar conteúdo 2. Escolha Basic Page 3. Em title coloque Sobre Nós 4. Em body coloque um conteúdo qualquer (como anteriormente) 5. Em configurações de menu marque a opção provide a menu link [proveja um link de menu]. Essa opção é que permite que seja criado um link direto para esse conteúdo no site. 6. Em título do link de menu deixe Sobre Nós (para o link ter o mesmo título do conteúdo) 21

22 7. Em descrição coloque Informações sobre nós. Essa descrição aparecerá quando o usuário passar o mouse em cima do link. 8. Em item superior você pode escolher de quem esse conteúdo vai ser filho na estrutura do site. Deixe selecionado Menu Principal para que o menu apareça no menu principal do site (as abas em cima do site). 9. Em configurações de endereço coloque a url sobre-nos 10. Clique em salvar. 11. Veja que a página que apareceu uma nova aba no menu principal com um link para a página que criamos. Vamos agora aprender a gerenciar o conteúdo do site coletivamente. 1. Vá em Conteúdo 2. Na primeira parte aparecem os filtro onde pode se filtrar os conteúdos listados abaixo. (Não darei maiores detalhes pois é bem autoexplicativo). 3. Na parte debaixo temos todos os conteúdos listados e acima dele temos opções de atualização. 4. Você pode a qualquer momento escolher diversos conteúdos e atualizar os mesmos de uma só vez. 5. As opções são: 1. Publish selected content (publicar conteúdo selecionado). Irá publicar todos os conteúdos que estiverem selecionados. 2. Unpublish selected content (despublicar conteúdo selecionado). 3. Promote selected content to front page (promover conteúdo selecionado à página inicial) 4. Demote selected content to front page (remover conteúdo selecionado da página inicial) 5. Make selected content stick (tornar o conteúdo selecionado destacado) 6. Make selected content not stick (tirar o destaque do conteúdo selecionado) 22

23 7. Delete selected content (deletar conteúdo selecionado) 6. Marque apenas o article Meu primeiro Artigo Drupal 7 e escolha a opção delete selected content 7. Clique em atualizar e confirme a exclusão. 8. Veja na página inicial que o artigo não é mais exibido. 8 Utilizando um editor Wysiwyg no Drupal 7 Um editor wysiwyg (What You See Is What You Get) [o que você vê é o que você obtém] é um editor html que permite estilizar textos em html em uma forma parecida com um editor de texto normal como o word. 1. Acesse o site 2. Faça o download da versão 7 para o seu pc. 3. Vá no menu Módulos 4. Clique em install new module [instalar novo módulo] 5. Em upload selecione o arquivo que acabamos de baixar 6. Clique em instalar 23

24 7. Na tela de confirmação de instalação clique em Enable newly added modules 8. Role a página até achar (lá no fim) o módulo wysiwyg marque o checkbox 9. Clique em salvar configurações Vamos agora configurar a utilização do editor. 1. Vá em módulos (se não estiver na página que lista os módulos) 2. No módulo wysiwyg clique em configurar 3. Irá aparecer uma página com instrução para downloads de diversos editores disponíveis. 4. Iremos fazer download do primeiro o CKEditor (um dos melhores). 5. Clique no link download da opção CKEditor 6. Faça o download do.zip da versão mais nova (em qualquer lugar do pc) 7. Vá na pasta do seu site em htdocs (Exemplo C:\xampp\htdocs\drupal) 8. Entre na pasta sites/all e crie uma pasta chamada libraries 9. Descompacte o ckeditor dentro dessa pasta de forma que o arquivo ckeditor.js encontrese dentro do seguinte caminho sites/all/libraries/ckeditor/ckeditor.js 10. Abra de novo seu site e vá em configurar novamente dentro do módulo wyswyg (pasos 1 e 2) 11. Agora a página mudou e já é possível configurar 12. Para as opções filtered html e full html selecione o ckeditor. 24

25 13. Clique em salvar 14. Clique na opção editar (que aparece depois de salvar) para Filtered HTML 15. Vou explicar somente aqui a opção Buttons and Plugins. Nessa parte você configura quais opções você quer que apareça no editor. Escolha bold [negrito], italic [italico], underline [sublinhado], bullet list [marcadores], numbered list [numeração]. 16. Clique em salvar 17. Faça o mesmo para a opção Full HTML. Agora quando você for adicionar um conteúdo (qualquer tipo) irá aparecer um editor parecido com o word. Só vão aparecer os botões que configuramos nos passos acima. A diferença entre Filtered HTML, Full HTML e Plain text é que o Filtered aceita código html ao escrever o conteúdo da página (mas não aceitas todas as tags). O Full aceita (praticamente) qualquer tag html e o plain text deve ser utilizado quando queremos escrever algo sem nenhum html inserido. Bom é isso aí. 9 Modificando as informações do site com Drupal 7 Queremos mudar o título do site e adicionar um slogan 25

26 1. Vá em Configurações e clique em Informações do Site 2. No campo nome do site coloque o nome que deseja pro seu site 3. Em slogan escreva um slogan para o site 4. O endereço de que já se encontra preenchido é o que escolhemos na instalação do drupal, você pode modificar caso queira. 5. Em número de post na página inicial, você pode configurar quantos post (articles) irá aparecer na página inicial do site. Se tiver mais que esse número automaticamente aparecerá um link na página inicial para os post mais antigos. 6. Em página inicial do site, você pode configurar uma página específica para ser a página inicial. (Faremos isso posteriormente em outra aula). 7. As outras opções são para configurar páginas de erro. Deixe como está. (Faremos isso posteriormente). 8. Clique em salvar configurações. 9. Vá para a Home Veja que o título do site e o slogan foram modificados. 10 Organizando os Menus do seu site no Drupal 7 Temos até agora apenas 2 menus: o Home e o Sobre Nós. Então antes de organizar os menus vamos adicionar mais algumas basic pages para criarmos mais menus. 1. Vá em Conteúdo e clique em Adicionar Conteúdo 2. Escolha Basic Page 3. No campo title colque Produtos 26

27 4. Em body coloque um texto qualquer. (Sugiro utilizar o Lorem Ipsum como vimos em aulas anteriores). 5. Em configurações de menu marque a opção disponibilizar um link no menu 6. O título do link de menu pode deixar o sugerido 7. Em descrição escreva página sobre produtos 8. Em configurações de endereço no campo URL alternativa coloque produtos 9. Clique em salvar 10. Repita o processo mais 3 vezes e crie as páginas básicas Serviços, Clientes, Localização. 11. Vá para a página inicial. Seu menu principal vai estar parecido com a imagem abaixo. Vamos agora organizar esse menu. 1. Vá em Structure [Estrutura] e clique em menus e irá aparecer uma lista com os tipos de menus do site. (No futuro explicaremos cada tipo) 2. Em main menu [menu principal] clique em listar links. 27

28 3. Vai aparecer uma lista com os links do menu principal. Você pode Clicar e arrastar eles de forma a organizar a ordem de cada um. 4. Deixe na ordem abaixo e clique em salvar configurações 5. Vá para a Home e veja que os menus agora estão nas ordem que definimos no menu principal. 11 Modificando o Logotipo e Favicon em Drupal 7 Primeiro iremos escolher a nova imagem da logotipo e favicon. Para quem não sabe o que é um favicon. 1. Vá no site do Google Imagens 2. Procure por um favicon para download (digite favicon e busque). Ou faça o download desse aqui 3. Procure por uma imagem para ser a logo do seu site (digite logo e busque). Ou faça download dessa aqui: tc.png Agora vamos alterar no nosso site. 1. Vá em aparência e em settings [configurações] do tema atual (no caso aqui o marinelli). 2. Role um pouco a página e na opção configurações da logo desmarque a opção usar logo padrão e irá aparecer a opção de enviar a logo. 28

29 3. Em enviar a logo escolha o arquivo da logo que fizemos download 4. Na opção Configurações do Ícone desmarque a opção usar ícone padrão e quando aparecer o campo enviar ícone escolha o favicon que fizemos download. 5. Role a página até o final e clique em Salvar Configurações. 6. Vá para a Home e veja a nova logotipo e veja na barra do navegador o favicon (as vezes alguns navegadores não exibem corretamente o favicon). 12 Adicionando o Módulo PathAuto no Drupal 7 É um módulo do Drupal 7, que permite criar automaticamente uma URL Alternativa na hora que estamos criando um conteúdo. 1. Para utilizar o Módulo PathAuto precisamos do Módulo Token primeiro. 2. Vá até o link 3. Vá em módulos e instale o módulo token (já fizemos isso anteriormente). Após instalar habilite ele (da mesma forma que fizemos anteriormente). 4. Faça o download correspondente à versão 7 do Drupal. 5. Vá até o link 6. Faça o download correspondente à versão 7 do Drupal. 29

30 7. Vá em módulos e instale o módulo pathauto (já fizemos isso anteriormente). Após instalar habilite ele (da mesma forma que fizemos anteriormente). Agora todas vez que for adicionar uma Basic Page ou um Article na parte de configurações de endereço a URL Alternativa vai ser criada automaticamente a partir do título. 1. Vá em Adicionar conteúdo e escolha Article 2. No campo titulo escreva Testanto o PathAuto 3. Em tags coloque o que quiser 4. Coloque o que quiser em Body 5. Desça a página e veja que em configurações de endereço está marcado a opção Automatic Alias [Alias Automático]. Isso quer dizer que a URL alternativa vai ser criada automaticamente a partir do campo de titulo 6. Clique em salvar 7. Repare que quando ele mostra o conteúdo a URL utiliza o título do article. Bom pessoal agora não precisa se preocupar mais com escrever url alternativas. 13 Criando conteúdos personalizados em Drupal 7 Até agora vimos que o Drupal 7 nos fornece basicamente 2 tipos de conteúdos. Basic Page e Article. E se necessitarmos criar um tipo de página com informações diferenciadas além das disponíveis nesses 2 tipos de conteúdo? O Drupal nos permite criar tipos de conteúdos personalizados. Para visualizar os tipos de conteúdo disponíveis no Drupal faça: 1. Vá em Estrutura 2. Clique em Tipos de Conteúdo. Irá aparecer uma lista com os tipos de conteúdo existentes. Até agora temos Article e Basic Page. 30

31 Vamos criar um tipo de conteúdo específico para nosso site. Vamos imaginar por exemplo que nosso site vende produtos, vamos então criar um tipo de conteúdo chamado produto. 1. Vá em Estrutura 2. Clique em Tipos de Conteúdo 3. Clique em Novo Tipo de Conteúdo para adicionar um novo tipo de conteúdo. 4. No campo Nome escreve Produto 5. O campo descrição é para descrever sobre o que se trata esse tipo de conteúdo. Escreva informações sobre produtos. 6. Na opção configurações do formulário de envio, coloque no campo título o nome produto. Os outros campos dessa opção deixe como estão (são auto-explicativos). 7. Na opção de opções de publicação desmarque promovido para página inicial (deixe somente publicado marcado). 8. Em opções de exibição desmarque mostrar informações de data e autoria. Não desejamos que apareça quem criou o conteúdo ou data. 9. Em configurações dos comentários escolha fechado. Também não desejamos permitir nenhum tipo de comentário em um produto. 10. Em configurações de menu deixe marcado menu principal. Em item superior padrão escolha Produtos (pois quero listar lá meus produtos). Se não tiver esse menu principal deixe como está. (Sugiro fortemente criar um menu produtos, como já vimos em aulas anteriores). 11. Clique em salvar tipo de conteúdo. Agora na página que lista os tipos de conteúdo disponíveis temos o tipo de conteúdo chamado Produto. 31

32 Vamos agora gerenciar os campos para esse tipo de conteúdo. 1. Clique em gerenciar campos para o tipo de conteúdo produto. 2. Por padrão já apareceram 3 campos para o tipo produto. O campo chamado produto, que é o título do produto. O campo de configurações de endereço (coisa da URL, ignore pois agora é automatico). O campo body (semelhante ao body de um Article. 3. Vamos alterar o nome do campo body para descrição do produto (pois é mais significativo assim). Em body clique em editar. 4. Em rótulo escreva descrição do produto. 5. Marque a opção de campo obrigatório, pois desejamos que todo produto tenha uma descrição. 6. O campo texto de ajuda serve para dizer pra que serve esse campo. Não precisa preencher. 7. Em linhas coloque 8 para fazer o campo de texto aparecer menor. 8. Deixe o resto como está e clique em Salvar Configurações. Pronto. O nome do campo que era body aparece agora como descrição do produto. Vamos agora adicionar mais campos para o produto. 1. Logo abaixo em Novo Campo na parte rótulo escreva Preço 2. Na frente de field_ escreva preco (sem cedilha) 3. Na parte de campo onde está escrito selecione um tipo de campo escolha Decimal 4. Clique em salvar 5. Irá aparecer uma outra página com configurações específicas para o campo preço. 6. Em precisão deixe 10 (valor mínimo). Essa é a precisão do número decimal trabalhado internamente pelo Drupal, você pode aumentar a precisão até Em escala deixe 2. Escala representa o número de dígitos que vão aparecer quando estiver vendo esse campo. Como estamos trabalhando com preço, 2 dígitos é o suficiente. 32

33 8. Em separador decimal escolha vírgula. No brasil utilizamos a vírgula para separar casas decimais. 9. Clique em salvar configurações do campo. 10. Na próxima página marque a opção campo obrigatório. 11. No campo prefixo coloque R$ para que sempre seja exibido um R$ antes do preço. 12. Clique em Salvar configurações Acabamos de adicionar um campo chamado preço ao produto. Esse campo é do tipo decimal e será responsável por guardar o preço do produto. Cada tipo de campo tem configurações específicas. Temos vários tipos de campo que podemos utilizar ao criar um campo. São eles: Arquivo: quando desejamos colocar um anexo Booleano: algum valor booleano Decimal: algum valor decimal Imagem: fazer upload de uma imagem Inteiro: algum valor inteiro List (float): Uma lista de valores float pra escolher List (integer): Uma lista de valores inteiros pra escolher Listagem (texto): Uma lista de textos pra escolher Ponto Flutuante: Algum valor em ponto flutuante (semelhante ao decimal) Referência de termo: Um campo mais complexo (veremos no futuro) Texto: Um valor texto (tipo o campo title) Texto Longo: Um valor texto de várias linhas Texto longo e sumário: Um valor texto de várias linhas que dá a possibilidade de guardar um sumário (resumo) dele. Tipo o campo body. Vamos adicionar uma imagem ao nosso produto. 1. Em novo campo no rótulo coloque Imagem 2. Em field_ coloque imagem 3. Escolha o tipo de campo Imagem 4. Clique em Salvar 5. Na página de configuração do campo imagem, tem a opção de fazer upload de uma imagem padrão. Mas no nosso caso vamos deixar como está. 33

34 6. Clique em Salvar configurações do campo. 7. Procure o campo tamanho máximo para upload e escreva 3 MB (para limitar o tamanho da imagem de upload em 3 MB) 8. Marque a opção Habilitar o campo Alt. O que for escrito em alt é utilizado por mecanismos de busca para indexar o conteúdo da imagem. 9. Clique em salvar configurações Agora temos um campo de imagem para adicionar aos produtos. Vamos criar um campo de código para o produto. 1. Em novo campo no rótulo coloque Código 2. Em field_ coloque codigo 3. Em tipo de campo escolha texto 4. Clique em salvar 5. Na página de configuração do campo código em comprimento máximo digite 10 para limitar os códigos dos nossos produtos em 10 dígitos. 6. Clique em salvar configurações 7. Na próxima página marque como campo obrigatório 8. Clique em salvar configurações Pronto. Finalmente temos todos os campos que queríamos em produto. Vamos agora adicionar um produto. 1. Vá em adicionar conteúdo e clique no tipo de conteúdo produto. 2. Você verá um formulário com todos os campos que criamos para o produto. 3. Preencha os campos Produto, Descrição do Produto, Preço, Imagem e Código da forma que quiserem. 4. Em configurações do Menu clique em Disponibilizar um Link no menu 5. Dê um título ao link 6. Escolha o item superior Produtos 34

35 7. Deixe o resto como está 8. Clique em Salvar Pronto acabamos de criar um produto. Em próximas aulas veremos como melhorar a apresentação desse conteúdo e como fazemos pra listar eles no menu produtos. 14 Modificando a aparência de um conteúdo personalizado no Drupal 7 Até agora temos o seguinte produto adicionado no módulo passado. 35

36 Reparem que antes da imagem aparece o nome imagem. Que o preço fica na linha abaixo do rótulo preço. Que o código é o último campo. Queremos mudar isso pra ficar um pouco melhor. 1. Vá em estrutura 2. Clique em Tipos de Conteúdo 3. Clique em Gerenciar Exibição 4. Organize a ordem dos campos clicando e arrastando os mesmo. Faça da forma que desejar. 5. Clique em Salvar 6. Em Imagem coloque o rótulo como oculto. Dessa forma não aparecerá o rótulo imagem antes da imagem. 7. Em preço coloque o rótulo como mesma linha. 8. Faça o mesmo para o código 9. Na frente de preço no lado direito tem tipo uma engrenagem. Clique nela que aparecerão mais configurações de exibição. 10. Em limitador de milhar escolha ponto 11. Clique em atualizar 12. Clique em salvar 13. Vá em Conteúdo 14. Clique no produto que vc tinha criado 15. Veja as mudanças na exibição 36

37 Pronto agora melhoramos um pouco a exibição. Mudanças mais profundas exigem modificação do css do tema. Na próxima aula veremos como configurar o Marinelli para exibir a lista de produtos como submenu. 15 Configurando os Menus do Marinelli para Listar Novo Tipo de Conteúdo em Drupal 7 Vamos agora configurar o Marinelli para exibir um menu drop down com os produtos criados por nós. 1. Vá em Aparência 2. Clique em configurações do tema marinelli 3. Role a página e clique em Primary Menu Settings 4. Na opção Which kind of primary links do you want to use? Escolha Mega Drop Down 5. Desça e clique em salvar configurações. 6. Vá para a Home Page 7. Coloque o Mouse em cima do Menu Produtos e veja que apareceu um menu embaixo listando todos os produtos que tinham sido adicionados a esse menu. 37

38 Pronto agora sabemos como mostrar submenus com o tema marinelli. Cada tema tem suas configurações de submenus. Caso deseje saber de um tema específico (google it). Também existem módulos que mostram esses menus drop down (Nice Menus e Superfish são exemplos). 16 Adicionando um Formulário de Contato em Drupal 7 Pessoal, agora veremos como permitir que sejamos contactados via um formulário de contato. 1. Vá em Módulos 2. Selecione o módulo Contact Salve as configurações. Pronto! Acabamos de habilitar um formulário de contato padrão para o nosso site. Se você acessar o link verá o formulário padrão. 38

39 Veja que os campos padrão que ele cria são: Seu nome Seu Assunto Mensagem Enviar uma cópia para você O enviado aí vai para (por padrão) para o configurado como padrão do site. (Escolhemos ele quando instalamos o Drupal, mas é possível mudar em Configurações dentro de informações do site). Vamos agora ver algumas configurações do formulário de contato. 1. Vá em Estrutura 2. Clique em Formulário de Contato 3. Vai aparecer uma página que lista todos os formulários de contato disponíveis (é possível ter mais de 1 mudando a categoria) 39

40 4. O formulário que acabamos de criar aparece lá listado 5. Clique em Editar 6. Irá aparecer os campos disponíveis para edição do nosso formulário de contato 7. Em categoria mude o conteúdo e coloque Críticas 8. Em destinatários você pode configurar quais são os s que receberão a mensagem enviada por algum usuário através desse formulário. 9. Em resposta automática, coloque o texto que você deseja enviar ao usuário que enviou uma mensagem através do formulário. Algo como agradecemos seu contato e retornaremos em breve. 10. Deixe o campo peso e o campo selecionado como estão (explicaremos mais em breve) 11. Clique em Salvar Vamos agora criar mais outras 2 categorias de Formulário. 1. Clique em Nova Categoria 2. Em categoria escreva Sugestões 3. Os outros campos preencha como quiser 4. Clique em Salvar 5. Repita esses passos e cria uma categoria chamada Elogios. Agora temos 3 categorias de formulário de contato. Se você acessar o link verá que no formulário apareceu um campo categoria onde a pessoa pode escolher qual a categoria de mensagem que ela pode enviar para o seu site. E como vimos anteriormente cada categoria pode ter seu destinatário e mensagens automáticas diferentes. 40

41 A categoria Críticas veio selecionada como padrão, se você quiser mudar isso pode utilizar o campo Selecionado no formulário de criar categoria (escolha editar categoria) e pode trocar qual delas vai vir selecionada por padrão. Já utilizando o campo peso é possível ordenar as categorias na lista. Falta ainda disponibilizarmos um link no menu para o formulário de contato. Para isso: 1. Vá em Estrutura 2. Clique em Menus 3. Em Main Menu clique em adicionar link 4. No campo título do link de menu coloque Contato 5. Em endereço coloque contact 6. Em descrição coloque algo como Página que mostra o formulário de contato do site. 7. Clique em salvar 8. Ordene esse menu da forma que você achar melhor a localização dele (já fizemos isso em aulas passadas). 41

42 Agora você pode ir pra Home e observar que temos um menu principal chamado Contato que nos leva diretamente a página de contato do site. Uma observação importante é que pelos padrões do Drupal, esse formulário de contato só é acessível por usuários regularmente cadastrados e logados no site. Se o usuário não tiver logado, nem o link nem a página de contato serão acessíveis. (Quando estivermos trabalhando com gerenciamento de usuário poderemos modificar essa configuração). Existem módulos Drupal que permitem criar formulários com campos personalizados. Veremos exemplos deles quando estivermos trabalhando com módulos avançados do Drupal. 17 Permissões e Papéis de Usuário em Drupal 7 Primeiro veremos que o Drupal 7 vem com 3 níveis de permissão padrão. Podemos ver isso da seguinte forma: 1. Vá em Pessoas 2. Clique na aba Permissões Veja que temos 3 níveis de permissão Usuário Anônimo: O usuário que está acessando o site sem estar logado Usuário Autenticado: Qualquer usuário que tenha uma conta no site e esteja logado Administrador: O usuário que tem permissões administrativas no site Temos um outro nível escondido aqui que é o Super Usuário. Esse usuário é aquele que criamos ao instalar o Drupal da primeira vez. Ele tem acesso a tudo no site, não sendo possível modificar as permissões dele. Nessa página podemos configurar através de checkboxes tudo que esses 3 níveis de permissão tem acesso ou não a fazer separado por cada módulo. Dê uma olhada nas opções. Depois disso, vamos fazer algumas configurações a respeito das contas de usuário. 42

43 1. Vá em Configurações 2. Clique no link Opções da Conta (que fica dentro da caixa Pessoas) 3. Aparecerá um formulário que permite configurar as várias opções relativas a Contas de Usuário 4. A primeira opção é definir qual o nome que aparece pra um usuário anônimo. Se estiver preenchido Anônimo deixe como está. 5. A segunda opção é de deixar ou não habilitado um formulário de contato pessoal para os novos usuários. É um formulário de contato onde um Administrador pode enviar s pessoais para um usuário específico. (Veremos isso posteriormente). 6. A próxima opção é configurar o papel do administrador. Deixe do jeito que está, pois dessa forma a Permissão de Administrador vai sempre ter todos os acessos permitidos para os módulos instalados. 7. Na parte de Cadastro e Cancelamento podemos configurar quem pode cadastrar contas no site. As opções são só o Administrador pode cadastrar contas, um visitante pode se cadastrar ou um visitante pode se cadastrar mas tem que ser aprovador pelo administrador. 8. Além disso é possível definir qual a ação a ser tomada no caso do cancelamento de uma conta. As ações disponíveis são: Desabilitar a conta mas manter o conteúdo criado por ela; Desabilitar a conta e o despublicar os conteúdos dela; Deletar a conta e tornar o conteúdo criado por ela pertencer a um usuário anônimo; Deletar a conta e o conteúdo. 9. Na parte de Personalização é possível dar permissão pros usuários terem uma assinatura quando criam algum conteúdo, terem foto, colocar uma foto padrão, alterar as configurações dessa foto, escrever instruções a respeito do envio da foto. 10. Mais no fim da página é possível modificar os s padrão enviado pelo site em cada situação assim como configurar notificações feitas ao usuário. (Tudo bem auto-explicativo). 11. Se você alterou algo clique no botão Salvar Configurações. Além 3 níveis de permissão que mostramos podemos ainda criar novos níveis de permissão, aqui chamados de papéis. Utilizamos isso quando queremos um papel de usuário específico que pode realizar funções que são diferentes de um usuário comum (usuário autenticado) e diferentes do administrador. Iremos 43

44 criar aí um papel de usuário intermediário com permissões específicas. E isso pode ser feito quantas vezes for necessário. 1. Vá em Pessoas 2. Clique na aba Permissões 3. Depois clique na opção Papéis (fica logo embaixo da aba) 4. Crie um papel chamado Publicador (escreva publicador no campo e clique no botão adicionar papel) 5. Clique em Editar Permissões para o papel Publicador 6. Irá aparecer uma tela com a possibilidade de definirmos as permissões desse papel para cada módulo. 7. Selecione permissões da forma que você quiser. 8. Clique em Salvar Pronto, agora quando um usuário for criado (através de um dos métodos que configuramos em opções da conta) ele pode ser selecionado para o papel publicador (além dos outros disponíveis). Bom basicamente isso aqui é o básico sobre permissões e papéis de usuários em Drupal Blocos Configurando os blocos Conforme falamos anteriormente, as páginas do Drupal são compostas de blocos, que são trechos de informação que são apresentados nas regiões do site. Portanto, vamos inicialmente montar o que vamos querer que apareça no nosso site. Siga estes passos: 1. Entre na área administrativa da página inicial do seu domínio, que é domínio]/admin. Como você pode ver na imagem abaixo, temos dois grandes painéis com links na parte central da página. 2. Você deverá clicar na opção Blocos, que está no painel à direita, cujo título é Construção do Site: 44

45 3. Com isso, você irá para uma nova página, onde você poderá configurar o que cada bloco conterá. Como você pode ver na imagem abaixo, existem áreas tracejadas na página. Lembra-se de quando dissemos que uma das facilidades do Drupal é a sua interface unificada, onde visualização e edição de página é a mesma coisa? Então, essas áreas tracejadas são as regiões, onde você poderá colocar o elemento que você quiser. Como? Arrastando o bloco para a região desejada. 45

46 4. Repare nas regiões à direita e à esquerda, chamadas Barra lateral esquerda e Barra lateral direita. Ela é uma região, e pode ser ocupada por blocos. No momento, a barra lateral esquerda está ocupada por dois blocos: Login do usuário e Navegação. Para você mudar qualquer uma de região, basta você clicar no ícone em forma de cruz (com 4 setas), e arrastá-la para outra região. Se você preferir, você pode clicar no menu que está na coluna Região, e selecionar qual região que você tem interesse que aquele bloco apareça. Por exemplo, você pode mover o bloco Links interessantes para a barra lateral esquerda. 5. Por vezes, você vai ter interesse em mexer na configuração do bloco. Talvez você queira personalizar, usando um outro nome para o bloco, ou alterar algum parâmetro para ficar mais ao seu gosto. Para isso, temos a terceira coluna, Operações, onde temos a opção Configurar disponível. Basta clicar nela: 6. No nosso exemplo, clicamos em Configurar para o bloco Links Interessantes. Logo teremos a seguinte tela: 7. Nessa tela, podemos configurar as características do bloco, como: 46

47 1. Descrição do bloco, onde você pode mudar a descrição que o bloco terá ao visulizá-lo na página administrativa. Título do bloco, onde você pode definir o título que aparecerá para o usuário. Corpo do bloco, onde você pode editar o que irá aparecer no bloco. No exemplo dos links interessantes que estamos vendo, você pode ali colocar os links que você quer que apareçam no bloco. Formato de entrada, onde, no caso desse bloco específico, é relacionado ao código HTML inserido na caixa Corpo do bloco. Configurações de visibilidade por usuário, onde é possível escolher como será a interação do usuário com esse bloco. Caso lhe interesse, você pode permitir que o usuário do site desative esse bloco, por exemplo. Configurações de visibilidade no papel dos usuários, onde é possível selecionar que tipos de usuários podem ver esse bloco. O Drupal tem alguns tipos de usuários, conforme falamos antes. Logo, caso você queira, somente uma categoria de usuários (anônimos ou autenticados) podem ver esse bloco. Configurações de visibilidade da página, onde você define em que páginas esse bloco pode aparecer. Vale ressaltar que as opções 4 a 7 são comuns a todos os blocos. 8. Caso você queira desativar algum bloco, basta mover o bloco para a região Desativado, ou na coluna Região, colocar como Desativado. Explicando os blocos Vamos entender para o que serve cada bloco disponível. O Drupal permite que você adicione os seguintes blocos: 1. Login do usuário: Bloco onde é possível colocar o login do usuário e a senha, para que ele possa ter acesso à área restrita. 2. Navegação: Bloco onde temos o menu interativo principal do Drupal, onde você tem acesso à área administrativa do site. Aqui você pode, por exemplo, lidar com a construção do site: blocos, menus, temas, módulos, etc., entre outras opções. Ela funciona como um atalho para quem está administrando um site, para não ter que voltar à página principal. No caso dos usuários anônimos, esse menu não aparece disponível. 3. Sites sugeridos ao usuário: Bloco onde o administrador do site pode colocar disponível para o visitante do seu site um conjunto de links para outros sites, relacionados ou não ao assunto do site em questão. 47

48 4. Feeds: Um feed RSS é uma maneira diferente da usual de um usuário interagir com um site: Através de um feed RSS e um programa agregador, um usuário pode assinar um site, e conforme novas notícias são colocadas, esse usuário pode lê-las, a partir do software agregador. Mas não há um consenso quanto ao seu uso: Alguns sites não oferecem feeds RSS, por ter medo de tirarem a visibilidade do seu site, e com isso perder receita advinda de propaganda exposta; Outros oferecem feeds das notícias, mas apenas uma parte delas. Dessa forma, o usuário interessado em lê-las, deve ir até o seu site para ler a notícia completa; Há ainda aqueles que fornecem feeds RSS das notícias completas, e a visita dos usuários apenas se dá para tecer comentários nas notícias. Logo, vemos que isso varia de acordo com o gosto de cada administrador de site. 5. Comentários recentes: Bloco onde os comentários mais recentes, feitos pelos usuários, são relacionados por ordem de ocorrência. 6. Menu primário: Bloco usado para mostrar as seções principais de um site. Note que as seções não são blocos. Esse menu pode ser, por exemplo, um conjunto de abas no topo da página. 7. Menu secundário: Bloco usado para apontar para seções menos relevantes do site, como por exemplo, página com aviso legal, detalhes de contato, sobre o site, e outras seções que desempenham um papel menor em relação ao menu primário. 8. Novos membros: Bloco que pode ser usado para relacionar os novos usuários cadastrados no seu site, isto é, se o seu site faz uso do cadastramento de usuários, por qualquer motivo. 9. Quem está online: Bloco que relaciona todos os usuários que estão conectados ao seu site nesse momento. Logo, se um usuário criado para uma pessoa está em uso (ou seja, fez uso do bloco Login do usuário ), acessando o seu site como um usuário autenticado, então ele será relacionado na lista criada por esse bloco Seletor de idioma: Bloco que permite ao usuário fazer a escolha do idioma do site. Vale lembrar que a tradução não é automática: O administrador deve fornecer as versões do site nos idiomas que desejar. O usuário pode então trocar entre o(s) idioma(s) apresentados. 11. Desenvolvido com Drupal : Bloco que identifica que o site foi desenvolvido fazendo uso do Drupal, ficando a cargo do administrador colocar essa identificação ou não. 48