MUITO ESTUDO CURSOS ONLINE

Moiss Oliveira de Arajo

Criando sites: preparando seu ambiente de desenvolvimento

Campo Grande 2013

Moiss Oliveira de Arajo

Criando sites: preparando seu ambiente de desenvolvimento

Trabalho de Concluso de Curso apresentado como requisito para aprovao no Curso de Qualificao Profissional Webdesign Avanado, sendo submetido ao site Muito Estudo Cursos Online.

Campo Grande 2013

SUMRIO
RESUMO ......................................................................................................................... 4 INTRODUO ................................................................................................................ 5 OBJETIVO ....................................................................................................................... 6 DISCUSSO .................................................................................................................... 7 1. 2. 3. 4. O que saber para programar para a Web .............................................................. 7 Por que preparar um ambiente de desenvolvimento importante........................ 7 Modelo de programao MVC ............................................................................. 7 Ferramentas de apoio ao desenvolvimento MVC................................................. 8 4.1. 4.2. 5. Onde encontrar as ferramentas de apoio....................................................... 8 Como configurar o ambiente usando as ferramentas de apoio ..................... 9

Finalizando as configuraes do Ambiente de Desenvolvimento ...................... 10 5.1. 5.2. 5.3. 5.4. Configuraes do CakePHP no servidor Apache ....................................... 11 Finalizando as configuraes core.php ....................................................... 11 Alterando o arquivo de conexo com o banco de dados ............................ 12 ltimo passo configurar o Eclipse .......................................................... 13

6.

Crie novos projetos e comece a programar para a Web ..................................... 14

CONCLUSO ................................................................................................................ 15 REFERNCIAS ............................................................................................................. 16

RESUMO

Este trabalho sobre os principais aspectos envolvidos no preparo correto do ambiente de desenvolvimento de sistemas para a Internet. Podero ser utilizadas, neste ambiente, diversas tcnicas de criao de Website, melhorando a produtividade do webdesigner, por exemplo, com o uso do framework CakePHP, uma ferramenta agregadora, que nos fornece um melhor controle sobre o layout das pginas, facilidade no desenvolvimento de CSSs, acesso banco de dados, ferramenta case para a criao de formulrios, alm de fornecer uma programao estruturada no padro MVC. Palavras-Chave: ambiente de desenvolvimento , framework, CakePHP, ferramenta case, MVC.

Abstract
This work is about main aspects envolved to build on ambient of development systems to Internet. Can use, in this ambient, some techniques of making Website, increasing the productivity of webdesigner, for example, the use of framework CakePHP, by use one aggregative tool, we can have a more control about pages layouts; ease on css's development; access to database; form's tools creations; furthermore improve the structured programming on MVC patterns. Keywords: Developments ambient, framework, CakePHP, case tools, MVC.

INTRODUO
indiscutvel a existncia de inmeras tcnicas para o desenvolvimento de um website e uma vasta gama de ferramentas e linguagens de programao para este fim. O programador web precisa entender, alm de de assuntos bsicos relacionados programao como por exemplo: HTML, formatao com CSS, tcnicas de acesso a banco de dados, etc dominar tambm a preparao do ambiente de desenvolvimento, o que envolve uma escolha criteriosa das ferramentas de trabalho. Aqui sero apresentados os passos necessrios configurao de um ambiente de desenvolvimento de sistemas, cujo objetivo auxiliar a organizao do trabalho de se programar para a Internet.

OBJETIVO
Longe da pretenso de ser um guia completo de configurao de ambientes de desenvolvimento para webdesigners, este trabalho, alm de desmistificar o assunto em questo, objetiva ser um auxlio para o desenvolvedor de pginas web, podendo ser usado como referncia bsica aos que desejam iniciar no campo da programao para a Internet ou aos que precisam expandir seus conhecimentos. De forma clara e objetiva este trabalho ir demonstrar, em ambiente Windows, os principais pontos da preparao do ambiente de desenvolvimento de software para a Internet, inclusive a preparao do framework a ser utilizado, melhorando substancialmente a produtividade do profissional.

