banner

PHP: Criando um catálogo de imóveis com o Phreeze parte lI – Ambiente de Desenvolvimento

Dando continuidade ao tutorial anterior, vamos montar nosso ambiente de desenvolvimento.

Nosso ambiente será basicamente composto de uma IDE de desenvolvimento e um repositório de código fonte visto que já temos nosso servidor apache com PHP rodando e o servidor de banco de dados iniciado com ferramentas para sua administração a nossa disposição. Utilizar uma IDE de desenvolvimento, permite a verificação de erros no código e controle maior do que vamos desenvolvendo no decorrer dos artigos. Além do mais, não é nada fácil ficar utilizando editores de textos simples, abrindo arquivos um a um e não ter a possibilidade de navegar entre as classes da aplicação.

Escolhendo uma IDE

IDE vem do inglês Integrated Development Environment ou seja: Ambiente de Desenvolvimento Integrado. Como disse anteriormente, vou procurar sempre a tradução livre para o português visto que o blog foca todos os tipos de público alvo.

Existem várias IDEs disponíveis para o desenvolvimento de aplicações PHP, irei listar algumas e explicar as características de cada. Caso você encontre outra que lhe agrade, o uso de IDEs é algo muito pessoal e por isso, se você está começando, aconselho a realização de experiências antes de optar por uma em definitivo.

  • Eclipse PHP Development Tools: Está é uma excelente IDE para PHP, ela permite o uso de templates de códigos, navegação, formatação, coloração de sintaxe, assistente de código e inúmeras outras facilidades para que o desenvolvedor perca tempo somente com a lógica e codificação. Ela permite inúmeras integrações com frameworks e é mantida pela comunidade do eclipse.
    Link: Eclipse PHP
    Link para Download: Download Eclipse PHP
    Licença: Gratuito
  • PHP Storm: Sem dúvida a Jetbrains anda dando um show quando o assunto é IDEs. Apesar de ser paga, a IDE deve ser observada pela sua qualidade e elegância. O PHP Storm conta com todos os recursos do Eclipse PHP e também integrações com frameworks PHP e ferramentas para análise de código levando em conta a qualidade do mesmo.
    Link: PHP Storm
    Link para Download: Download PHP Storm
    Licença: Teste gratuito por 30 Dias.

Nós vamos trabalhar neste tutorial com o Eclipse PHP pelo fato do mesmo ser gratuito. Recomendo para os mais interessados que verifiquem outros frameworks disponíveis como por exemplo o Zend Studio e o Netbeans PHP

Após realizar o download, basta descompactar a IDE em um local desejado. Se você não possui Java instalado na sua máquina, o eclipse não irá funcionar visto que o mesmo é desenvolvido em tal linguagem. Faça o download aqui Download do Java.

No meu caso, criei uma pasta chamada AmbientePHP na raiz de uma partição do disco e descompactei o eclipse nela.  Nesta pasta, criei um diretório com o nome workspace, nele serão criados e colocados os meus projetos além das configurações do eclipse em termos de perspectivas e configurações. Após a criação da pasta, clique no ícone eclipse.exe localizado dentro da pasta eclipse. O eclipse é carregado conforme figura 1.

figura1artigo2

Figura 1. Abertura da IDE Eclipse

Ao iniciar, o eclipse solicita o diretório do workspace, selecione o diretório criado. Caso você seguiu minha instrução acima aponte para o workspace senão, informe o diretório que você deseja e marque a opção para sempre utilizar este workspace, isto evita que esta janela seja exibida em toda inicialização da IDE.

Após aberto, o eclipse é dividido em 4 partes. No lado esquerdo temos o PHP explorer que é a aba onde nossos projetos serão exibidos, na parte central que é carregada em branco, teremos nosso código fonte aberto separadamente por arquivos. No lado direito temos o outline, que exibirá ao abrir os arquivos, métodos e variáveis criadas em nossas classes ou arquivos relacionados a código fonte e por fim, na parte inferior temos a aba de problemas que é responsável pela listagem de erros e alertas sobre o código. Há também o Console que exibe logs em tempo de execução da aplicação desde que seu apache tenha sido iniciado por dentro do eclipse. Abaixo, segue a figura 2 que exibe a tela da IDE.

figura2artigo2

Figura 2. Visão Geral do Eclipse PHP

 

Com nossa IDE aberta, vamos incorporar nosso projeto na mesma para darmos continuidade ao nosso aprendizado.

