O documento resume conceitos básicos da programação web, incluindo: 1) A mudança da Web 1.0 estática para a Web 2.0 dinâmica e participativa; 2) Tecnologias como JavaScript, Ajax e CSS que permitem a interatividade; 3) Ferramentas como Firebug e Zend Studio para desenvolvimento web.

1. Fabio Ginzel [email_address]

2. PROGRAMAÇÃO WEB

3. OBJETIVO: Compreender conceitos básicos do funcionamento da internet; Entender as mudanças da antiga web para a nova web (web 2.0) Entender o fluxo de uma aplicação web Saber o “nosso” modo de programar para web

4. RESUMO Conceitos de Web Ferramentas de Programação O Desenvolvimento

5. Conceitos de Web Conceitos de Web 1.1 JavaScript 1.2 Requisição 1.3 Web “1.0” 1.4 Web “2.0” 1.5 Ajax 1.6 CSS

6. JavaScript Linguagem interpretada Roda do lado do cliente (quem interpreta é o browser) Consegue alterar elementos html dinamicamente, por isso é usada para validações dinamicas. Pode estar dentro do html ou em um arquivo separado Pode ter funções ou não

7. JavaScript dentro de um arquivo HTML Com Função: <script type=&quot;text/javascript&quot;> function msgErro(erro){ alert(“O erro foi: “ + erro); } </script> Sem Função: <script type=&quot;text/javascript&quot;> alert(“Seu Browser passou por aqui”); </script>

8. JavaScript Externo No html: <script type=&quot;text/javascript“ src=“/apresentacao/arquivo.js&quot;></script> No Arquivo (arquivo.js): grupo = { msgErro : function(erro){ alert(“Msg de erro dentro de arquivo: “ + erro) ; }, escreveNaDiv : function(msg){ document.getElementByID(“nomeDaDiv”).innerHTML = msg ; } }; alert(“passou pelo arquivo”) ;

9. Requisição Uma mensagem enviada pelo cliente (browser) para o servidor web solicitando dados Existem diversos “metodos” de requisição, que diz o que o servidor deve fazer com aquela requisição Usamos basicamente 2: Get e Post

10. Método Get Solicita a resposta do servidor dado um determinado endereço (nada mais) Nesse endereço podem conter parametros da requisição. Uma aplicação pode receber esses parametros e decidir quais dados retornar Ex: http://www.pandora.com.br Com parâmetros: http://www.orkut.com.br/ Main#Community?cmm=161395

11. Método Post Solicita a resposta do servidor dado um determinado endereço e uma série ilimitada de parametros que vão no corpo da mensagem O Endereço se mantem inalterado e os parametros vão de forma que o usuário não perceba Exemplo: preenchimento de um formulário, após clicar no OK.

12. Post e Get Comparativo O get tem uma limitação de quantidade de parametros, já que o endereço do site tem um limite Não da para gravar no favoritos ou no historico um pagina gerada atraves de um dado que vai no post

13. Post e Get: Quando Usar? Usar o Get em paginação ou em paginas que o usuario pode querer acessar diretamente sem passar por intermediarios Usar o post em todos os outros casos, resumindo... Em Formulários.

14. Web “1.0” Paginas estaticas, sem interação com usuário, onde o servidor web retorna sempre uma pagina completa O Browser (cliente) só tem o trabalho de exibir a pagina que o servidor retornou. O Usuário é apenas um leitor da informação. Ex: http://www.sindicato.com.br/

15. Web “2.0” Paginas dinamicas, alteradas com a participação do usuário. O Usuário deixa de ser um leitor, ele passa ser um escritor daquela pagina, solicitando e cadastrando informações. O Browser (cliente) passa a fazer parte da programação, interpretando javascripts que fazem a interação acontecer. Ex: http://www.orkut.com/

16. Ajax Nova Linguagem? Grande Inovação?