DISCUSSO
1. O que saber para programar para a Web
Qualquer empresrio que pretenda expandir sua loja alm das fronteiras da sua cidade, ou at mesmo do seu estado, ou at mesmo do seu pas, precisa recorrer aos recursos da Internet. Hoje, a rede mundial de computadores movimentam bilhes de dlares em todos os continentes. Colocar um site no ar no demasiado complicado, todavia extremamente recomendvel que o profissional de TI (tecnologia da informao) envolvido tenha, alm de conhecimento suficiente do assunto, que engloba: HTML, CSS, linguagem de programao (PHP ou Java so as mais populares), tcnicas de acesso ao banco de dados, gerenciador de banco (Postgres, MySql, oracle, etc), dentre tantos outros; critrios e padronizaes no seu ambiente de desenvolvimento, objetivando facilitar o seu trabalho no momento de colocar em prtica seus conhecimentos.

2. Por que preparar um ambiente de desenvolvimento importante

Um ambiente de desenvolvimento promove segurana ao programador. onde ele vai simular o funcionamento do sistema como um todo. Quando houver alteraes ou correes no sistema, o programador poder faz-lo no ambiente de desenvolvimento, e aps os testes necessrios, poder subir suas alteraes para o ambiente de produo (a prpria Internet).

3. Modelo de programao MVC

Este modelo de programao tambm chamado de programao em trs camadas. A sigla MVC significa: Model (Modelo), View (Viso) e Controller (Controlador). O objetivo da programao em trs camadas, alm de proporcionar uma indiscutvel organizao do cdigo, tambm proporciona uma camada de segurana s pginas web. Veja o esquema a seguir:

Requisio do Usurio

Controller

View Usurio

Model

Vejamos o que significa cada crculo da imagem: View significa visualizao, ou seja, a pgina em si, onde se encontra o cdigo HTML, os arquivos de estilo (CSS), as figuras, as tabelas, etc. Controller o controlador da pgina, ou seja, o local onde fica especificado o que o usurio pode ou no fazer (aes do usurio) dentro de uma webpage. Model o modelo, ou melhor, a representao de uma tabela do banco de dados. no Model que podemos fazer a validao de dados enviados nos formulrios das views, indicar como o modelo se relaciona com outros modelos, etc. Se voc observar atentamente a imagem, vai perceber que o usurio no tem acesso direto aos modelos (tabelas) do banco de dados, e a nica forma de interagir com a homepage fazendo requisies (pedidos) ao controlador que fornece as respostas atravs dos arquivos de viso (views), desta forma os dados esto mais protegidos, pois eles no se encontram nos arquivos de viso, e sendo permitido sua visualizao apenas por meio do controlador, que faz uma espcie de ponte entre usurio e modelo de dados (Model).

4. Ferramentas de apoio ao desenvolvimento MVC

Foram testadas as seguintes ferramentas de apoio: Eclipse HELIOS para programadores PHP, Gerenciador de BD PostgreSQL verso 9.0, servidor web Apache 2.2, PHP 5.3 e o Framework CakePHP verso 2.3.5.

4.1. Onde encontrar as ferramentas de apoio

O Eclipse para programadores PHP pode ser encontrado em http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliossr2, e apresenta-se na verso HELIOS.

Dentre os mais populares BDs, encontramos o PostgreSQL, que pode ser baixado diretamente em http://www.postgresql.org/download/, encontre a verso verso 9.2.4, o

arquivo a ser baixado depende do ambiente de instalao (Windows; linux; ou mac Os). O servidor de web Apache para 2.2 o poder ambiente ser baixado Windows no o link link

http://httpd.apache.org/download.cgi,

http://www.apachelounge.com/download/ o mais recomendado, procure pela verso 2.2.24; lembrando que este servidor importante para o uso dos scripts da linguagem PHP, sem a instalao do servidor web, nosso ambiente fica incompleto e inviabiliza o trabaho. A linguagem de programao a ser usada, o PHP pode ser baixado no endereo http://php.net/downloads.php; vamos utilizar uma verso que possui instalador para Windows, o PHP 5.3. Ao entrar no site indicado para o download, encontre o arquivo Installer da verso VC9 x86 Thread Safe, e faa o download. Finalizando, vamos baixar a ferramenta de auxilia na construo do modelo MVC, o CakePHP. Voc pode baix-lo gratuitamente pelo link: http://cakephp.org/. Geralmente o site apresenta um link para o download logo na pgina inicial.

4.2. Como configurar o ambiente usando as ferramentas de apoio