Primeiramente vamos criar um projeto com o nome imoveis, visto que o projeto gerado no artigo anterior possuía este nome. Para isto basta seguir os passos:

1 – Clique em File -> New -> PHP Project conforme a Figura 3.

figura3artigo2

Figura 3. Criando um projeto PHP.

2 – Informe o nome do projeto como imoveis e clique diretamente em Finish conforme Figura 4.

figura4artigo2

Figura 4. Informando os dados do projeto.

3 – Pronto! O projeto já está criado conforme Figura 5.

figura5artigo2

Figura 5. Projeto criado no eclipse.

Criamos o projeto e agora precisamos transferir o código fonte gerado no Phreeze no artigo anterior para ele. Outro ponto a ser observado é que nosso servidor Apache com PHP estão rodando com os aplicativos apontados para pasta htdocs do XAMPP. Você pode manter esta estrutura desde que a cada atualização na aplicação, você copie os arquivos modificados para este diretório. Caso você opte por algo mais prático, recomendo apontar seu http server para pasta workspace onde estão armazenados suas aplicações criadas no eclipse. Para isto, caso você utilize o XAMPP, navegue até a pasta [Diretorio_XAMPP]\apache\conf e abra o arquivo httpd.conf. Procure a linha Hover Me e altere para o caminho do seu workspace conforme código abaixo. Note que meu workspace foi criado no diretório I:\AmbientePHP\workspace, altere para o seu em caso de divergência com o script.

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "I:\AmbientePHP\workspace"
<Directory "I:\AmbientePHP\workspace">
 #
 # Possible values for the Options directive are "None", "All",
 # or any combination of:
 # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
 #
 # Note that "MultiViews" must be named *explicitly* --- "Options All"
 # doesn't give it to you.
 #
 # The Options directive is both complicated and important. Please see
 # http://httpd.apache.org/docs/2.4/mod/core.html#options
 # for more information.
 #
 Options Indexes FollowSymLinks Includes ExecCGI

 #
 # AllowOverride controls what directives may be placed in .htaccess files.
 # It can be "All", "None", or any combination of the keywords:
 # AllowOverride FileInfo AuthConfig Limit
 #
 AllowOverride All

 #
 # Controls who can get stuff from this server.
 #
 Require all granted
</Directory>

Salve o arquivo e reinicie o Apache.

Abra o diretório onde sua aplicação imoveis foi colocada anteriormente, provavelmente você inseriu a mesma na pasta htdocs, copie os diretórios e arquivos internos conforme Figura 6.

figura6artigo2

Figura 6. Copiando os arquivos gerados para o projeto.

Ao copiar, abra o eclipse, clique em cima do seu projeto recentemente criado com o botão direito e clique em paste (colar) conforme Figura 7.

figura7artigo2

Figura 7. Colando os arquivos no projeto criado.

Pronto, nosso projeto gerado no Phreeze foi transferido para o eclipse e nosso servidor apontado para o workspace. O resultado da exibição do projeto pode ser visualizado na Figura 8.

figura8artigo2

Figura 8. Visão geral do projeto devidamente carregado.

Ao acessar o servidor apache o projeto deve estar rodando conforme já visto no artigo anterior. Acesse http://localhost:[porta]/imoveis e veja se o resultado exibido é o mesmo da Figura 9.

Informação
Lembre-se que para a aplicação funcionar, é necessário que o framework esteja no servidor. Portanto, se você modificou o apache, apontando o DocumentRoot para o diretório do workspace, é necessário copiar ou mover o Phreeze para o mesmo diretório.
figura9artigo2

Figura 9. Aplicação rodando no servidor.

Pronto, temos um ambiente para nosso desenvolvimento local pronto para uso, é possível integrar o eclipse com o servidor, porém como utilizamos o XAMPP no tutorial, vamos manter as ferramentas de forma separada. Já que estamos configurando um ambiente para desenvolvimento, nada mais justo que incluirmos neste tutorial o básico para o uso de versionamento de código fonte utilizando um repositório.

Mas para que serve o repositório?

Imagine que você está realizando o tutorial, e ao copiar e colar um código ou então realizar uma modificação, sua aplicação simplesmente para de funcionar. O que fazer? A resposta não é única, você pode verificar o log do servidor ou então verificar o que foi modificado para gerar tal problema. Se você utiliza um repositório de código fonte, esta tarefa será muito simples, basta comparar a versão anterior com a atual e verificar o que foi modificado. Além disso, é possível reverter o código local para o que está no servidor, podendo selecionar um ou mais arquivos para tal tarefa.