17. AJAX Asynchronous Javascript And XML Nada mais do que o uso do javascript para fazer requisição ao servidor web, retornando apenas dados e não mais uma pagina inteira. Manuseando esses dados retornados na tela de forma a criar uma pagina dinamica Ex. Qualquer grid dos nossos sistemas atuais

18. AJAX - Principios O navegador hospeda uma aplicação, e não conteúdo O servidor fornece dados, e não conteúdo A interação do utilizador com a aplicação pode ser flexível e contínua

19. AJAX – Visão Geral

20. AJAX - Bibliotecas Existem diversas bibliotecas para ajudar no uso de ajax, as mais conhecidas são: YUI - Yahoo! UI Library jQuery GWT – Google Dojo TODAS COM O MESMO PRINCIPIO DE REQUISIÇÃO DE DADOS NÃO DE PAGINA!

21. CSS Usado para dar forma a pagina, mudar a posição de objetos, mudar cores, tamanhos, fonte... Etc Como o css só mexe na parte visual, podemos deixar a cargo de um webdesigner Estas propriedades tambêm podem estar “embutidas” no objeto não podendo assim ser alteradas por um css. Ex: <button style =“width:100px” id=&quot;btnLogin&quot; type=&quot;button&quot;>Login</button> Não é uma boa pratica!

22. CSS Assim como javascript o css pode estar contido no html ou em um arquivo separado. Tambem é interpretado pelo browser O Ideal é sempre fazer parte de um arquivo separado, para o webdesigner ter total liberdade, alem de possibilitar a alteração do visual da pagina alterando apenas um arquivo

23. CSS - Exemplo No HTML: <link href=&quot;/apresentacao/estilo.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> <button id=&quot;btnLogin“ class= “classLoggin” type=&quot;button&quot;>Login</button> Estilo.css #btnLogin { width: 200px; position: relative; left: 100px; } Ou .classLoggin { width: 200px; position: relative; left: 100px; }

24. Ferramentas de Programação Ferramentas de Programação 2.1 Firebug 2.2 FirePHP 2.3 Zend Studio

25. Firebug É um plugin para o Firefox, que possibilita Editar, visualizar e DEBUGAR: CSS HTML Javascript Para instala-lo procure no google firebug, Depois ativá-lo para aquele site clicando na baratinha

26. FirePHP É um plugin para o Firefox, que junto com o Firebug permite que você envie mensagens para ele atraves de comandos em PHP, facilitando o debug de sistemas. Mais pra frente veremos ele funcionando

27. Zend Studio IDE baseada no eclipse, que permite trabalhar com php e traz diversas facilidades para se trabalhar com o framework desenvolvido pelo mesmo grupo (Zend Framework) Permite Debuggar Criar arquivos atraves de templates do próprio framework

28. O Desenvolvimento O Desenvolvimento 3.1 Orientação a Objetos 3.2 MVC 3.3 PHP 3.4 Zend Framework 3.5 Dojo

29. Orientação a Objetos “ Dividir para conquistar” Dividir uma tarefa complicada em varias simples Ex. Agencia de Carros Dividimos em: vende compra imprime boleto recebe o cartão de credito Etc.....

30. Orientação a Objetos Classe É a receita de um objeto Podemos ter varios objetos de uma determinada classe

31. Orientação a Objetos Objeto É o bolo feito com a receita. Trabalhamos com o objeto e não com a classe Ex. Classe homem Objeto Fabio Objeto Leandro ..... A classe não faz ação e não tem atributos, mas o objeto sim.. Ex: Homem não tem uma idade, não fala alguma coisa, Mas o fabio tem 24 anos, e fala alguma coisa.

32. Orientação a Objetos Herança Uma classe pode herdar outra classe Isto é, tudo que a classe pai faz ele faz tem, e faz algo mais. Ex. Classe pai: Mamiferos Classe filha Baleia

33. Orientação a Objetos Construtor Quando instanciamos um objeto, isto é criamos um objeto a partir de uma classe, ele chama determinado método da classe, este é o construtor: $fabio = new Homem(“24 anos”); Na classe: Class homem { Private idade ; Public function _construct(idade) { $this->idade = idade; } }