Inicie pela instalao do servidor Apache, de preferncia 2.2, Aps extrair os arquivos para uma pasta da raiz (provavelmente a pasta vai se chamar apache2), digite o seguinte comando no diretrio c:\apache2\bin usando o prompt do DOS (cmd): httpd.exe -k install Voc acaba de instalar o apache como um servio do Windows. Para acompanhar o status do servio, existe um programa chamado apache monitor, o qual dever ser copiado para a pasta de inicializao do Windows. Use o apache monitor para iniciar o servio. Pronto! Para testar, basta digitar no browser a seguinte url: localhost e; se tudo estiver correto, dever aparecer uma pgina da web apenas com as palavras It Works! que quer dizer Est Funcionando!. Continuando, vamos instalar o PHP. Mas ateno, antes de iniciar a instalao do PHP, pare o servidor apache, por meio do ApacheMonitor. Na tela de Welcome (Bem vindo!) d um next para continuar; aceite os termos de licena e d um novo next; aceite a sugesto de diretrio de instalao, que dever ser o C:\Arquivos de programas\PHP\ e next;

10

deixe marcada a primeira opo de web Server, que o Apache 2.2.x Module e d um novo next; indique neste momento o diretrio do arquivo de configurao do servidor apache, que deve ser o C:\Apache2\conf, next; Escolha todos os itens relacionados ao postgres (inclusive o PDO), next novamente e install. Finish para fechar a tela de instalao do PHP e reinicie o apache. Voc pode testar a instalao do PHP digitando na URL do browser: http://localhost/phpinfo.php, se a instalao foi feita de maneira correta, voc ver as informaes de instalao do PHP na tela do seu navegador. Dando prosseguimento, o PostgreSQL tambm dever ser instalado, sua instalao no compreende qualquer dificuldade e se parece muito com a instalao do PHP, com a diferena de que deve ser escolhida a senha para o usurio principal do banco de dados. Uma dica que pode ser bastante valiosa a seguinte: escolha uma senha segura, todavia de fcil memorizao. Dessa forma evita-se problemas de acesso no autorizado ao banco de dados. Abaixo, uma imagem do incio da instalao do PostgreSQL.

Continuando, vamos baixar e instalar o framework CakePHP. Opa, espere a, instalar o CakePHP?! No, no precisa, o Cake no instalado na mquina, apenas descompactado. Aps extrair o programa na raiz do sistema, renomeie a pasta para projetos, que um nome mais fcil de se trabalhar. Agora no resta muito a fazer, basta instalar o Eclipse e estaremos com nosso ambiente de desenvolvimento quase pronto. Mas... instalar o Eclipse?! No, tambm no precisa, o Eclipse apenas descompactado na mquina e seu executvel o arquivo eclipse.exe, facilmente encontrado na pasta descompactada.

5. Finalizando as configuraes do Ambiente de Desenvolvimento

At aqui fizemos as instalaes necessrias para que o apache conversasse com o PHP. Agora precisamos configurar o framework cakePHP e o eclipse. As configuraes do CakePHP sero finalizadas em trs pequenos arquivos: httpd.conf (arquivo do apache), core.php (arquivo do ncleo do CakePHP) e arquivos de conexo com o banco (database.php).

11

5.1. Configuraes do CakePHP no servidor Apache

Proceda da seguinte forma: a) Pare o servidor apache; b) Encontre o arquivo httpd.conf, localizado no diretrio C:\Apache2\conf; todavia se a instalao do Apache est em outro diretrio, encontre o arquivo no diretrio conf da instalao do apache. Aps encontrar o arquivo, localize e altere as seguintes linhas: #LoadModule rewrite_module modules/mod_rewrite.so => LoadModule rewrite_module modules/mod_rewrite.so (apenas retire o sinal #, para descomentar a linha); ServerAdmin admin@example.com => ServerAdmin seu_email_aqui@example.com (altere o endereo de e-mail para onde deve ser enviadas as notificaes do servidor); DocumentRoot "c:/Apache2/htdocs" => DocumentRoot "c:/projetos/app" (alterando a pasta de localizao de arquivos para a pasta do CakePHP); AllowOverride None => AllowOverride All (alterao de permisso necessria ao funcionando do CakePHP); <Directory "c:/Apache2/htdocs"> => <Directory "c:/projetos/app"> (alterando a pasta de localizao de arquivos para a pasta do CakePHP); DirectoryIndex index.html => DirectoryIndex index.html index.php (acrescentar no final da linha o index.php);

5.2. Finalizando as configuraes core.php

