Padrões de Projeto para Páginas Dinâmicas com PHP JavaScript e HTML - Capítulo 2

DESENVOLVIMENTO DE SOFTWARE PARA WEB CAPÍTULO 2 COMO APLICAR PADRÕES DE PROJETO PARA A CRIAÇÃO DE PÁGINAS DINÂMICAS Fernando Cortez Sica INICIAR Introdução Neste capítulo vamos compreender questões relativas à aplicação de padrões de projeto para que possamos criar páginas dinâmicas Para isso começamos com o questionamento mais comum a aplicação de padrões de projeto serve apenas para criarmos páginas dinâmicas Não padrões também servem para sistematizar a criação das páginas tornandoas mais fáceis de serem construídas para gastarmos menos tempo facilitar a abstração das demandas e recursos disponíveis e necessários além de diversas outras vantagens Por onde começar para aplicar os padrões Primeiro teremos que nos aprofundar nas questões de interatividade ou seja conhecermos como as páginas funcionam Por exemplo como os campos de um formulário interagem com o servidor A comunicação entre um formulário e o servidor é direta Para que possamos possibilitar a interação entre esses dois elementos teremos que executar scripts por exemplo escritos usando a linguagem PHP Então será necessário saber PHP Sim PHP junto com JavaScript e HTML constituem as mais importantes linguagens de programação e no caso do HTML de marcação para a codificação de páginas É possível dar a dinamicidade da página por meio da seleção de folhas CSS apropriadas Sim veremos como fazer isso neste capítulo assim como conversaremos sobre uma das formas de se garantir uma página dinâmica usando padrões de projeto Sendo assim caminharemos nesse capítulo por alguns conceitos para que possamos amarrálos e possibilitar a você construir páginas dinâmicas com formulários validados Vamos lá então Bons estudos 21 Validação de formulários utilizando JavaScript Uma página web não tem somente o objetivo de fornecer informações ao usuário Ela também deve possibilitar a interatividade na qual o usuário fornece informações que serão processadas no servidor Mas tem como sabermos que o usuário forneceu corretamente as informações Para que não sejam enviadas informações mal formatadas vamos implementar na página mecanismos de validação das informações Mas a validação das informações ocorre somente a nível de páginas Para responder essa pergunta vamos falar um pouco de padrões de projeto Os padrões de projeto são modelos que possuem o objetivo de direcionar a modelagem de um projeto ou neste caso de uma página Basicamente existe um padrão denominado como modelo das três camadas 3 tiers 3 níveis mas estudaremos isso mais adiante Figura 1 Modelo de 3camadas 3tier divisão entre os componentes de apresentação presentation lógica e regras de negócio businness logic e armazenamento de dados data Fonte CAMBIUCCI 2008 Na figura acima cada camada desempenha uma funcionalidade conforme a sumarização que detalhamos a seguir SOUZA 2016 Camada de apresentação camada 1 Regras de negócio camada 2 Camada de dados camada 3 Nesse capítulo abordaremos a validação realizada na camada 1 ou seja aplicação de regras por meio de scripts para que as informações fornecidas pelo usuário possam ser validadas a fim de serem enviadas à camada 2 Vamos então aprender mais sobre validação e a biblioteca JQuery 211 Validação Como mencionamos a pouco um sistema web para ser mais organizado tende a ser dividido em três camadas Pensando em validação vamos pensa em dois exemplos a seguir para que possamos diferenciar os tipos de validações associandoos à camada 1 ou à camada 2 Falando especificamente sobre validação na camada 1 teremos a necessidade de incorporar um script junto ao código HTML Esse script será ativado quando houver a manipulação do campo específico do formulário O mais comum de se realizar a validação nos formulários é utilizando a linguagem de script JavaScript Para tanto o script deverá estar delimitado pelas tags de marcação de início script e de fechamento de bloco script Mas como usar o script para validação No exemplo da figura a seguir vamos começar a compreender como finalmente validar um formulário Figura 2 Exemplo de codificação JavaScript para validação do formulário Na figura a parte superior contém o código e na parte inferior a janela aberta pela sua execução Fonte Elaborado pelo autor 2018 Na figura acima a cor vermelha linhas 4 a 22 destaca o script escrito em JavaScript Convém ressaltar que os scripts deverão ser colocados dentro da seção de cabeçalho da página delimitada pelas tags head e head Na linha 3 encontramos a marcação de início de script script tendo como parâmetro language informando ao navegador que será utilizada a linguagem JavaScript A finalização do bloco de script encontrase na linha 22 explicitado pela tag de marcação de encerramento script A partir da marcação de início de script o navegador interpretará de forma apropriada a codificação da linguagem do script sendo assim inclusive a notação de comentários deve seguir o formato imposto pela linguagem no exemplo da figura acima entre as linhas 04 e 22 usase como comentários e não como no HTML Ainda no exemplo contido na figura anterior temos o formulário sendo passado como parâmetro à função ValidaForm na figura marcado na com azul O formulário recebido pela função remete ao parâmetro this referenciado na linha 26 Toda a referência aos campos do formulário é usada como itens de estruturas de dados como por exemplo na linha 07 em que temos a utilização do item nome Tais campos devem seguir o parâmetro name pertencente à tag input no caso codificadas nas linhas 28 e 29 As cores diferenciadas permitem na figura diferenciar a utilização dos itens dentro do código do script Nas linhas 10 e 17 temos a função alert cujo objetivo é abrir uma caixa de diálogo para que o usuário seja avisado sobre a informação inconsistente Quando a informação é inconsistente ativase o campo correspondente à inconsistência para que o usuário possa entrar com a informação de forma correta linhas 11 e 18 ativação do método focus Finalmente nas linhas 12 e 19 temos o retorno negativo da função para que o evento de submissão seja cancelado ou seja as informações não sejam enviadas ao servidor VOCÊ QUER LER JavaScript é uma ferramenta bastante poderosa para a manipulação da identidade visual de uma página Além de seu poder uma outra vantagem consiste no fato de que a comunidade JavaScript é grande produzindo continuamente vários trechos de código que poderão ser aproveitados em suas páginas MOZILLA 2018 Para que você possa iniciar no JavaScript sugerimos que você acesse httpsdevelopermozillaorgptBRdocsAprenderGettingstartedwiththewebJavaScriptbasico httpsdevelopermozillaorgptBRdocsAprenderGettingstartedwiththewebJavaScriptbasico Segundo Miletto e Bertagnolli 2014 há a possibilidade de realizar a validação pelo uso de expressões regulares como usado no código da figura anterior para a validação do email Mas o que vem a ser uma expressão regular Definese como expressão regular a representação de um padrão textual EIS 2016 Ainda referenciando a figura anterior foi colocada na linha 06 um exemplo de uma expressão regular para a validação de email existem outras versões cobrindo uma gama maior de estruturação de emails Em JavaScript a expressão regular é iniciada por uma barra VOCÊ SABIA Expressões regulares fazem parte de um tema muito importante em relação à verificação de formulários Com o padrão representado pela expressão regular podese avaliar a corretude de sintaxe do valor inserido pelo usuário LINS 2007 Para ler mais sobre expressões regulares acesse o artigo httpswwwdevmediacombriniciandoexpressoesregulares6557 httpswwwdevmediacombriniciandoexpressoesregulares6557 Por fim a validação é feita pela utilização de máscaras As máscaras auxiliam no preenchimento do campo pois formata o campo em tempo de digitação Além disso esse tipo de validação tem condições de ser feita assim que cada caractere for digitado MILETTO BERTAGNOLLI 2014 Para ilustrar a utilização de máscara suponha a codificação ilustrada na figura a seguir html head titleMáscara CEPtitle script languageJavaScript function mascaracampo mascara 01 ifeventkeyCode48 eventkeyCode57 02 eventreturnValuefalse 03 alertDigite apenas números 04 return false 05 var tam campovaluelength 06 var saida mascarasubstringng10 07 var txt mascarasubstringtam 08 if txtsubstring01 saida 09 campovalue txtsubstring01 script body form action methodpost onSubmitreturn VerificaPreenchimentothis pCEPinput labelCEP typetext namecep 10 onkeypressmascarathis maxlength10p input typesubmit namesubmeter valueEnviar form body html Figura 3 Exemplo da utilização de máscara para facilitar o preenchimento dos campos pelo usuário Além da máscara no código é feita a verificação a cada tecla pressionada Fonte Elaborada pelo autor 2018 Em relação à figura acima temos dois aspectos distintos para a validação a verificação a cada tecla pressionada linhas 01 a 04 e o preenchimento automático do campo linhas 05 a 09 Esses dois aspectos são ativados no momento de pressionamento de uma tecla pelo evento onkeypress da tag input linha 10 Na linha 01 da figura anterior temos o eventkeyCode Esse evento corresponde à tecla pressionada Os valores comparados 48 e 57 correspondem aos valores ASCII American Standard Code for Information Interchange código padrão americano para intercâmbio de informações das teclas 0 e 9 respectivamente Na linha 02 foi inserido o valor false para o campo eventoreturnValue para limpar a tecla digitada a fim de que não seja carregada no campo sob digitação VOCÊ SABIA Você sabia que para facilitar a validação com expressões regulares o HTML5 adicionou à tag input o parâmetro pattern padrão Para saber mais detalhe acesse o artigo Validação de formulários com HTML5 FABENI 2014 httpstablelesscombrvalidacaodeformularioscomhtml5 httpstablelesscombrvalidacaodeformularioscomhtml5 Quando houver a necessidade de aproveitar o mesmo código em várias páginas podese criar um arquivo externo contendo o código do script MILETTO BERTAGNOLLI 2014 Nessa forma definese fora da seção do cabeçalho a referência ao arquivo externo podendo ser um arquivo local ou localizado em uma máquina remota A sintaxe consiste em script srcarquivojsscript No trecho de código acima como mencionado anteriormente o arquivojs pode ser o nome de um arquivo ou a URL que contém a função cujo nome foi passado pelo parâmetro onSubmit da tag form Existe uma maneira de facilitar a criação de scripts JavaScript Veremos a seguir uma das formas para fazer isso a utilização do framework JQuery 212 JQuery Como mencionado a pouco o JQuery consiste em um framework para JavaScript Dessa forma a criação de páginas que demandem a codificação JavaScript fica facilitada com a utilização do JQuery O JQuery tem como vantagens TEIXEIRA 2013 Exporta funcionalidades para serem usadas em conjunto com CSS Inicialmente para que possamos utilizar o JQuery em nosso projeto temos que incorporálo à nossa página HTML com a tag script inserida no cabeçalho entre os marcadores head e head script typetextjavascript srcjqueryjsscript De acordo com JQUERY a utilização do JQuery baseiase na referenciação dos elementos HTMLCSS que ocorre da seguinte forma elementoHTMLCSS Neste caso o elementoHTMLCSS consiste em um elemento HTML ou um seletor CSS seletor tipo TAG ID ou classe Mas como efetivamente utilizar o JQuery Vamos responder a essa pergunta com o exemplo inserido na figura a seguir Figura 4 Exemplo básico de utilização do framework JQuery Fonte TEIXEIRA 2013 Na figura acima foi utilizada uma referência ao próprio documento no qual uma janela de diálogo é aberta em seu momento de carga por intermédio do código documentready Ainda em relação a essa linha podemos salientar que a implementação feita no momento de carga da página é realizada inline ou seja logo à frente do item function Assim dessa forma a implementação de eventos associados aos elementos HTML ou CSS tornase mais fácil além de se ter inúmeras outras vantagens como por exemplo uma melhor manipulação do AJAX Asynchronous JavaScript and XML JavaScript e XML assíncronos Ajax consiste em uma plataforma que exposta diversas funcionalidades para a implementação de páginas 22 Associação de CSS e JavaScript ao HTML Em uma página HTML as configurações de aparência visual podem ser baseadas na utilização de folhas de estilo CSS Você já viu como manipular o CSS de forma estática ou seja até aqui a configuração do estilo era realizado no momento das definições da página ou dos elementos nela contidos Mas como podemos fazer algo mais dinâmico Respondendo positivamente à sua pergunta uma primeira coisa a ser pensada é a possibilidade de criar páginas responsivas Vamos relembrar páginas responsivas são aquelas capazes de se adaptarem às variações de dispositivos nos quais a página será exibida isso diante da diversidade de aparelhos que poderão ser utilizados tais como notebooks smartphones e tablets Porém para que possamos construir uma página responsiva devemos obter informações a respeito do ambiente como por exemplo o tipo do navegador e qual o tamanho de tela que o dispositivo apresenta Para saber tais informações a figura a seguir exemplifica um código que contempla essa questão html head titleInicia Páginatitle script languageJavaScript function IniciaPagina setIntervalMudaCor 1000 var texto Você está usandonavigatorappVersion usando uma tela de screenwidthxscreenheight alerttexto final IniciaPagina function MudaCor ifdocumentbodystylebackgroundColor white documentbodystylebackgroundColorblue final if else documentbodystylebackgroundColorwhite final else final MudaCor script head body onloadIniciaPagina pApenas um exemplo para o onload e setIntervalp body html Figura 5 Exemplo de código para detectar a configuração do sistema navegador e tamanho da tela do dispositivo e para mostrar o uso da função setInterval Fonte Elaborada pelo autor 2018 Na figura acima nos deparamos com dois trechos de código diferenciados pelas cores vermelha e azul O trecho em vermelho é responsável pela execução do código assim que a página é carregada A função JavaScript é passada como argumento ao parâmetro onload localizado no início da área delimitada pelas tags body e body Ainda em relação à codificação marcada na cor vermelha da figura acima temos na função intitulada como IniciaPágina a utilização do método setInterval para que a cada 1s 1000ms ocorra a troca da cor de fundo da página A função responsável pela troca da cor da página está representada no código em azul que será detalhada em breve Como parâmetros do setInterval temos a referência da função que será executada a cada segundo no caso a função MudaCor e o intervalo de tempo entre as execuções da referida função caso você queira que a temporização ocorra somente uma vez como por exemplo criar um evento de timeout você poderá utilizar o método setTimeout O outro objetivo do trecho vermelho consiste em coletar as informações do ambiente navegador e dimensões da tela No caso as informações coletadas pelos atributos navigatorappversion screenheight e screenwidth são posteriormente exibidas ao usuário pela abertura de uma caixa de diálogo feita pelo método alert Porém essas informações poderiam ser utilizadas para por exemplo o redimensionamento de figuras e o reposicionamento ou a reconfiguração de campos div Tal verificação dos atributos CSS é extremamente útil pois permite coletar valores que podem sofrer variações em função das diversas implementações dos navegadores nos vários ambientes nos quais a página poderá ser aberta Por sua vez o trecho marcado em azul referese à alteração de cor da página Para tanto é usado o campo backgroundColor pertinente ao estilo style do corpo da página Esse campo pode ser usado para se verificar a cor corrente quanto para setar a cor desejada Voltando à página responsiva falamos que uma das soluções é redimensionar ou reposicionar os elementos da página Na figura anterior já começamos a falar um pouco sobre isso quando as informações do ambiente foram detectadas e quando o estilo da página foi alterado interagindo o JavaScript com o CSS Vamos falar mais um pouco sobre essa interação do JavaScript com o CSS analisando a figura a seguir html head titleBuscatitle script language JavaScript function valida documentformulariobuscastyleborderColor FFFFFF documentformulariobuscastylebackgroundColor FFFFFF if documentformulariobuscavaluelength 3 alertDigite ao menos 3 letras documentformulariobuscastyleborderColor FF4500 documentformulariobuscastylebackgroundColor FFFFE0 documentformulariobuscafocus return false return true var entrou 0 var saiu 0 function Entrou entrou1 var texto Entrou entrou Saiu saiu documentgetElementByIdinfoinnerHTML texto documentgetElementByIddiv1stylebackground red function Saiu saiu1 var texto Entrou entrou Saiu saiu documentgetElementByIdinfoinnerHTML texto documentgetElementByIddiv1stylebackground white script head body form name formulario actionbuscaphp onSubmitreturn valida Procurar input type text namebusca required onmouseenterEntrou onmouseleaveSaiu br input typesubmit form div iddiv1 stylemaxmaxwidth 100vw width150px span idinfoEntradas e saídasspan div body html Figura 6 Exemplo de código para modificar atributos e conteúdo de elementos da página usando JavaScript associado a CSS Fonte Elaborada pelo autor 2018 Na figura acima temos o código para alteração de elementos da página usando uma interação entre JavaScript e CSS Observando sequencialmente o código a partir da entrada body temos o primeiro ponto a ser mencionado a referência da função valida ao parâmetro onSubmit Analisando o código associado à função encontramos linhas que visam alterar as cores de borda e de fundo da caixa de texto Para tanto foram selecionados campos pertencentes ao style do CSS dentro do código JavaScript Continuando na figura acima encontramos a associação das funções Entrou e Saiu aos eventos onmouseenter e onmouseleave da caixa de diálogo textual respectivamente Esses eventos permitem que funções sejam executadas em todos os momentos nos quais o mouse entra em uma certa região onmouseenter e nos momentos de saída da referida região onmouseleave Em ambas as funções Entrou e Saiu temos alterações tanto nas cores de fundo da caixa de diálogo quanto em seu conteúdo Como mencionado anteriormente alterações na cor de fundo podem ser alcançadas com a modificação de valor do campo stylebackground Por sua vez alterações de conteúdo podem ser realizadas por intermédio da alteração do conteúdo do campo innerHTML Convém mencionar que para realizar as alterações citadas utilizouse a associação do elemento sob alteração por intermédio do método getElementById Tal método facilita a codificação pois podese passar o identificador como parâmetro da função JavaScript Caso haja a necessidade de associar pela classe ou pelo nome podese usar respectivamente os métodos getElementByClassName e getElementByName De acordo com Walsh 2014 existem diversas maneiras de interação entre o JavaScript e o CSS Dentre as quais podemos destacar obtenção das propriedades de pseudoelementos adição e remoção de regras CSS e realizar a carga de arquivos CSS A obtenção de propriedades de pseudoelementos funciona de forma análoga à obtenção das propriedades de estilo style WALSH 2014 Por exemplo para coletar a cor do pseudoelemento elementbefore podemos usar a seguinte linha de código var corwindowgetComputedStyledocumentquerySelectorelement beforegetPropertyValuecolor Em relação à linha de código acima para coletar informações a respeito de outras propriedades basta trocar o nome passado como parâmetro à getPropertyValue por exemplo caso necessite acessar o conteúdo ficaria getPropertyValuecontent Agora para a adição e remoção de regras CSS podese usar os métodos sheetinsertRule ou sheetaddRule O momento para o uso de uma ou de outra está relacionado com a compatibilidade frente ao tipo e versão do navegador Para usar a inserção de regras é conveniente realizar um teste antes pela referência do próprio método como parâmetro ao teste Por exemplo ifobjinsertRuleobjinsertRuleseletordefdoestiloíndice Na linha acima temos obj referese à uma folha de estilo sheet na qual se deseja adicionar a regra seletor nome do novo seletor CSS defdoestilo especifica as definições para o novo estilo adicionado índice esse parâmetro é opcional e serve para indicar a posição da nova regra dentro da coleção de regras Você além de adicionar regras à uma folha de estilo sheet poderá também criar uma nova folha de estilo com o método documentcreateElementstyle e depois anexar a folha recémcriada ao cabeçalho invocando o método headappendChildfolharecémcriada Caso necessário você pode usar o processo de criação de uma nova folha de estilo para carregar um arquivo CSS proveniente de uma máquina remota Para tanto deve seguir os seguintes passos a b c d e Criar um elemento do tipo link var meulink documentcreateElementlink 23 Introdução ao Desenvolvimento Web com PHP Como já mencionamos uma página pode conter elementos que serão responsáveis por fazer a interação com o usuário frontend e elementos que estarão vinculados à máquina servidora backend Como já conversamos no frontend encontramos por exemplo a linguagem de marcação HTML configurações CSS e scripts JavaScript No backend encontramos linguagens de programação tais como o PHP VOCÊ QUER LER Além do código HTML a sua página poderá ser associada à código escrito em PHP Dessa forma PHP poderá estar presente não somente quando algo deverá ser processado e despachado ou carregado do servidor Sendo assim é importante conhecer a linguagem PHP Para saber mais recomendamos o artigo PH tutorial ANTÔNIO 2015 que aborda uma introdução para a programação em PHP httpswwwdevmediacombrphptutorial32540 httpswwwdevmediacombrphptutorial32540 Mas como incorporar o PHP às páginas Como desenvolver o código associado ao botão de submissão nos formulários O que podemos fazer com o PHP além do código para submissão Responderemos a essas questões a seguir quando conversaremos mais especificamente sobre a linguagem PHP no desenvolvimento das páginas Para começar um script PHP pode atuar nos dois sentidos recebendo informações da página para que sejam processadas e porventura acionar a máquina servidora ou gerar informações para que sejam enviadas à página MILETTO BERTAGNOLLI 2014 Resumidamente algumas funcionalidades básicas da utilização de PHP junto às páginas HTML são listadas a seguir Assista ao vídeo abaixo e aprenda mais sobre o tema A interação entre CSS e JavaScript é muito rica em recursos Apresentamos aqui uma pequena fatia do que você poderá fazer em sua página para deixála mais dinâmica e atrativa mas você poderá aplicar muito mais Até o momento conversamos sobre os aspectos visuais da página ou seja o frontend layout da página e formulários para a interação com o usuário Mas como enviar efetivamente as informações ao servidor Ao abordarmos o assunto relacionado aos formulários nos deparamos com os métodos get e post Como tratar tais métodos Como introduzir a linguagem PHP à sua página Esse o assunto que veremos a seguir processar informações dos formulários assim que o botão de submissão for acionado intercalar HTML com PHP para facilitar por exemplo a coleta de informações de configuração do ambiente executar o script PHP localmente para por exemplo enviar um email geração de códigos tanto HTML quanto JavaScript assim como gerar documentos figuras e demais elementos que poderão ser exibidos na página ou simplesmente armazenados na máquina servidora Porque optar pelo uso do PHP A opção de utilização do PHP é baseada nas seguintes características favoráveis MILETTO BERTAGNOLLI 2014 exporta suporte a uma vasta gama de gerenciadores de banco de dados dentre os quais podemos destacar dBase MySQL PostgresSQL IBM DB2 e Sybase suporte a LDAP IMAP SNMP POP3 SSH2 possibilidade de manipular sockets boa interatividade com o servidor APACHE Para que possamos ver por exemplo a manipulação de formulários com PHP transcrevemos na figura abaixo um código disponibilizado em Teixeira 2015 que implementa o envio de emails cujo destinatário e conteúdo são fornecidos pelo usuário por meio de caixas de texto Figura 7 Código PHP vinculado à um formulário HTML Em a temos a própria página de entrada cujo formulário evoca o script contido em d que usa códigos auxiliares b e d Fonte TEIXEIRA 2015 Na figura acima temos o código para manipular o envio de emails separado em quatro blocos assim identificados indexphp mailerrorphp e mailokphp mailsendphp Como mencionamos bloco mailsendphp identificado por d contém a codificação responsável pelo envio do email Para tanto temos a entrada do script identificada pela instrução if validaEmailde mensagem No trecho que contém essa linha de código temos as chamadas para as funções de validação validaEmavalidaEmail e o envio enviaEmail do email Caso a validação tenha ocorrido com sucesso a referência do script que contém a mensagem de sucesso mailokphp será atribuída à variável pagina para que possa ser aberta pela evocação do método headerlocation Esse método é evocado quando a variável referenciar à página de insucesso da validação mailerrorphp Neste código temos uma importante passagem denotada pela linha return issetPOSTvalor POSTvalor Essa linha pertence à função pegaValor que é evocada em dois momentos distintos as instanciações da variável de e da variável mensagem Na referida linha temos a presença da variável POST Mas na definição do formulário no arquivo indexphp não aparece a palavra post na instanciação do parâmetro método method do formulário form Sim essas duas ocorrências são interrelacionadas e veremos isso a seguir quando abordaremos a variável POST e a variável GET o outro valor que poderemos associar ao parâmetro method 231 Variáveis POST Já conversamos um pouco sobre a forma de como um formulário passa seus parâmetros para um script PHP responsável pelo processamento das informações fornecidas Na ocasião mencionamos que é possível usar duas formas métodos post e get Mas como o script coleta de forma correta todos os itens explicitados no formulário Para responder a isso vamos falar um pouco de variáveis superglobais Variáveis superglobais são aquelas que pertencem ao próprio PHP ou seja são variáveis nativas poderão ser acessadas dentro de qualquer escopo Como exemplos de variáveis superglobais temos POST GET e SERVER Mais especificamente falando sobre a variável POST de acordo com Arrigoni 2013 a coleta das informações contidas na variável POST é realizada da seguinte maneira por exemplo variável POSTnomedocampo No caso o item nomedocampo denota o valor passado ao parâmetro name da tag input presente no formulário Salientamos que nem todas as informações passadas à variável POST foram fornecidas pelo usuário Podese definir algumas variáveis ocultas hidden de forma que o usuário não poderá alterálas Por exemplo um campo interno do sistema tal como o número de cadastro de um usuário Na listagem presente na figura a seguir temos essa situação Figura 8 Definição e utilização de variáveis ocultas ao usuário No caso temos dois campos ocultos denominados como escondido e id Fonte ARRIGONI 2013 No caso da figura acima temos duas variáveis escondidas escondido e id Tais variáveis poderiam ser utilizadas normalmente entre os diversos outros tipos de entrada input A diferenciação é realizada simplesmente por meio de seus nomes atribuídos ao parâmetro name 232 Variáveis GET Como já mencionado em outra oportunidade o método post garante uma maior segurança pois os dados a serem transmitidos são encapsulados na mensagem enviada do cliente ao servidor Por outro lado o método get insere os dados a serem transmitidos na própria URL Porém a forma de coleta das informações do método get é exatamente igual à coleta pelo método post Sendo assim a linha do script PHP responsável pela extração das informações é exemplificada a seguir variável GETnomedocampo É extremamente aconselhável que sejam utilizadas as variáveis superglobais que mencionamos e não as variáveis declaradas nos próprios formulários Caso você for utilizar as variáveis declaradas no formulário na forma campo1 devese garantir que a diretiva registerglobals do PHP esteja setada para que as variáveis dos campos do formulário possam ser sincronizadas Uma solução para garantir que as variáveis não estejam vazias é utilizar a função importrequestvariables na introdução de seus códigos de script para garantir que suas variáveis não permaneçam com valores nulos vazios A seguir segue a sintaxe da função importrequestvariables ARRIGONI 2013 importrequestvariablesargumentos Onde argumentos podem ser P sincronizar variáveis relativas a POST G sincronizar variáveis relativas a GET C sincronizar variáveis relativas a COOKIE Sendo assim por exemplo se tivermos importrequestvariablespc estaríamos referenciando as variáveis post e cookies Segundo Miletto e Bertagnolli 2014 as variáveis passadas pelo formulário tanto no método post quanto do método get poderão ser acessadas também pela variável superglobal REQUEST A variável mantém tanto a lista POST quanto a lista GET 24 Padrão MVC com PHP Como conversamos um pouco no início deste capítulo para facilitar a modelagem do sistema desenvolvimento e integração com as bases de dados podese aplicar ferramentas e padrões computacionais ou modelos computacionais Um dos padrões existentes e aqui abordado consiste no 3camadas 3tier Um outro padrão amplamente utilizado é o MVC Model View Controller Modelo Visão Controlador Agora vamos entender mais detalhes e vantagens de se utilizar padrões de projeto para que depois possamos nos aprofundar no padrão MVC 241 Padrões de Projeto Para o desenvolvimento de projetos de software dentre os quais estão inclusos os projetos de páginas e sites é interessante aplicar um padrão de projeto design pattern Dentre as vantagens podemos destacar reutilização de código diminuindo o tempo e o esforço para o desenvolvimento de componentes de software melhor estruturação do sistema tornandoo mais legível facilitando a abstração e manutenção facilitar a portabilidade para outros ambientes computacionais pois com a adoção de padrões podese projetar o sistema em camadas funcionais separando aquelas que são dependentes daquelas independentes do ambiente no qual o sistema será implantado Na prática existem duas grandes famílias de padrões de projeto GRASP General Responsibility Assignment Software Patterns Padrões de Software de Atribuição Geral de Responsabilidade e GOF Gang of Four Bando dos quatro De acordo com Palmeira 2013 a característica básica do GRASP é a sua centralização em critérios de responsabilidade ou seja com o GRASP facilitase a atribuição de responsabilidade a classes e objetos que comporão o sistema computacional Por sua vez os padrões baseados em GOF possuem outros níveis de abstrações para que seja possível atuar no projeto dos sistemas computacionais Para possibilitar vários níveis de abstrações o padrão GOF é o preferido para a implementação de páginas Web Por esse motivo vamos focar nesta linha para que possamos entender como aplicála em conjunto com PHP Os padrões baseados em GOF podem ser agrupados em três grupos conforme a descrição a seguir PALMEIRA 2013 Padrões de criação Padrões estruturais Padrões comportamentais Esses padrões são responsáveis pela definição pelo processo de criação Constituem os padrões de criação Factory Method Abstract Factory Singleton Builder Prototype Para exemplificar esses padrões tomemos por base os exemplos encontrados em Mourão 2009 o Singleton e Factory Method O padrão Singleton é usado quando é necessário garantir que haja apenas um objeto de uma classe especifica instanciado Lembrando que a instanciação se faz durante a manipulação da página permitindose portanto a dinamicidade da página A figura a seguir ilustra o uso do padrão Singleton usando PHP Figura 9 Utilização do padrão Singleton usando PHP A garantia de existência de apenas uma instância é garantida pela definição do método construtor como privado private Fonte MOURÃO 2009 No caso da figura acima o método construtor construct foi definido como privado private para garantir que a instanciação de objetos seja realizada apenas pelo método getInstance Por sua vez no Factory Method ilustrado na figura a seguir implementase uma classe que tem a funcionalidade de criar objetos O tipo de objeto a ser criado é definido sob demanda ou seja mais uma funcionalidade útil para deixar as suas páginas dinâmicas Figura 10 Utilização do padrão Factory Method usando PHP A classe FactoryCar objetiva instanciar um objetivo cujo tipo é passado por parâmetro em função da demanda corrente Fonte MOURÃO 2009 Na figura acima temos a possibilidade de instanciar objetos de duas classes distintas que porém possuem a mesma interface ambas apresentam o método Ligar O tipo do objeto é passado como parâmetro desta forma a classe a ser instanciada é determinada em função da demanda corrente ou seja como o usuário está a manipular com a página em questão Para tanto evocase o método CriarCarro pertencente no caso do exemplo à classe FactoryCar Em projetos de páginas ou outros sistemas computacionais separar código em diversos objetos para atender tarefas extremamente específicas se torna uma tarefa árdua Para facilitar esse ponto de vista podese usar o padrão MVC Model View Controller Modelo Visão Controlador Veremos a seguir esse padrão 242 MVC O padrão MVC pelo fato de permitir diversos níveis de abstrações e organizações se tornou o principal padrão no desenvolvimento de código PHP Segundo GAMMA 2000 ele integra outros padrões pertencentes ao mundo GOF Dentre os quais podemos citar Factory Method Observer Composite e Strategy VOCÊ O CONHECE O início do padrão MVC é datado no ano de 1979 quando Trygve Reenskaug funcionário da empresa Xerox PARC apresentou o seu trabalho Applications Programming in Smalltalk80 How to use ModelViewController Programando Aplicações em Smalltalk80 Como usar o ModeloVisãoControlador Recomendamos o artigo Introdução ao Padrão MVC para entender o histórico do padrão MEDEIROS 2013 httpswwwdevmediacombrintroducaoaopadraomvc29308 httpswwwdevmediacombrintroducaoaopadraomvc29308 Como já mencionado o padrão MVC contempla três camadas Confira a seguir Camada de Modelo Camada de Visão Camada Controladora Cabe salientar que a utilização de padrões tal como o MVC acarreta em muitos benefícios à produção das páginas como a possibilidade de reutilização de código diminuindose assim o tempo de codificação melhor abstração do sistema de modo a permitir uma criação e uma manutenção mais eficientes e divisão das responsabilidades entre os colaboradores do desenvolvimento de forma mais clara CASO Atualmente muita importância se dá aos sistemas baseados em Web tanto para o gerenciamento e comunicação interna da empresa quanto para o relacionamento com o cliente Implementar páginas que se adequem bem à situação e à demanda é a meta de qualquer desenvolvedor A utilização de padrões tais como o MVC vem ao encontro dessa necessidade tendo ainda como consequência uma maior facilidade de manutenção e uma melhora na organização e manipulação das informações No trabalho Análise e desenvolvimento de um sistema CRM para concessionárias de veículos GROTH 2015 acompanhamos um estudo de caso para a implementação de um sistema para uma concessionária de veículos Para a implementação utilizouse o MVC Você pode ler a publicação completa em httpspainelpassofundoifsuledubruploadsarq20160331190 703476695280pdf httpspainelpassofundoifsuledubruploadsarq20160331190 703476695280pdf Nos dias de hoje a quantidade de informações que necessitam de uma manipulação eficiente rápida e objetiva faz com que tenhamos a necessidade de refinar com bastante cautela o sistema computacional sob desenvolvimento À essa necessidade aliase o fato de que por outro lado podemos contar com uma rede de cooperação e possibilidade de reaproveitamento de código que não tínhamos a poucos anos atrás Esses vieses vão ao encontro da necessidade de utilizarmos padrões de projeto para implementar nossos sistemas computacionais abrangendo também nossas páginas Tente sempre aplicar padrões tal como o MVC em seus projetos para diminuir os custos financeiros e temporais assim como permitir a produção mais adequada e eficaz às suas respectivas demandas Síntese Chegamos ao fim deste capítulo Tivemos a oportunidade de entender como deixar as páginas dinâmicas Para isso passamos por alguns conceitos relativos aos padrões de projeto utilização de linguagens como JavaScript e PHP para validar formulários atuar na apresentação visual de sua página assim como realizar o interfaceamento com o servidor Como foi abordado neste capítulo construção de páginas não é um trabalho trivial devese analisar muito bem o ambiente onde o sistema irá interagir assim como as suas regras de negócio Para facilitar aplicase padrões de projeto para que o seu trabalho fique menos oneroso e com mais qualidade Com os pontos pelos quais caminhamos neste capítulo esperamos que você continue incrementando as funcionalidades de suas páginas para tornálas mais acessíveis dinâmicas e independentes de tecnologias representadas pelos dispositivos que servirão para acessálas Neste capítulo você teve a oportunidade de ter contato com padrões de projeto de modo que você possa aplicálos no desenvolvimento de suas páginas analisar e empregar JavaScript para a validação de formulários esboçar e desenvolver soluções baseadas na utilização da linguagem PHP compor um sistemapáginas pela aplicação de MVC aplicar os conceitos para o desenvolvimento de páginas responsivas e acessíveis Clique para baixar o conteúdo deste tema PALMEIRA T V V Entendendo os conceitos dos padrões de projetos em Java Portal Devmedia publicado em 09072013 Disponível em httpswwwdevmediacombrentendendoosconceitosdospadroesdeprojetosemjava29083 httpswwwdevmediacombrentendendoosconceitosdospadroesdeprojetosemjava29083 Acesso em 26112018 SOUZA R Arquitetura em camadas uma definição simples Portal Linkedin publicado em 29062016 Disponível em httpswwwlinkedincompulsearquiteturaemcamadasumadefiniC3A7C3A3osimplesrobsonsouza httpswwwlinkedincompulsearquiteturaemcamadasumadefiniC3A7C3A3osimplesrobsonsouza Acesso em 26112018 TEIXEIRA J R JQuery Tutorial Portal Devmedia publicado em 23022013 Disponível em httpswwwdevmediacombrjquerytutorial27299 httpswwwdevmediacombrjquerytutorial27299 Acesso em 26112018 TEIXEIRA F Formulário de email e envio com PHP Portal Tableless publicado em 18082015 Disponível em httpstablelesscombrformulariodeemaileenviocomphp httpstablelesscombrformulariodeemaileenviocomphp Acesso em 26112018 WALSH D 5 formas de interaçao de CSS e JavaScript que você provavelmente não conhece Portal iMasters publicado em 03062014 Disponível em httpsimasterscombrcss5formasdeinteracaodecssejavascriptquevoceprovavelmentenaoconhece httpsimasterscombrcss5formasdeinteracaodecssejavascriptquevoceprovavelmentenaoconhece Acesso em 26112018 Bibliografia ANTÔNIO G PHP tutorial Portal Devmedia publicado em 30042015 Disponível em httpswwwdevmediacombrphptutorial32540 httpswwwdevmediacombrphptutorial32540 Acesso em 28102018 ARRIGONI R PHP forms manipulando dados de formulários Portal Devmedia publicado em 21102013 Disponível em httpswwwdevmediacombrphpformsmanipulandodadosdeformularios29392 httpswwwdevmediacombrphpformsmanipulandodadosdeformularios29392 Acesso em 28102018 CAMBIUCCI W Do Windows DNA para o mundo orientado a serviços cada caso é um caso Portal Microsoft Developer Network publicado em 12042008 Disponível em httpsblogsmsdnmicrosoftcomwcamb20080412dowindowsdnaparaomundoorientadoaservioscadacasoumcaso httpsblogsmsdnmicrosoftcomwcamb20080412dowindowsdnaparaomundoorientadoaservioscadacasoumcaso Acesso em 26112018 EIS D O básico sobre expressões regulares Portal Tableless publicado em 15062016 Disponível em httpstablelesscombrobasicosobreexpressoesregulares httpstablelesscombrobasicosobreexpressoesregulares Acesso em 26112018 FABENI R Validação de formulário com HTML5 Portal Tableless publicado em 01072014 Disponível em httpstablelesscombrvalidacaodeformularioscomhtml5 httpstablelesscombrvalidacaodeformularioscomhtml5 Acesso em 26112018 GAMMA E HELM R JOHNSON R VLISSIDES J Padrões de projeto soluções reutilizáveis de softwares orientado a objeto Porto Alegre Artmed Editora SA 2000 Recurso eletrônico Minha Biblioteca GROTH V J Análise e desenvolvimento de um sistema CRM para concessionárias de veículos Monografia tecnólogo em sistemas para Internet Instituto Federal SulRioGrandense campus de Passo Fundo Passo Fundo 2015 Disponível em httpspainelpassofundoifsuledubruploadsarq20160331190703476695280 pdf httpspainelpassofundoifsuledubruploadsarq20160331190703476695280pdf Acesso em 26112018 HXTUTORS 19 Estruturando o PHP criando um site responsivo do começo ao fim Canal HxTutors YouTube publicado em 19102016 JQUERY jQuery API Documentation Portal jQuery Disponível em httpapijquerycom httpapijquerycom Acesso em 26112018 LEMAY L COLBURN R TYLER D Aprenda a criar páginas Web com HTML e XHTML em 21 dias São Paulo Pearson Education do Brasil 2002 Recurso eletrônico Biblioteca Virtual Universitária LINS K Iniciando expressões regulares Portal Devmedia publicado em 14092007 Disponível em httpswwwdevmediacombriniciandoexpressoesregulares6557 httpswwwdevmediacombriniciandoexpressoesregulares6557 Acesso em 26112018 MEDEIROS H Introdução ao padrão MVC Portal Devmedia publicado em 10102013 Disponível em httpswwwdevmediacombrintroducaoaopadraomvc29308 httpswwwdevmediacombrintroducaoaopadraomvc29308 Acesso em 26112018 MILETTO E M BERTAGNOLLI S C Desenvolvimento de software II introdução ao desenvolvimento web com html css javascript e php Porto Alegre Bookman 2014 MOURÃO R C Quick tips padrões de projeto no PHP Portal Devmedia publicado em 30092009 Disponível em httpswwwdevmediacombrquicktipspadroesdeprojetonophp14452 httpswwwdevmediacombrquicktipspadroesdeprojetonophp14452 Acesso em 26112018 MOZILLA JavaScript básico Portal MDN webdocs publicado em 18092018 Disponível em httpsdevelopermozillaorgptBRdocsAprenderGettingstartedwiththewebJavaScriptbasico httpsdevelopermozillaorgptBRdocsAprenderGettingstartedwiththewebJavaScriptbasico Acesso em 26112018