34. Orientação a Objetos Classe Abstrata Ela define um modelo ( template ) para uma funcionalidade e fornece uma implementação incompleta Ex.: Classe abstrata mamiferos Classe concreta baleia Objeto da classe baleia willy

35. Model View Controller (MVC) É um padrão de programação Consisti em dividir a aplicação em 3 partes: Model (Modelo) View (Visão) Controller (Controle)

36. Modelo (Model) É a camada responsável pelos dados, ela representa os dados em um banco de dados Reponsável por gravar os dados e por buscar os dados no banco de dados Exemplo: No arpan, teriamos uma classe da camada model chamada Pessifisi, outra chamada pessjuri etc...

37. View (Visão) É a camada responsável pela apresentação do sistema Nela você programa como os dados serão apresentados para o usuário Exemplo: O .dfm do delphi

38. Controller (Controle) É a camada responsável pelo processamento do sistema Ela pega os dados do model processa e apresenta na camada view

39. Model View Controller (MVC)

40. MVC no Delphi No delphi é possível programar usando o padrão MVC. O data modulo seria a camada model O .dfm seria a camada view E o .pas a camada controlller

41. PHP Linguagem interpretada, que é executada no servidor Em constante mudança Incorpora Orientação a Objetos a partir da versão 5 (recente)

42. PHP - Variaveis Não é necessário declarar o tipo. Podendo mudar o tipo de uma variavel em tempo de execução Ex: $apr = 10; $apr = “apresentacao”;

43. PHP – Métodos Mágicos No php existe a possibilidade de chamar metodos que não existem em um objeto. Ex: public function __construct( ): chamado sempre que o objeto é instanciado public function __call($metodo,$parametros ): chamado sempre que um metodo que não existe é chamado - Logo o php não vai dar mensagem de erro se você chamar um metodo que não existe.

44. Zend Framework Um framework que traz uma biblioteca de classes para ajudar na programação web com php Alem de trazer a biblioteca ele sugere um jeito de programar e organizar o código usando MVC

45. Zend Framework Organização dos diretórios Raiz Application Configs Layouts Modules Próxima pagina Library Public

46. Zend Framework Modules (Módulos) Cada módulo é como um sistema completo, mas com algum tipo de ligação entre os outros, como o arpan, panorama, panoptico.. etc Modules Nome_do_modulo Controllers Models Views

47. Zend Framework index.php Fica dentro da pasta public e manda o fluxo para o bootstrap Único arquivo que não é uma classe Vamos olhar o index.php

48. Zend Framework Bootstrap É uma classe (começa a parte OO) Recebe o fluxo do index.php Cria e prepara todas as variaveis, objetos e parametros que vão ser usados no sistema Vamos olhar o bootstrap

49. Zend Framework .htaccess Arquivo que fica no public que configura o apache para aquela aplicação Parametro importante: RewriteEngine On RewriteRule ^.*$ index.php [NC,L] Ele diz que todos as requisição a partir daquele ponto vão ser direcionadas para o index.php

50. Zend Framework Rewrite Isso significa se caso for digitado http://testes.completo.com.br/msb/cur/public/usuario/login - Esta requisição irá para o index.php e este encaminhará para o bootstrap Requisição Index.php Bootstrap

51. Controllers O framework, a partir do bootstrap vai encaminhar o fluxo da aplicação para um determinado arquivo que fica dentro da pasta controllers de algum modulo usando a seguinte logica http://testes.completo.com.br/msb/cur/public/MODULO/CONTROLLER Logo a requisição http://testes.completo.com.br/msb/cur/public/default/usuario/ O fluxo da aplicação vai para o modulo “default” arquivo UsuarioController

52. Action Dentro de uma classe controller podemos ter metodos publicos do tipo Action, eles são metodos que recebem uma requisição com o seguinte formato: http://testes.completo.com.br/msb/cur/public/modulo/controller/action