c) Localize o arquivo core.php que se encontra na pasta C:\projetos\app\Config (que foi a pasta para a qual sugerimos a instalao do CakePHP, caso o usurio tenha decidido pela instalao do CakePHP em outra pasta deve-se procurar o arquivo core.php na pasta escolhida). Aps encontrar o arquivo, localize e altere as seguintes linhas:
Configure::write('Security.salt', Configure::write('Security.salt', 'DYhG93b0qyJfIxfs2guVoUubWwvniR2G0FgaC9mi'); => 'DYhG93b0qyJfIxfs2guVoUubWwvniR2G0FgaC9mx');

Muita ateno! Talvez voc no tenha percebido a alterao! Ela ocorreu na ltima letra da seqncia. Esta seqncia pode ser outra na sua instalao e voc pode trocar o ltimo caracter por qualquer letra ou nmero diferente daquele apresentado, isto quer dizer que o x usado para substituir o i foi totalmente arbitrrio. Essa troca do ltimo caracter necessrio. Como as seqncias nas instalaes do CakePHP podem se apresentar de forma diferente, voc precisa encontrar a linha que comea com Configure::write('Security.salt' e alterar o ltimo caracter da seqncia apresentada, o caracter a ser usado para substituir o ltimo fica a critrio de cada usurio.
Configure::write('Security.cipherSeed', '76859309657453542496749683645'); Configure::write('Security.cipherSeed', '76859309657453542496749683648'); de =>

forma semelhante ao ocorrido anteriormente, ser apresentada outra linha para que voc, arbitrariamente troque o ltimo nmero por outro nmero diferente. A

12

nica diferena desta troca para a anterior que desta vez um nmero (a seqncia dever ser formada s por nmeros) deve ser trocado por outro nmero (no pode ser letra). Arbitrariamente foi escolhido o nmero 8.
//date_default_timezone_set('UTC'); => date_default_timezone_set('UTC');

(apenas retire o

// do inicio da linha para descoment-la);

5.3. Alterando o arquivo de conexo com o banco de dados

Localize no diretrio C:\projetos\app\Config, o arquivo database.php.default e altere seu nome para database.php, retirando o .default. Abra esse arquivo e configure a conexo com seu banco de dados, no nosso exemplo o Postgres. Primeiro, localize o seguinte bloco de cdigo no referido arquivo: public $default = array( 'datasource' => 'Database/Mysql', 'persistent' => false, 'host' => 'localhost', 'login' => 'user', 'password' => 'password', 'database' => 'database_name', 'prefix' => '', //'encoding' => 'utf8', ); Altere este bloco conforme as informaes do seu banco de dados, o que deve produzir um resultado muito parecido com este: public $default = array( 'datasource' => 'Database/Postgres', 'persistent' => false, 'host' => 'localhost', 'port' => '5432', // Porta default do postgres 'login' => 'postgres', // Usurio padro do banco de dados 'password' => '123456', // Senha da sua escolha na instalao do banco 'database' => 'banco', // Apenas uma sugesto, pode ser qualquer nome 'prefix' => '', 'schema' => 'loja10', // Apenas uma sugesto, pode ser qualquer nome 'encoding' => 'utf8' );

13

5.4. ltimo passo configurar o Eclipse

Abra o eclipse, ser pedido o local de trabalho (diretrio), onde se encontram os arquivos a serem acessados pelos projetos web, ento digite C:\projetos (que tem sido o local sugerido no decorrer deste guia). Bem, agora vamos dizer ao Eclipse que ele precisa reconhecer arquivos com extenso .ctp, que um tipo de arquivo padro do cake. V at a opo Window (que fica na parte superior do programa) e clique em Preferences. Observe a imagem abaixo:

Em General, clique em Content Types. No lado direito clique em Text. As opes de Text sero expandidas, ento clique em PHP Content Type (em destaque na imagem). Em File associations, voc ver uma lista de arquivos que j so reconhecidos pelo PHP. O objetivo criar mais um tipo de arquivo nesta lista, para tanto clique em Add... e quando ser requisitado o novo tipo, informe: *.ctp e confirme.

14

Os crculos esto em ordem de ao a serem executadas, sendo que o crculo 5 o resultado final desta configurao. Para confirmar tudo clique em ok.

6. Crie novos projetos e comece a programar para a Web

Nosso objetivo at aqui foi concludo, uma vez que todo o ambiente de trabalho j est pronto para ser usado. Porm a ttulo de informao e objetivando deixar este trabalho mais completo, vamos criar um pequeno projeto no Eclipse para demonstrar a facilidade da programao com framework. Digite Alt + Shift + N e observe a imagem abaixo: Clique logo na primeira opo, ou seja, em PHP Project. Nas telas que se apresentaro a seguir, voc vai precisar informar algumas coisas sobre o novo projeto que voc est criando. A primeira informao o nome do projeto (Project Name). Digite apenas app e d um next para fornecer mais informaes. Agora voc ver uma tela chamada PHP Include Path onde a aba Source j est selecionada. Nesta tela informaremos ao Eclipse quais so as pastas fsicas (diretrios) relacionadas ao nosso novo projeto. Para isso clique em Add Folder... Sero listadas as patas do CakePHP. Selecione todas, com exceo da patas tmp e clique em ok. No necessrio um novo next, vamos concluir a criao do novo projeto clicando em Finish. Bem, nosso ambiente de trabalho est totalmente instalado e configurado, inclusive com acesso banco de dados. Um novo projeto j foi criado. Do que precisamos para o incio do trabalho de programao web? Talvez alguns conhecimentos bsicos sobre cakephp. Indico abaixo alguns links de apostilas interessantes sobre o assunto. Manual oficial (Ingls): http://book.cakephp.org/2.0/_downloads/en/CakePHPCookbook.pdf Apostila de cake (Portugus): http://www.wesleyk.com/blog/wp-content/uploads/2009/08/apostila-cakephp.pdf Artigos, dicas, tutoriais (Ingls): http://bakery.cakephp.org/ Revista digital que ensina a usar a ferramenta bake (gerao automtica de cdigo): http://diariodebordo.phpreview.net/wp-content/uploads/2012/07/ed04.pdf Alm dos links citados acima, temos inmeros outros que tratam de assuntos especficos relacionados a este trabalho. Ento s resta-nos dizer, caro leitor, Boa sorte e bom trabalho!

15

CONCLUSO
Conclumos que a instalao e a configurao de um ambiente de desenvolvimento nos padres MVC e usando o framework CakePHP no uma tarefa muito complicada. bvio que um programador, fazendo uso de sua experincia, pode ter mais facilidade no preparo deste ambiente. Todavia podemos afirmar que qualquer pessoa pode realizar esta tarefa, basta escolher os programas certos, que sejam compatveis entre si e entre o ambiente onde sero utilizados e prestar bastante ateno na instalao e configurao de cada um desses programas. Os conhecimentos sobre HTML, CSS, PHP entre outros, iro somar ao desenvolvimento estruturado dentro de um padro organizado de programao web.

16

REFERNCIAS
FOUNDATION, Cake Software. CakePHP Cookbook Documentation Release 2.x 2013 Disponvel em <http://book.cakephp.org/2.0/_downloads/en/CakePHPCookbook.pdf>. Acesso em: 15 Mai. 2013.

COSTA, Thiago Rheinheimer; ASSUNO, Wesley Klewerton Guez. CakePHP: Framework para Desenvolvimento WEB gil - 2009. Disponvel em: <http://www.wesleyk.com/blog/wp-content/uploads/2009/08/apostila-cakephp.pdf>. Acesso em: 15 Mai. 2013.

Usando o Apache com o Microsoft Windows. Disponvel em <http://website.blog.terra.com.br/files/2009/01/instalacao_apache_http_server_22.pdf>. Acesso em: 10 Mai. 2013.

BITTAR, Thiago Jabur. Desenvolvimento Web Avanado usando PHP: conceitos bsicos, perspectivas e tendncias 2007. Disponvel em <http://www.aptor.com.br/portal/php_tecnologias_web.pdf>. Acesso em: 10 Mai. 2013.

Focke, rika. PHP e Desenvolvimento WEB com Ferramentas Open Source. Disponvel em <http://www-pet.inf.ufsm.br/OficinaPHP_2007/apostilas/php_tutorial3.pdf>. Acesso em: 10 Mai. 2013. SOLGATE, Vanessa Rocha. Apostila sobre o Banco de Dados Postgre 2005. Disponvel em <http://www.comeback.com.br/downloads/Apostila_de_Postgre.pdf>. Acesso em: 15 Mai. 2013.

LATTES, Biblioteca Central Cesar. Guia de Normalizao ABNT para Referncias e Citaes Campinas: UNICAMP, 2008. 47p.

SANTOS, Dely Bezerra de Miranda. Normalizao de Trabalhos Acadmicos. 1ed. Rio de Janeiro: EDUR, 2003.