Existem vários repositórios de fontes disponíveis no mercado. Os mais conhecidos são o SVN e o Git. Vamos utilizar o git por conta do mesmo estar em constante ascensão quando o assunto é repositório para código fonte. A comunidade adere cada vez mais o uso do mesmo e sua rapidez e administração o torna hoje líder neste assunto.

Utilizando o git com nosso projeto

O git é um repositório distribuído que permite que vários desenvolvedores utilizem repositórios diferentes no desenvolvimento, e em determinados momentos, o código de cada um é disponibilizado no repositório principal gerando uma versão de determinada aplicação.

Se você for utilizar o repositório git, primeiramente você deve baixar o git para seu computador através do link Download Git e para cliente, utilizaremos o próprio cliente do eclipse. A maioria das IDEs já possuem o git integrado, mas se você não optou por utilizar uma, você pode realizar o download de um cliente git. No caso do Windows, aconselho o uso do Tortoise git, baixando através do link: Download Tortoise Git

Aconselho o uso do Github ou do Bitbucket como repositório.

Vamos as características de cada um:

  • Github: O github é um repositório gratuito para uso aberto e pago para uso privado. Isso quer dizer que caso você opte pelo uso desta ferramenta e não queira pagar pelo seu uso, todos os códigos enviados para o repositório ficam visíveis para qualquer usuário. O github conta com uma wiki e uma pequena aplicação para controle de incidente para cada repositório criado. Ele permite ainda, você adicionar colaboradores ao seu repositório permitindo assim, que mais de uma pessoa trabalhe ao mesmo tempo.
    Link: Github
    Tipo: Gratuita para repositórios abertos e Pago para repositórios Privados.
  • Bitbucket: O Bitbucket é um repositório totalmente gratuito desde que você tenha até 5 usuários colaborando com um mesmo projeto, acima disso, você deve optar por uma assinatura de acordo com o número de usuários. O mesmo é disponibilizado pela Atlassian, empresa líder no mercado de ferramentas para desenvolvimento e possuí a possibilidade de repositórios públicos e privados sem custo e também uma versão simplificada da ferramenta JIRA para o controle de incidentes.
    Link: Bitbucket
    Tipo: Gratuita

Vamos utilizar o Github pelo fato dele ser o repositório oficial do site. Não iremos explicar os passos para criação da conta, vamos continuar o artigo a partir deste ponto portanto, crie uma conta no github e siga os passos a seguir.

Passo 1 – Crie um repositório clicando no ícone + -> New repository conforme figura 10.

figura10artigo2

Figura 10. Criando um repositório no github.

Passo 2 – Informe o nome do repositório, no nosso caso vamos utilizar o nome do nosso projeto imoveis. Marque o mesmo como público e vamos marcar a opção para criar um arquivo de README. Clique em Create repositor conforme figura 11.

figura11artigo2

Figura 11. Criando um repositório público no github.

Passo 3 – Seu repositório já foi criado, agora copie a URL do mesmo clicando no botão Copy to clipboard conforme Figura 12.

figura12artigo2

Figura 12. Copiando a url do repositório no github.

Passo 4 – Abra o eclipse clicando com o botão direito no seu projeto. Vá até Team -> Share Project… conforme Figura 13.

figura13artigo2

Figura 13. Criando um repositório local do git.

Passo 5 – Marque o checkbox “Use or create repository in parent folder of Project” -> Clique sobre o projeto dentro da lista e clique no botão Create Repository conforme Figura 14.

figura14artigo2

Figura 14. Configurando o repositório local do git.

Passo 6 – O projeto será marcado como está na Figura 15 e o botão Finish será habilitado, clique nele e o processo de criação do repositório está finalizado.

figura15artigo2

Figura 15. Configurando o repositório git local.

Se você verificar o Passo 4 novamente, verá que inúmeras opções apareceram dentro da opção “Team”. Isto ocorre pois um repositório do Git já foi criado localmente no seu computador.

Passo 7 – Devemos agora realizar o commit dos nossos arquivos para o repositório. Commit é a ação responsável em verificar as atualizações que o código sofreu, e “entrega-las” ao repositório. O git necessita que arquivos novos, sejam adicionados ao repositório, para isso, clique novamente com o botão direito na aplicação, vá até Team e clique em commit conforme a Figura 16.

figura 17-artigo2

Figura 16. Comitando o código fonte no repositório local.