53. Exemplo class BemvindoController extends Zend_Controller_Action { public function olamundoAction() { $this->view->assign(&quot;texto&quot;,&quot;Ola Mundo&quot;) ; } } Para chegar nesse action deveriamos digitar http://endereco/public/modulo/bemvindo/olamundo

54. View Relembrando a estrutura de diretórios: Modules Nome_do_modulo Controllers Models Views Nome_do_controller Nome_do_action.phtml

55. View Depois de passar por um action o framework direciona para o seu respectivo view para saida dos dados

56. Dojo Biblioteca ajax integrada com zend framework Dividida em 3 sub-bibliotecas: Dojo Dijit Dojox

57. Dojo É responsável pelo ajax em si, com os metodos xhrPost e xhrGet que fazem a criação da thread e a requisição, alem de outros arquivos componentes basicos, como manipulção de data.

58. XhrPost e XhrGet Dojo.xhrPost({ handleAs: ‘json’, // Formato de retorno url: http://teste.com/seila, // Url da requisição postData: {“id”:10,”nome”:”fabio”} // parametros do post Ou form: “formteste”, // nome do formulario com os campos a enviar load: function (resposta,xmlArgs) { alert(resposta); } // função que vai chamar quando retornar a requisição

59. Dijit É responsável pelos formularios e seus campos bonitinhos e suas validações. Ex: dijit.form.DateTextBox dijit.form.ValidationTextBox Etc... - Obs. A Validação do validationTextBox pode ser feita com o uso de Expressão Regular

60. Dojox São componentes criados a partir de um projeto que ainda não esta 100% maduro e que um dia se transformarão em dojo ou dijit O mais importante para nós é o dojox.grid.DataGrid Obs. Na proxima versão do dojo (1.4) vão aparecer dois novos grids o dojox . grid . EnhancedGrid e o dojox . grid . TreeGrid

61. Dojo e Zend Framework A integração do dojo com o zend framework é simples, já que o framework gera todo o codigo javascript que inicializa o dojo e seus componentes. Restando ao programador apenas o trabalho de instanciar corretamente o componente do dojo já encapsulado pelo framework

62. Formulario Dojo class Swe_Form_NovoContrib extends Zend_Dojo_Form { public function render(Zend_View_Interface $view = null){ $this->getView()->headLink ()->appendStylesheet ($this->getView()->baseUrl ( &quot;/swe/styles/sty&quot;.strtolower(Pandora_Constantes::getConstante('clientesigla')).&quot;/inclcontr.css&quot; ) ); $this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl ( &quot;/swe/js/inclcontrib.js&quot; ) ); $this->getView()->headScript ()->prependFile ( $this->getView()->baseUrl(&quot;/default/js/pandora/validates.js&quot;) ); $this->getView()->dojo()->requireModule ( 'dojo.data.ItemFileReadStore' ) return parent::render($view) ; }

63. Formulario Dojo public function init() { $this->setMethod('post'); $this->setName('formContrib'); $campo = new Pandora_Dojo_Form_Element_ValidationTextBox( &quot;orgao&quot; ); $campo->setMsgInvalido(&quot;Digite o nome do seu orgão sem acentos ou ç&quot;) ->setPreDefDecorator(Pandora_Dojo_Form_Element_ValidationTextBox::NovaLinha) ->setLabel ( &quot;Orgão: &quot; ) ->setRequired ( false ) ->setMaxLength ( 60 ) ->setRegExp('[a-zA-Z0-9\s]{1,}') ->addFilters(array('StringTrim', 'StringToUpper','StripTags')) ->setAttrib ( &quot;uppercase&quot;, true ) ->setAttrib('promptMessage',&quot;Digite o nome do seu orgão sem acentos&quot; ) $campos[] = $campo; $this->addElements($campos); } }

64. Documentação http://framework.zend.com http://docs.dojocampus.org