Transcript
1
TUTORIAL DE JOOMLA! Desenvolvendo Portais Elegantes com Facilidade
Ribamar FS,
[email protected], 03 de novembro de 2005
2
3
ÍNDICE 1 – INTRODUÇÃO . 2 – INSTALAÇÃO . 2.1 – Servidor web local for Windows e for Linux 2.2 – Passos para a instalação do Joomla! . 2.3 – Telas da instalação Dependências . 2.3 Dependências 2 . 2.4 – Dados do servidor web, do banco e diretório do joomla. 2.5 – Nome do Site (título da página) . 2.6 – Dados finais . 2.7 Login e Senha de acesso à seção de administração. 2.8 – Dados para acesso . 2.9 – Remoção do diretório Instalation . 3 ADMINISTRAÇÃO DO JOOMLA! . 3.1 Seção de Administração . 3.2 Menu geral do site (frente) . 3.3 Menu Administração . 3.4 Menu Conteúdo . 3.5 Menu de Componentes . 3.6 Menu de Módulos . 3.7 Menu de Mambots . 3.8 Menu de Instaladores . 4 PERSONALIZANDO UM PORTAL GERADO . 4.1 TELAS FRONTEND (FRENTE) . 4.1.1 Item de menu de um Blog . 4.1.2 Item de menu das Notícias . 4.1.3 Seção de Perguntas e Respostas . 5 PERSONALIZAÇÃO VIA FRONTEND. 6 PERSONALIZAÇÃO MANUAL . 7 PERSONALIZANDO VIA BACKAND (Adminnistrator) . 7.1 Alterando um Banner . 7.2 Adicionar/Remover um Módulo . 7.3 Adicionar/Remover um Mambot . 7.4 Adicionar/Remover um Componente . 7.5 Adicionar/Remover um Template (Temas). 7.6 Adicionar/Remover um Item de Menu/Conteúdo. 8 ERROS . APÊNDICE A Configurar Apache, PHP e MySQL . APÊNDICE B . Offline Administrator . PopUp Login Box . APÊNDICE C Joomla Links .
3 4 .4 5 6 7 8 9 10 10 11 12 13 13 14 14 14 15 15 15 15 16 16 17 18 18 19 19 19 20 20 21 21 21 21 22 23 25 25 26 30
4 APÊNDICE D Relação de pastas e arquivos da versão 5.4.2.1 Pt_Br .
33
5
1 INTRODUÇÃO O Joomla! (Anteriormente Mambo) é um Sistema Gerenciador de Conteúdos desenvolvido em PHP, com JavaScript, CSS e XML, que facilita e muito a construção de portais web profissionais. Usa como base de dados o MySQL. Sistema Gerenciador de Conteúdo é um sistema sofisticado que já traz um portal prontinho, restando apenas personalizar. Sua maior compatibilidade com o sistema windows é com o XP (ou ntslike) e também roda nos Sistemas Operacionais Mac OS X, Linux e BSD. Pelas minhas pesquisas com vários SGC open sources, o Joomla! saiu na frente: open source, muitos recursos prontos, design profissional e especialmente sua praticidade, tanto para o administrador quanto para o seu usuário. Enorme quantidade de elementos (módulos, componentes, temas, etc) generosamente oferecidos pela comunidade via Internet. Se gostar deste tutorial, procure constantemente por atualizações, pois sendo meu primeiro tutorial sobre Mambo/Joomla! e como estou trabalhando atualmente com Joomla!, o atualizo com frequência.Vide sites: http://ribafs.clanshosting.com/ ou http://usuarios.lycos.es/ribafs/ . Diversos servidores de hospedagem free são incompatíveis com Joomla!/Mambo. Outros são semi incompatíveis, pois seus banners interferem nos editores HTML do CSM. Obs.: Este material foi desenvolvido com o Open Office Writer 1.1.3. Para tópicos mais avançados veja os Apêndices.
6
2 INSTALAÇÃO 2.1 – Servidor web local for Windows e for Linux: Para quem quer instalar localmente Apache, PHP e MySQL sem qualquer sacrifício no Windows temos várias opções, como o PHPEasy e o PHPTriad, o Wamp e o Xampp. O último é o meu preferido, por sua flexibilidade e recursos (o único entre todos que está disponível tanto para Windows quanto para Linux). Download do Xampp for Linux http://www.apachefriends.org/en/xampplinux.html (logo mais abaixo na página) Download do Xampp for Windows: http://www.apachefriends.org/en/xamppwindows.html Após instalar o executável já está tudo prontinho: Apache, PHP, MySQL, phpMyAdmin e outros recursos, como pequenos exemplos. Instalar o Xampp no Windows Basta executar o arquivo baixado e escolher um diretório de destino. Supondo que foi instalado em c:\1Xampp, seu diretório web será: c:\1Xampp\xampp\htdocs. Neste diretório devemos criar um sub diretório “joomla”, onde descompactaremos o arquivo do Joomla!. Para acesso via navegador, devemos startar o Apache e o MySQL pelo painél de controle do Xampp. Instalar o Xampp no Linux A instalação no Linux é quase tão simples quanto no Windows: Acesse um terminal do Linux como root e copie o arquivo baixado para o diretório /opt. Vá para o /opt (cd /opt) e descompacte com o comando: tar zxpvf xampplinux*.tar.gz Veja que ele cria o diretório “lampp” Vá para o lampp (cd lampp) e execute o comando: ./lamp start (com isso são startados todos os serviços do Xampp). Crie um diretório /opt/lampp/htdocs/joomla Descompacte para dentro deste o arquivo do Joomla Copie para o diretório criado o jooma*.zip, vá para o diretório joomla e descompacte com: unzip joomla*.zip Então abra no browser http://127.0.0.1/joomla/
7
8 Hospedagem Grátis – As hospedagens gratuítas com suporte a Joomla! ou Mambo em geral deixam a desejar (minha experiência com várias delas): problemas com os banners sobre os editores do Jooma, fora do ar com frequência, etc. Ainda assim eu vou sugerir o ClansHosting (http://www.clanshosting.com/) Que oferece email, 250MB, 5GB de banda e importante, o cPanel). Caso não esteja satisfeito com a hospedagem acima, procure outra free aqui: http://www.freewebhosts.com/webhosting01.php Ou este outro catálogo para PHP/MySQL: http://www.clickherefree.com/hostingfree/results.php?DiskSpace=0&Scripting2=PHP&Features4=MySQL Hospedagem Comercial – Normalmente esta é mais adequada, mas ainda assim devemos tomar precauções. Idealmente contrate um serviço indicado por alguém que já o utilize por algum tempo e esteja satisfeito. Lembre que não existe serviço perfeito, mas devemos tomar cuidados para evitar dores de cabeça. Caso não conheça alguém para a indicação, procure pelos forums de Joomla!, onde se fala sobre o assunto (uma boa pedida são os forums do Joomla! Brasil – http://www.joomlabrasil.org).
9
2.2– Passos para a instalação do Joomla! Contratar hospedagem, se cadastrar em uma hospedagem free ou instalar localmente Download – Site brasileiro do Joomla! (http://www.joomlabrasil.org), somente se já oferecerem uma versão em português do Brasil, caso contrário baixe do site oficial: http://www.joomla.org Baixe sempre a última versão (zip para Windows e tar.gz para Linux e similares). Envie o arquivo baixado via FTP (cheque o tamanho antes para ter certeza de ter baixado completo) ou acessando o cPanel do provedor e File Manager. Se for utilizar localmente no Windows copie para o c:\1Xampp\xampp\htdocs\joomla (ou outra do seu gosto), descompactando dentro dela o arquivo do Joomla!. No Linux copie para /opt/lampp/htdocs/joomla e descompacte com tar zxpvf joomla*.tar.gz. Abrir no browser a url que contém o Joomla!: http://meusite/joomla/ ou http://127.0.0.1/joomla/
10 2.3 – Telas de Instalação Dependências Quando teremos as duas telas abaixo. Elas trazem as dependências do Joomla e se seu sistemas as atendeu. Caso as dependências vitais sejam atendidas clique em Próximo, caso contrário altere as permissões dos diretórios sugeridos através do cliente de FTP ao do painél de controle do servidor de hospedagem.
Iremos instalar o Joomla! 1.0.3 em inglês.
11 2.3 Dependências – 2 Exemplo em servidor Windows. Para Linux temos que setar as permissões adequadamente (através do cliente de FTP ou do cPanel do servidor).
2.3.B – Licença
12
2.4 – Dados do servidor web e do banco de dados. Quando estamos em servidor remoto, já devemos ter em mãos os dados abaixo enviados pelo servidor de hospedagem. Aqui, quando a hospedagem só permite a criação de um único banco, usamos préfixos diferentes para simular a criação de outros bancos (ficam tabelas com préfixos diferentes para cada sistema).
13
14 2.5 – Nome do Site (título da página)
15 2.6 – Dados finais Recomendação: entre com email e troque a senha.
16 2.7 Login e Senha de acesso à seção de administração
Nesta etape remova complatamente o diretório installation do Joomla!, caso contrário não poderá acessar o site. Agora clique no botão View Site para acessar a parte da frente e no botão Administrator para acessar a seção de administração.
17
2.8 – Dados para acesso A tela abaixo é em sistemas Linux, onde precisamos salvar o conteúdo selecionado e sobrescrever o conteúdo do arquivo configuration.phpdist, depois remomeálo para configuration.php, encontrado no diretório raiz do Joomla!..
18
2.9 – Remoção do diretório Instalation Alerta, somente caso ainda não haja removido.
Com isso acabamos de instalar e temos portal quase pronto.
19
3 ADMINISTRAÇÃO DO JOOMLA! (BackEnd) Agora vamos ver alguns detalhes básicos sobre a administração do Joomla!: Acesse http://127.0.0.1/joomla/administrator e faça login.
3.1 Seção de Administração Com menus, botões centrais e Abas a direita.
20
3.2 Menu Site
3.3 – Administração dos Menus Clique em Menu Manager para administrar todos os menus. Clique em cada um dos tios para acessálo. O mais utilizado é o mainmenu (Menu Principal)
21
3.4 Menu Conteúdo Aqui gerenciamos os itens com conteúdo do site.
22 3.5 Menu de Componentes Componentes alteram a estrutura do Joomla! com addins (acréscimos).
3.6 Menu de Módulos Módulos trabalham junto ou isolados dos Componentes adicionando a estrutura do Joomla!.
3.7 Menu de Mambots Outro componente que transforma a estrutura do Joomla!. Os editores são exemplos de Mambots.
3.8 Menu de Instaladores dos Elementos
23 4 PERSONALIZANDO UM PORTAL GERADO 4.1 TELAS FRONTEND (FRENTE) Veja que temos uma tela index composta de muita coisa: logomarca, banners, frames, enquete, contato, etc. Tema padrão de um portal recéminstalado.
Aqui temos os principais elementos do Joomla: Menu Topo (acima), Menu Principal (esquerda), Componente (Polls, direita), Banner (ao meio), Módulo (Latest News e Popular) e Conteúdo (Welcome ao centro).
24
Veja abaixo alguns dos itens 4.1.1 Item de menu de um Blog.
25 4.1.2 Item de menu das Notícias Da a cesso a várias notícias. Grande fonte de conteúdo do portal, podendo ser adaptados para este fim.
4.1.3 Seção de Perguntas e Respostas
26
5 PERSONALIZAÇÃO VIA FRONTEND Alterando um item Abra o site de entrada (http://127.0.0.1/joomla/), para uso local, ou o endereço no host e faça login como usuário admin ou outro usuário administrador. Após fazer o login aparece um lápis ao lado de cada título editável, caso o usuário seja o admin ou o item tenha sido criado por ele. Vamos alterar apenas o título do artigo Welcome to Joomla para Bemvindo ao Joomla. Clique no lápis e altere o conteúdo. Após alterar clique no disquete para salvar o conteúdo alterado. A grande vantagem deste método é a praticidade, mas não tem todos os recursos que a seção Admin. Alerta: muitos provedores free tornam este método de administração inviável devido à interferência de seus banners.
6 PERSONALIZAÇÃO MANUAL Alterando a Logomarca Esta somente podemos alterar manualmente, mas assim mesmo sem grande trabalho. Clicar sobre a imagem do logo (Solar Flare II) com o botão direito, “salvar pano de fundo como” e salvar no disco. Editar e enviar para a pasta template de imagens: /joomla/templates/rhuk_solarflare_ii/images/
7 PERSONALIZANDO VIA BACKAND (Administrator) Faça login pela seção admin (http://127.0.0.1/joomla/administrator/), para uso local, ou o endereço no host. Vamos alterar um item de Conteúdo (Só o título). -
Menu – Conteúdo – Todos os itens de conteúdo
27 -
Clique em Welcome to Joomla! e altere para BemVindo ao Meu Site Clique no ícone do disquete para salvar
7.1 Alterando um Banner Este tem suporte somente via Admin: -
Menu – Componentes – Banner – Administrar Banner Clicar no banner desejado e alterar. Após as alterações clicar no disquete para salvar.
Veja que para usar uma nova imagem antes já deverá a ter enviado para a pasta de imagens do Banner, que então aparecerá na relação.
7.2 Adicionar/Remover um Módulo Obs.: É bom ter sempre duas janelas abertas, uma janela com o frontend e outra com o backend. Remover: Acessar a seção Admin e Módulos – Módulos do site Basta clicar no ícone Publicar para publicar/despublicar. Observe que existem mais de 10 itens e precisa exibir os restantes abaixo, se for o caso. Enquete, por exemplo, basta despublicar para que não mais apareça na página de entrada. Quando despublicado o ícone fica um X vermelho. Observe que vários módulos vem marcados ou desmarcados por default. Os demais (Componentes, Mambots, etc) são similares em comportamento. Adicionar: Módulos – Instalar/Desinstalar Em Pacote de arquivos clicar em Procurar e indicar o arquivo do módulo: (aqui indiquei verse_day e cliquei em Upload Arquivo & Instalar). Após instalar basta ir na relação de módulos instalados e personalizar, se precisar. Vá até a janela frontend e dê um refresh para ver o novo módulo.
28 Obs.: módulos são elementos independentes. Ao serem instalados basta publicar para que sejam exibidos no frontend.
29
7.3 Adicionar/Remover um Mambot Ficam apenas no lado do adminisrador. Mambots – Instalar/Desinstalar Semelhante ao módulo, indiquei o editor HTMLArea3XTDv11RC1.zip e instalei. Este é o meu editor preferido. Instale e veja se gosta. Outro editor muito bom também é o mosCE. 7.4 Adicionar/Remover um Componente Vamos instalar o mamboXplorer, uma excelente ferramenta do admin. Componentes – Instalar/Remover Instalar de maneira semelhante aos demais. Obs.: componentes são elementos que normalmente dependem de um módulo para aparecerem no frontend. Ao instalar devemos instalar também seu módulo correspondente e publicar para que seja exibido. Alguns poucos não precisam de um módulo, basta um item de menu para exibílos. 7.5 Adicionar/Remover um Template (Temas) Aqui uma força do Joomla: poder trocar o template do site e até permitir ao usuário que escolha um entre alguns selecionados. Site – Administrar Temas – Instalar Instalar de maneira semelhante aos anteriores. 7.6 Adicionar/Remover um Item de Menu/Conteúdo Para adicionar um item de menu, obrigatoriamente antes adicionamos um item de conteúdo ou outro da lista. - Primeiro crie um item de conteúdo – Conteúdo – Todos os itens de conteúdo. - Clique no botão Novo - Digite o título - Digite o aliás (nome para referência) - Insira o conteúdo: texto, imagem, link,etc ou cole da memória. O item de menu associado a um de conteúdo formam o uso básico do Joomla!.
30
8 ERROS 1) Ao encontrar o erro 2 ao acessar o site, o servidor do MySQL deve estar fora.
31 Apêndice A Detalhes para a instalação “manual”do Apache, PHP e MySQL. Preservando caminhos diferentes e serviços startados adequadamente podemos com esta receita ter duas versões de servidor web rodando numa mesma máquina, Instalar Apache 3.x, PHP 5.x, MySQL 4.x ou superiores, exceto apache que deve respeitar a linha 3.x.
Configurar Apache Após instalar edite o arquivo "...\conf\httpd.conf" Alterar: DirectoryIndex index.html Para: DirectoryIndex index.php index.html Adicione ao final: # De acordo com as intruções do arquivo "install.txt" do PHP: # Apache como modulo no PHP 5 ScriptAlias /php/ "c:/php/" AddType application/xhttpdphp .php Action application/xhttpdphp "/php/phpcgi.exe" LoadModule php5_module "c:/php/php5apache.dll" # specify the directory where php.ini is SetEnv PHPRC C:/php Configuração PHP Recomendação. Baixe e descompacte a versão no formato zip (por ser mais completa) no diretório c:\php (sugestão): Faça uma cópia do arquivo "php.inirecommended" que se encontra no raiz do php para "php.ini" e configure o arquivo php.ini alterando: Comente esta linha: error_reporting = E_ALL Adicionando um ; em seu início e Descomente esta: ;error_reporting = E_ALL & ~E_NOTICE, Removendo o ; Altere também a linha "display_errors = On" Para Off ao colocar o site em produção por conta da segurança. Altere:
32 ;include_path = ".;c:\php\include" Descomentando a linha de baixo (include_path). Para ficar assim: include_path = ".;c:/php Altere esta: doc_root = Para: doc_root = c:/www Altere esta: extension_dir = "./" Para: extension_dir = "c:\php\ext" Descomenta as linhas: ;extension=php_mysql.dll, Para dar suporte ao mysql Altere a linha: ;session.save_path = "/tmp" Descomentando e mudando o diretório: session.save_path = "c:\windows\temp" ou "c:\winnt\temp" Em tempo de desenvolvimento é uma boa ajuda para os desenvolvedores: display_errors = On Opcionalmente: magic_quotes_gpc = On Copiar as DLLs "libmysql.dll" e "php5ts.dll" do diretório do PHP para: c:\windown\system32 (ou correspondente do seu sistema). Para ter as variáveis globais registradas sete: register_globals = On Copiar o php.ini para o c:\windows Restartar o Apache Configuração do MySQL Instale no diretório c:\mysql A versão mysql4.1.11win32.exe está muito boa, especialmente nos ntslike. Instale como serviço. Ao terminar estará tudo pronto e o serviço no ar. Terstando: Crie um arquivo “c:\www\teste.php” com apenas a linha abaixo:
33 Abra no browser com a seguinte URL: http://localhost/teste.php ou http://127.0.0.1/teste.php
34
Apêndice B Offline Administrator De Andy Stewart
(http://www.troozers.com/) Possibilita que o administrador veja o site, este estando offline. Faça backup dos arquivos antes de editar. 1) Edite o arquivo ../administrator/index2.php adicionando as linhas abaixo após a linha 22, após esta linha: session_name( "troozers" ); session_start(); $_SESSION['admin_user'] = "Y"; session_write_close(); 2) Edite o arquivo index.php do raiz do Joomla! e faça as alterações sugeridas abaixo: Após a linha 20 deve ficar assim. Veja que foram adicionadas 3 linhas e à linha do If foi adicionado "&& ! $ok_to_browse". include_once( 'globals.php' ); require_once( 'configuration.php' ); // Aqui abaixo session_name( "troozers" ); session_start(); $ok_to_browse = ( $_SESSION['admin_user'] == "Y" ); // Até aqui // displays offline page if ( $mosConfig_offline == 1 && ! $ok_to_browse ){ Tradução e adaptação de Ribamar FS ribafs.org [email protected] 28/04/2005
35
PopUp Login Box De Andy Stewart (http://www.troozers.com/) Editando o template para inserir o código de um formulário muito elegante para login dos usuários, veja um exemplo no site http://acaosp.ribafs.org Faça backup dos arquivos antes de editar. 1) Abrir a index.php e editar adicionando a função em javascript entre as tags e como a seguir: ';?> function toggleBox(szDivID, iState) // 1 visible, 0 hidden { if(document.layers) // NN4 { document.layers[szDivID].visibility = iState ? "show" : "hide"; } else if(document.getElementById) // gecko(NN6) + IE5+ { var obj = document.getElementById(szDivID); obj.style.visibility = iState ? "visible" : "hidden"; } else if(document.all) //IE 4 { document.all[szDivID].style.visibility = iState ? "visible" : "hidden"; } }
2) Na tag adicionar a div que exibirá/ocultará o form:
36 Formulário de Login
| Nome de Unuário Senha Lembrar Senha | | Esqueceu sua senha | Sem Conta? Crie uma | |
37
3) O link com a chave: ...