Note que é exibido uma tela com a mensagem do commit, os arquivos e as informações do Autor. Informe a mensagem como “Versão Inicial” e selecione todos os arquivos conforme Figura 17.

figura16-1artigo2

Figura 17. Selecionando os arquivos e comitando no repositório local.

Clique em Commit.

Basicamente, todos os arquivos já foram enviados para o repositório local porém, por se tratar de um repositório, é importante que o mesmo não fique em nosso disco, visto que em caso de perda de dados, nosso código estará seguro se estiver em um repositório na “nuvem”. Vamos então, realizar o sincronismo do nosso repositório local, com aquele que criamos no github.

Passo 8 – Clique com o botão direito sobre o projeto -> Team -> Push Branch ‘master’ exibido na Figura 18.

figura18artigo2

Figura 18. Sincronizando o repositório local com o github.

Fazendo isso, estamos dizendo para nosso repositório local, que queremos que ele envie as nossas alterações para o repositório na nuvem selecionando a Branch ‘master’ ou seja, a raiz principal do repositório.

Em outros artigos, vou demonstrar o uso do git de forma mais detalhada, porém para nossos tutoriais, vamos utilizar esta forma simplificada de uso.

Passo 9 – Agora vamos informar os dados referentes ao nosso repositório na nuvem, na janela mostrada, vamos inserir a URL que copiamos no github e caso queira, informar o login e senha para autenticação. Marquei a opção para guardar as credenciais, isso evita que eu tenha que ficar digitando os dados toda hora que realizar um “push” para o repositório externo. Veja a Figura 19.

figura19artigo2

Figura 19. Informando os dados do github para o sincronismo.

Clique em Next. Na Figura 20, verificamos qual “commit” estamos enviando para o repositório na nevem, para qual “branch” estamos enviando e as opções disponíveis as quais vamos manter default pois nosso repositório encontra-se vazio.

figura20artigo2

Figura 20. Sincronizando o repositório local com o github.

Clique em Next novamente e veja que conforme a Figura 21, a janela de confirmação é apresentada, clique em Finish e posteriormente em OK.

figura22artigo2

Figura 21. Resultado da operação no github.

Navegue no github e veja as opções que ele nos fornece tais como a possibilidade de baixar nosso repositório diretamente da web, a possibilidade de criar uma wiki do aplicativo para documentação além de possuirmos uma ferramenta para a gestão de incidentes.

Nos próximos artigos, vamos continuar utilizando o github no nosso projeto, e apesar de seu uso ser opcional, é altamente recomendado pois assim, a rastreabilidade do código fonte é mantida e o código é armazenado em um local seguro para que caso algo de errado aconteça com nossa máquina, a aplicação poderá ser continuada utilizando o repositório github.

No tutorial seguinte, vamos realizar o entendimento da aplicação gerada na parte I além de realizar modificações na interface gráfica, permissionamento de segurança e a inserção da imagem para darmos continuidade ao nosso catálogo de imóveis.

Tiago Carpanese
Tiago Carpanese
Criador deste site, apaixonado por tecnologia, busco contribuir para a segregação do conhecimento. Não deixe de curtir este site no Facebook clicando em Curtir na Barra da Direita. Siga-me no Twitter para ficar por dentro das novidades. Não deixe de comentar !
  • Vanderci Eduardo Pereira

    Boa tarde Tiago,

    Excelente o seu tutorial. Parabéns.

    O seu exemplo rodou perfeito quando utilizei a pasta de instalação padrão do Xampp (htdocs). No entanto, depois que a coloquei na pasta indicada (C:ambientePHPworkspaceimoveis), passou a apresentar o erro abaixo:

    Warning: require_once(verysimple/Phreeze/Phreezable.php): failed to open stream: No such file or directory in C:ambientePHPworkspaceimoveislibsModelDAOUserDAO.php on line 5

    Fatal error: require_once(): Failed opening required ‘verysimple/Phreeze/Phreezable.php’ (include_path=’C:ambientePHPworkspaceimoveis/libs/;C:ambientePHPworkspaceimoveis/../phreeze/libs;C:ambientePHPworkspaceimoveis/vendor/phreeze/phreeze/libs/;C:xamppphpPEAR’) in C:ambientePHPworkspaceimoveislibsModelDAOUserDAO.php on line 5

    Obs.: Quando reconfigura para a pasta padrão do Xampp, ela volta a rodar. Poderia me ajudar com este problema? Grato.