Livro Ling Prog III - 462.Pg

Universidade do Sul de Santa Catarina
Linguagens de Programao III

Disciplina na modalidade a distncia
Palhoa UnisulVirtual 2011
Crditos
Universidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia Reitor Unisul Ailton Nazareno Soares Vice-Reitor Sebastio Salsio Heerdt Chefe de Gabinete da Reitoria Willian Mximo Pr-Reitora Acadmica Miriam de Ftima Bora Rosa Pr-Reitor de Administrao Fabian Martins de Castro Pr-Reitor de Ensino Mauri Luiz Heerdt Campus Universitrio de Tubaro Diretora Milene Pacheco Kindermann Campus Universitrio da Grande Florianpolis Diretor Hrcules Nunes de Arajo Campus Universitrio UnisulVirtual Diretora Jucimara Roesler Equipe UnisulVirtual Diretora Adjunta
Patrcia Alberton Secretaria Executiva e Cerimonial Jackson Schuelter Wiggers (Coord.) Marcelo Fraiberg Machado Tenille Catarina Vanessa Guimaraes Franceschi Assessoria de Assuntos Internacionais Murilo Matos Mendona Assessoria DAD - Disciplinas a Distncia Patrcia da Silva Meneghel (Coord.) Carlos Alberto Areias Franciele Arruda Rampelotti Luiz Fernando Meneghel Assessoria de Inovao e Qualidade da EaD Dnia Falco de Bittencourt (Coord.) Rafael Bavaresco Bongiolo Assessoria de Relao com Poder Pblico e Foras Armadas Adenir Siqueira Viana Assessoria de Tecnologia Osmar de Oliveira Braz Jnior (Coord.) Felipe Jacson de Freitas Jefferson Amorin Oliveira Jos Olmpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da Silva Priscila da Silva Rodrigo Battistotti Pimpo Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax : (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtual Secretaria de Ensino a Distncia Karine Augusta Zanoni Ednia Araujo Alberto Francine Cardoso da Silva Karla F. Wisniewski Desengrini Maria Eugnia Ferreira Celeghin Maria Lina Moratelli Prado Mayara de Oliveira Bastos Patrcia de Souza Amorim Poliana Morgana Simo Priscila Machado Relacionamento com o Mercado Eliza Bianchini Dallanhol Locks Walter Flix Cardoso Jnior
Coordenao dos Cursos

Assistente das Coordenaes Maria de Ftima Martins Auxiliares das coordenaes Fabiana Lange Patricio Tnia Regina Goularte Waltemann Coordenadores Graduao Adriana Santos Ramm Adriano Srgio da Cunha Alosio Jos Rodrigues Ana Luisa Mlbert Ana Paula R. Pacheco Artur Beck Neto Bernardino Jos da Silva Carmen Maria C. Pandini Catia Melissa S. Rodrigues Charles Cesconetto Diva Marlia Flemming Eduardo Aquino Hbler Eliza B. D. Locks Fabiano Ceretta Horcio Dutra Mello Itamar Pedro Bevilaqua Jairo Afonso Henkes Janana Baeta Neves Jardel Mendes Vieira Joel Irineu Lohn Jorge Alexandre N. Cardoso Jos Carlos N. Oliveira Jos Gabriel da Silva Jos Humberto D. Toledo Joseane Borges de Miranda Luciana Manfroi Luiz Guilherme B. Figueiredo Marciel Evangelista Catneo Maria Cristina Veit Maria da Graa Poyer Mauro Faccioni Filho Moacir Fogaa Nlio Herzmann Onei Tadeu Dutra Patrcia Fontanella Raulino Jac Brning Roberto Iunskovski Rodrigo Nunes Lunardelli Rogrio Santos da Costa Rosa Beatriz M. Pinheiro Rose Clr Beche Srgio Sell Tatiana Lee Marques Thiago Coelho Soares Valnei Campos Denardin Victor Henrique Moreira Ferreira Coordenadores Ps-Graduao Aloisio Rodrigues Anelise Leal Vieira Cubas Bernardino Jos da Silva Carmen Maria Cipriani Pandini Daniela Ernani Monteiro Will Giovani de Paula Karla Leonora Nunes Luiz Otvio Botelho Lento Thiago Coelho Soares Vera Regina N. Schuhmacher Gerncia Administrao Acadmica Angelita Maral Flores (Gerente) Fernanda Farias Gesto Documental Lamuni Souza (Coord.) Clair Maria Cardoso Janaina Stuart da Costa Josiane Leal Marlia Locks Fernandes Ricardo Mello Platt
Giane dos Passos
(Secretria de Ensino)
(Secretria Acadmica)
Alessandro Alves da Silva Andra Luci Mandira Cristina Mara Shauffert Djeime Sammer Bortolotti Douglas Silveira Fabiano Silva Michels Felipe Wronski Henrique Janaina Conceio Jean Martins Luana Borges da Silva Luana Tarsila Hellmann Maria Jos Rossetti Miguel Rodrigues da Silveira Junior Monique Tayse da Silva Patricia A. Pereira de Carvalho Patricia Nunes Martins Paulo Lisboa Cordeiro Rafaela Fusieger Rosngela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt
Gerncia de Produo
Arthur Emmanuel F. Silveira (Gerente) Francini Ferreira Dias Design Visual Pedro Paulo Alves Teixeira (Coord.) Adriana Ferreira dos Santos Alex Sandro Xavier Alice Demaria Silva Anne Cristyne Pereira Diogo Rafael da Silva Edison Rodrigo Valim Frederico Trilha Higor Ghisi Luciano Jordana Paula Schulka Nelson Rosa Patrcia Fragnani de Morais Multimdia Srgio Giron (Coord.) Cristiano Neri Gonalves Ribeiro Dandara Lemos Reynaldo Fernando Gustav Soares Lima Srgio Freitas Flores Portal Rafael Pessi (Coord.) Luiz Felipe Buchmann Figueiredo Comunicao Marcelo Barcelos Andreia Drewes e-OLA Carla Fabiana F. Raimundo (Coord.) Vinicius Ritta de Moura Produo Industrial Francisco Asp (Coord.) Ana Paula Pereira Marcelo Bittencourt
Gerncia de Desenho e Desenvolvimento de Materiais Didticos

Mrcia Loch (Gerente) Acessibilidade Vanessa de Andrade Manoel (Coord.) Bruna de Souza Rachadel Letcia Regiane Da Silva Tobal Avaliao da aprendizagem Lis Air Fogolari (coord.) Gabriella Arajo Souza Esteves Desenho Educacional Carmen Maria Cipriani Pandini
(Coord. Ps)
Gerncia Administrativa e Financeira

Renato Andr Luz (Gerente) Naiara Jeremias da Rocha Valmir Vencio Incio Financeiro Acadmico Marlene Schauffer Rafael Back Vilmar Isaurino Vidal
Carolina Hoeller da S. Boeing Silvana Souza da Cruz (Coord. Grad.) Ana Cludia Ta Carmelita Schulze Cristina Klipp de Oliveira Eloisa Machado Seemann Flvia Lumi Matuzawa Geovania Japiassu Martins Jaqueline Cardozo Polla Lygia Pereira Luiz Henrique Milani Queriquelli Marina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes Correa Ngila Cristina Hinckel Pmella Rocha Flores da Silva Rafael Arajo Saldanha Roberta de Ftima Martins Sabrina Paula Soares Scaranto Viviane Bastos
(Coord. Ext/DAD)
Gerncia de Ensino, Pesquisa e Extenso

Moacir Heerdt (Gerente) Aracelli Araldi Elaborao de Projeto e Reconhecimento de Curso Diane Dal Mago Vanderlei Brasil Extenso Maria Cristina Veit (Coord.) Pesquisa Daniela E. M. Will
(Coord. Nuvem)
Gerncia Servio de Ateno Integral ao Acadmico

James Marcel Silva Ribeiro (Gerente) Atendimento Maria Isabel Aragon (Coord.) Andiara Clara Ferreira Andr Luiz Portes Bruno Ataide Martins Holdrin Milet Brandao Jenniffer Camargo Maurcio dos Santos Augusto Maycon de Sousa Candido Sabrina Mari Kawano Gonalves Vanessa Trindade Orivaldo Carli da Silva Junior Estgio Jonatas Collao de Souza (Coord.) Juliana Cardoso da Silva Micheli Maria Lino de Medeiros Priscilla Geovana Pagani Prouni Tatiane Crestani Trentin (Coord.) Gisele Terezinha Cardoso Ferreira Scheila Cristina Martins Taize Muller
Gerncia de Logstica
(Gerente)
Jeferson Cassiano A. da Costa Andrei Rodrigues Logstica de Encontros Presenciais Graciele Marins Lindenmayr (Coord.) Ana Paula de Andrade Cristilaine Santana Medeiros Daiana Cristina Bortolotti Edesio Medeiros Martins Filho Fabiana Pereira Fernando Oliveira Santos Fernando Steimbach Marcelo Jair Ramos Logstica de Materiais Carlos Eduardo D. da Silva (Coord.) Abrao do Nascimento Germano Fylippy Margino dos Santos Guilherme Lentz Pablo Farela da Silveira Rubens Amorim
Mauro Faccioni Filho
(Coord. PUIP, PUIC, PIBIC)
Ps-Graduao Clarissa Carneiro Mussi (Coord.) Biblioteca Soraya Arruda Waltrick (Coord.) Paula Sanhudo da Silva Renan Felipe Cascaes Rodrigo Martins da Silva Capacitao e Assessoria ao Docente Enzo de Oliveira Moreira (Coord.) Adriana Silveira Alexandre Wagner da Rocha Cludia Behr Valente Elaine Cristiane Surian Juliana Cardoso Esmeraldino Simone Perroni da Silva Zigunovas Monitoria e Suporte Enzo de Oliveira Moreira (Coord.) Anderson da Silveira Anglica Cristina Gollo Bruno Augusto Zunino Claudia Noemi Nascimento Dbora Cristina Silveira
Gerncia de Marketing
Fabiano Ceretta (Gerente) Alex Fabiano Wehrle Mrcia Luz de Oliveira Sheyla Fabiana Batista Guerrer Victor Henrique M. Ferreira (frica)
Edson Orivaldo Lessa Junior

Livro didtico
Design instrucional Flavia Lumi Matuzawa
Palhoa UnisulVirtual 2011
Copyright UnisulVirtual 2011 Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.
Edio Livro Didtico

Professor Conteudista Edson Orivaldo Lessa Junior Design Instrucional Flavia Lumi Matuzawa Projeto Grfico e Capa Equipe UnisulVirtual Diagramao Anne Cristyne Pereira Daiana Ferreira Reviso Letra de Forma
741.6 L63
Lessa Junior, Edson Orivaldo Linguagens de programao III : livro didtico / Edson Orivaldo Lessa Junior ; design instrucional Flavia Lumi Matuzawa. Palhoa : UnisulVirtual, 2011. 462 p. : il. ; 28 cm.
Inclui bibliografia.
1. Desenho grfico. 2. Artes grficas. 3. Desenho comercial. I. Matuzawa, Flavia Lumi. II. Ttulo.
Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul
Sumrio
Apresentao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Palavras do professor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9 Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 UNIDADE 1 - Aspectos do desenvolvimento de aplicaes Web. . . . . . . . . 17 UNIDADE 2 - JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 UNIDADE 3 - PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 UNIDADE 4 - Sistemas Web com banco de dados (PHP + MYSQL). . . . . . 203 UNIDADE 5 - Extensible Markup Language (XML). . . . . . . . . . . . . . . . . . . . . . 291 UNIDADE 6 - Asynchronous Javascript and XML (AJAX). . . . . . . . . . . . . . . . 347 Para concluir o estudo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Referncias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 Sobre o professor conteudista. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Respostas e comentrios das atividades de autoavaliao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Biblioteca Virtual. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Apresentao
Este livro didtico corresponde disciplina Linguagens de Programao III. O material foi elaborado visando a uma aprendizagem autnoma e aborda contedos especialmente selecionados e relacionados sua rea de formao. Ao adotar uma linguagem didtica e dialgica, objetivamos facilitar seu estudo a distncia, proporcionando condies favorveis s mltiplas interaes e a um aprendizado contextualizado e eficaz. Lembre-se que sua caminhada, nesta disciplina, ser acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual, por isso a distncia fica caracterizada somente na modalidade de ensino que voc optou para sua formao, pois, na relao de aprendizagem, professores e instituio estaro sempre conectados com voc. Ento, sempre que sentir necessidade, entre em contato, pois voc tem disposio diversas ferramentas e canais de acesso, como: telefone, e-mail e o Espao Unisul Virtual de Aprendizagem, que o canal mais recomendado, pois tudo o que for enviado e recebido fica registrado para seu maior controle e sua comodidade. Nossa equipe tcnica e pedaggica ter o maior prazer em atend-lo, pois sua aprendizagem o nosso principal objetivo.
Bom estudo e sucesso! Equipe UnisulVirtual.
Palavras do professor
Caro desbravador do conhecimento, O mundo tecnolgico imenso permanecendo em constante expanso e evoluo. Por essa razo, o conhecimento e as tcnicas de desenvolvimento de software seguem essa linha. Linguagens nascem, envelhecem, algumas morrem outras reestruturam-se e com novas tcnicas so reutilizadas. Assim o aprendizado se torna constante, de tal forma que fora o desenvolvedor a sempre procurar atualizar-se. A tcnica permanece, mas a forma de escrita se altera. A linguagem de programao nada mais que um dialeto para que a mquina possa entender quais so as ordens que ns damos. Assim como na vida real, uma ma uma ma em qualquer lngua falada pelos homens. A programao no diferente, j que uma varivel sempre ser uma varivel. A forma de escrever o comando pode e deve se alterar, mas o conceito o mesmo. O desenvolvimento Web possui uma caracterstica maravilhosa que nos leva sempre a utilizar diversas tcnicas e linguagens para alcanar o melhor resultado. Nesta disciplina, voc ver a ponta do iceberg. Voc ser tentado a desbravar esse universo da programao Web. Desvendar seus segredos submersos ser algo inesquecvel e onde voc poder construir uma slida carreira em tecnologia. Bom estudo! Professor Edson O. Lessa Jr.
Plano de estudo
O plano de estudos visa a orient-lo no desenvolvimento da disciplina. Ele possui elementos que o ajudaro a conhecer o contexto da disciplina e a organizar o seu tempo de estudos. O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam, portanto, a construo de competncias se d sobre a articulao de metodologias e por meio das diversas formas de ao/mediao. So elementos desse processo:

O livro didtico. O Espao UnisulVirtual de Aprendizagem (EVA). As atividades de avaliao (a distncia, presenciais e de autoavaliao). O Sistema Tutorial.
Ementa
Pginas dinmicas. Conceitos de pginas do lado servidor e cliente. Recursos do Active Server Page (ASP). Comandos bsicos SQL. Introduo a PHP. Configurao de servidores Web. Enquetes, frum, mecanismo de busca. Filtro e totalizao de dados. Formulrios. Desenvolvimento de aplicaes. Implementao de sites dinmicos e seus respectivos testes, avaliao e manuteno.
Objetivos
Geral:
O desenvolvimento para Web requer uma ampla gama de conhecimentos em ferramentas necessrias para aperfeioar o resultado. Assim, podemos estudar tcnicas de desenvolvimento para Web utilizando diversas ferramentas para alcanar o melhor resultado possvel.
Especficos:
Identificar e caracterizar as aplicaes Web sob a viso do desenvolvedor e do usurio. Distinguir o uso de linguagens Client-side e Server-side. Compreender a dinmica do uso de banco de dados nas aplicaes Web. Identificar os recursos das linguagens de marcao para transporte e armazenamento de informaes. Integrar tecnologias a fim de montar uma soluo computacional voltada Web.
Carga Horria
A carga horria total da disciplina 120 horas/aula.
Contedo programtico/objetivos
Veja, a seguir, as unidades que compem o livro didtico desta disciplina e os seus respectivos objetivos. Estes se referem aos resultados que voc dever alcanar ao final de uma etapa de estudo. Os objetivos de cada unidade definem o conjunto de
12
conhecimentos que voc dever possuir para o desenvolvimento de habilidades e competncias necessrias sua formao. Unidades de estudo: 6
Unidade 1 - Aspectos do desenvolvimento de aplicaes Web 20h/a

A primeira unidade voc poder identificar as sutilizas que existem por traz de um desenvolvimento Web. Esta unidade contm as definies necessrias para identificar as principais caractersticas de cada forma de programar, assim como reconhecer as principais vantagens de se desenvolver em plataforma Web.
Unidade 2 - Javascript 20h/a

O JavaScript hoje se torna essencial para o desenvolvimento Web. Esta linguagem tem como o seu principal uso em validaes rpidas e mscaras de campos. A linguagem JavaScript pode ainda ser usada como um recurso de melhoramento visual. Assim voc poder ser capaz de iniciar sua utilizao no universo extenso desta linguagem.
Unidade 3 - PHP 20h/a

Nesta unidade voc conhecer o fantstico mundo do PHP. Conhecer como utiliz-la de forma a aumentar a sua aplicabilidade. Saber algumas bibliotecas ou APIs que possibilitam uma programao mais eficiente.
Unidade 4 - Sistemas Web com banco de dados (PHP + MYSQL) 20h/a

Nesta unidade voc aprender como trabalhar em conjunto com a linguagem e um banco de dados. Desenvolver uma aplicao em que utilizar vrios nveis do desenvolvimento Web. Perceber como a escolha correta das linguagens a serem desenvolvidas com
13
o banco de dados faz diferena na eficincia e na velocidade de desenvolvimento de uma aplicao.
Unidade 5 - Extensible Markup Language (XML) 20h/a

No XML voc ser capaz de identificar as caractersticas que levaram esta linguagem a se tornar base de diversas tecnologias. Voc conhecer as principais aplicabilidades e os detalhes mais relevantes do Extensible Markup Language (XML).
Unidade 6 - Asynchronous Javascript and XML (AJAX) 20h/a

Na Unidade 6 voc condensar todas as unidades anteriores em uma nica soluo. Identificar como o uso em conjunto de diversas linguagens podem resultar em um ganho de performance. Voc compreender o conceito do AJAX, seus benefcios e suas limitaes. Assim, identificar quando ela mais aconselhvel em seu uso.
14
Agenda de atividades/ Cronograma
Verifique com ateno o EVA, organize-se para acessar periodicamente a sala da disciplina. O sucesso nos seus estudos depende da priorizao do tempo para a leitura, da realizao de anlises e snteses do contedo e da interao com os seus colegas e tutor. No perca os prazos das atividades. Registre no espao a seguir as datas com base no cronograma da disciplina disponibilizado no EVA. Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da disciplina.
Atividades obrigatrias
Demais atividades (registro pessoal)
15
unidade 1
Aspectos do desenvolvimento de aplicaes Web

Objetivos de aprendizagem
Ao final do estudo desta unidade, importante que voc:
Identifique as principais caractersticas do desenvolvimento Web. Conhea os mtodos de comunicao entre as linguagens. Conhea as principais tecnologias disponveis.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 Seo 5 O ambiente Conceitos envolvidos no desenvolvimento de aplicaes Web Caractersticas Integrao de linguagens Tecnologias
Para incio de estudo

Ao navegar um pouco na Web, voc pode identificar as vantagens do desenvolvimento nesta tecnologia e perceber como as atualizaes dos sistemas so rpidas e amplamente difundidas. Devido a essa velocidade, de se esperar uma reduo significativa de custos das verses comparada com as aplicaes desktops. Alm da reduo de custo, a Web no exige de um usurio uma determinada configurao de mquina para que possa us-la. Uma aplicao Web possui compatibilidade comprovada com diversos sistemas operacionais disponveis no mercado visto que a aplicao no executada pelo seu equipamento, mas interpretada por um navegador. Essa facilidade a difere das aplicaes desktops, pois estas necessitam de verses diferentes para cada sistema operacional. Voc ver como funciona a interpretao das regras de negcio e das validaes dos campos e estudar os nveis de comunicao entre os mtodos. Esses conceitos so extremamente importantes, mas vale lembrar que as linguagem desktop no so o alvo do presente estudo. Esses conceitos so de grande auxlio para sempre buscar a melhor soluo para cada tipo de necessidade dos clientes. Assim voc ter um conhecimento mais refinado para poder optar em determinada linguagem e ou que tipo de tecnologia de desenvolvimento (Web ou desktop) ter um melhor resultado. Embora no seja o alvo desta unidade, conhecer as linguagens desktop de grande auxilio para a busca da melhor soluo, de acordo com a demanda dos clientes. Conhecer linguagens lhe dar mais subsdios para optar pela tecnologia de desenvolvimento (web ou desktop) mais adequada para proporcionar o melhor resultado para a situao em questo.
18
Seo 1 O ambiente
Todo o desenvolvimento Web realizado no ambiente da internet, inclusive as aplicaes que so construdas para serem utilizadas em redes privadas. Todas so regidas sobre as vantagens e desvantagens que a internet proporciona. A internet, nada mais que um grande conjunto de redes de computadores interligadas pelo mundo inteiro, basicamente, um conjunto de documentos. Ela foi criada por um grupo de cientistas do CERN (European Laboratory for Particle Physics), na Sua, com o intuito de facilitar a comunicao interna e externa. Inicialmente, essa rede integrada continha dados os quais cada equipamento deveria interpret-los individualmente. Ou seja, no existia uma ferramenta que transformasse os dados em informao padronizada. O primeiro a realizar essa tarefa foi o Mosaic (primeiro navegador de grande aceitao no mercado). O objetivo inicial era centralizar, em uma nica ferramenta, as vrias tarefas necessrias para se obter as informaes disponveis pela internet de forma integrada e visando conectividade independentemente do tipo de mquina a ser utilizada. Para manter essa multicompatibilidade, foi utilizado um conjunto de protocolos e servios em comum, permitindo assim que os usurios a ela conectados pudessem usufruir os servios de informao de alcance mundial. O HTML (Hyper Text Markup Language) a linguagem padro da internet interpretada pelos browsers. Ela igualmente foi criada pelo CERN tendo como seu principal responsvel Tim BernersLee. A motivao de Tim foi encontrar mais praticidade na hora de escrever suas pginas. O HTML proporcionou algumas vantagens, entre elas:
Padronizao: as pginas estritas em HTML tem a aparncia semelhante nas diversas plataformas de trabalho.
Unidade 1
19
Diversidade: o HTML permite uma singularidade a diversos elementos do documento, ou seja, ele permite que alguns elementos possam ser modificados para torn-los nicos. Por exemplo, padro da letra, cores etc. Compactao: as pginas escritas em HTML possuem um tamanho reduzido, a fim de economizar tempo de transmisso por meio da internet.
O HTML construdo para que o documento seja um arquivo texto com marcaes que controlam a forma de exibio do documento. Este documento, pgina ou arquivo pode ser construdo utilizando um framework elaborado, um framework simples ou ainda simplesmente um editor de texto. Uma das principais vantagens dessa linguagem que, se um browser no entender determinado marcador, ele simplesmente o ignora, evitando qualquer tipo de mensagem de erro (em tempo de execuo) e que pouco afeta o resto do documento. Essa nota tcnica foi elaborada com base na verso 3.0 do HTML. Logo que a produo desta foi concluda, surgiu o HTML 4.0. O HTML faz metade do trabalho. Basicamente organiza os dados em um formato padro. A outra metade realizada pelos browsers, como sucessores do Mosaic. Os browsers interpretam esses dados organizados pelo HTML. Durante a histria, j foi utilizado diversos browsers. Alguns permaneceram e evoluram. Outros no conseguiram se adequar s novas tendncias do mercado, como foi o caso do Netscape. Esse browser foi largamente utilizado na dcada de 1990, porm no consegui manter sua preferncia na dcada seguinte. Nesta poca, existiam muitas diferenas entre a interpretao do HTML. Tanto que muitas vezes existiam pginas em que o usurio deveria informar qual browser estava utilizando. Desta forma, o usurio era encaminhado a seu conjunto de pginas devidamente formatado. Atualmente, esse tipo de problema mais restrito. Desta forma, a escolha do browser acaba muitas vezes por motivos visuais. Vejamos alguns browsers.
20
Figura 1.1 - Internet Explorer desenvolvido pela Microsoft. Fonte: Elaborada pelo autor (2010).
Figura 1.2 - Chrome desenvolvido pela Google. Fonte: Elaborada pelo autor (2010).
Figura 1.3 - Safari desenvolvido pela Apple. Fonte: Elaborada pelo autor (2010).
Unidade 1
21
Figura 1.4 - Firefox desenvolvido pela Mozilla. Fonte: Elaborada pelo autor (2010).
Voc pode perceber que praticamente no h diferena na navegao entre os browsers. Porm, eventualmente, possvel que voc se depare com diferenas muito mais perceptveis. O HTML est presente em todas as pginas da internet, inclusive nas pginas que possuem sons, imagens, vdeos ou animaes. Essas interaes multimdia so exibidas sobre o HTML. A sua estrutura se baseia em tags. O documento sempre inicializado pela tag <html> e logo aps vem o cabealho
<head>, o ttulo <title> e o corpo <body>.
Lembre-se que o HTML no case-sensitive, ou seja, ele no distingue <html>, <HTML>, <HtMl>, <HTml>. Todas as tags devem ser sempre fechadas, pois desta forma mantm o padro e no h problemas com outras linguagens que podemos vir a usar. As tags de fechamento possuem uma barra /. Alm dos fechamentos, devemos sempre manter a hierarquia do bloco, isto , as tags sejam sempre fechadas do ltimo para o primeiro, deste modo: <head> <title> documento 1 </title> </head>.
22
Vejamos um exemplo de HTML:

<html> <head> <title>Primeiro teste</title> </head> <body> Esse um teste </body> </html>
Figura 1.5 - Exemplo de pgina html. Fonte: Elaborada pelo autor (2010).
As principais tags utilizadas no desenvolvimento Web so as que compem o formulrio HTML ( form). Eventualmente, para contemplarmos uma soluo mais completa, podemos utilizar de outras tags para nos auxiliar.
Unidade 1
23
Seo 2 Desenvolvimento de aplicaes Web

Um dos principais pontos a se destacar quando falamos em desenvolver aplicao para Web que ela possui algumas vantagens que superam desenvolvimento de aplicao desktop. Vamos apresentar alguns conceitos envolvidos no desenvolvimento de aplicaes Web. O desenvolvimento de software para a Web mantm um princpio bsico: mantenha-o simples; mantenha-o pequeno. Na Conferncia de Tecnologia Emergente do ano de 2006 houve vrios temas em discusso. Rael Dornfest, ex-chefe executivo da OReilly, explanou: grandes negcios sero criados oferecendo menos a voc. Perceba como essa afirmao se torna importante quando pensamos na economia da ateno. Isso quer dizer que no podemos ter mais informaes que o tempo que podemos ler. Uma das vantagens no trabalho do desenvolvedor Web diz respeito s operaes de manuteno: ele trabalha com uma aplicao centralizada. Ou seja, a aplicao permanece em um nico equipamento onde so acessadas pelos clientes. Desta forma, as operaes de manuteno da aplicao decorrem de forma muito dinmica, onde qualquer alterao na aplicao se reflete instantaneamente a todos os usurios conectados. Alm disso, as operaes de backup e integrao com outras aplicaes so mais bem gerenciadas. A centralizao permite que as estaes desktops utilizem menos recursos. Essa diminuio favorece na diminuio de custos de um projeto de implementao. Porm, o desenvolvimento Web requer uma metodologia de desenvolvimento mais organizada. Quando se fala de centralizao, no significa que seja uma obrigatoriedade que exista apenas um servidor. As tecnologias atuais permitem conter equipamentos em diversas camadas. Por exemplo, podemos ter um equipamento com apenas o servidor Web; um segundo equipamento com uma linguagem de interpretao como o ASP; e, por ltimo, um equipamento apenas com o banco de dados. A forma de organizar a infraestrutura depende da estratgia adotada no projeto de desenvolvimento. Muitas variveis devem
24
ser levadas em consideraes, como: nmero de acessos, carga de processamento, volume de consultas, entre outras. Apesar de esta anlise no ser o foco de estudo desta disciplina, torna-se importante voc ter conscincia do processo como um todo. Quanto aos recursos necessrios no desktop para que uma aplicao Web seja executada, so bem resumidos, uma vez que basta ter acesso a um servidor Web por meio de um browser para que a aplicao mais bsica passe a funcionar. As aplicaes mais robustas em grandes empresas tambm no perdem muito essa caracterstica. O servidor Web dever ser mais bem equipado, porm, para algum passar a utilizar a aplicao, basta um browser e uma conexo com o servidor para iniciar o seu trabalho. Os recursos adicionais que por ventura possam ser necessrios, normalmente se tratam de complementos para o browser executar uma animao, um vdeo ou outra forma de mdia. Esses tipos de complementos so nomeados como plug-ins. As aplicaes Web necessitam de uma conexo com um servidor Web. Esse servidor pode estar instalado no prprio desktop do usurio ou em outro equipamento em qualquer distncia. Essa conexo com o servidor pode ocorrer de duas formas: pela intranet ou pela extranet. A intranet se caracteriza pela rede LAN (rede local) onde o ambiente muito bem conhecido e controlado. A extranet a internet propriamente dita, assim a aplicao est aberta a qualquer navegador que tenha acesso a ela.
Lembre-se que, com uma aplicao centralizada, o processamento e o volume de dados trafegam em um nico equipamento. Essa preocupao deve estar presente no incio do projeto de desenvolvimento do software.
LAN (Local Area Network): sigla para representar uma rede local, a rede de computadores qual sua mquina est conectada.
Uma grande facilidade para o uso das aplicaes Web que a plataforma j se encontra pronta. Isto , a Web utiliza de todos os equipamentos de redes j existentes, uma vez que tudo tratado pelo protocolo TCP/IP. Assim, os servios de requisies utilizam o seguinte procedimento:
Protocolos TCP/IP um conjunto de protocolos de comunicao entre computadores em rede.
Unidade 1
25
Browser (Usurio)
Servidor Web
Servidor Web
Browser (Usurio)
Figura 1.6 - Diagrama de interao browser x servidor. Fonte: Elaborada pelo autor (2010).
Esse diagrama representa de forma bsica como a h a interao entre browser e servidor. Utilizam a rede (internet ou intranet) como plataforma de comunicao. Uma outra forma de exemplificar a dinmica das aplicaes Web utilizar um diagrama com o ASP sendo uma linguagem de interpretao de cdigo. Assim como foi utilizado o ASP, poderia ser qualquer outra linguagem, como PHP, JSP, entre outras.
Figura 1.7 - Diagrama em que o ASP uma linguagem de interpretao de cdigo. Fonte: <http://blog.computero.com.br/tutoriais-asp-01-o-que-e-asp/>. Acesso em 06 jan. 2011.
26
Perceba que, mesmo utilizando uma linguagem para interpretar uma programao existente, a dinmica da aplicao Web no foi alterada. Logicamente esse desenvolvimento no nasceu do dia para a noite. As linguagens vm evoluindo para que os desenvolvedores possam ter um esforo menor durante seus desenvolvimentos. O esquema a seguir representa a evoluo das principais linguagens Web.
Figura 1.8 - Diagrama de evoluo de linguagens de programao. Fonte: <www.deccanpro.com/deccanpro_web_development.php>. Acesso em 06 jan. 2011.
A possibilidade de uso das linguagens interpretadas no servidor Web tornou-se possvel criar pginas em que o resultado depende de um tipo de requisio. Ou seja, uma consulta a um banco de dados ou outra forma de armazenamento de dados pode retornar informaes diferentes dependendo dos parmentros para uma mesma pgina. Assim, as pginas que outrora eram estticas passam a ser dinmicas e um universo novo se abre para os desenvolvedores.
Unidade 1
27
A definio da Aplicao Web est entrelaado com a definio de pginas dinmicas. Assim, o principal fluxo de informao que trafega nas aplicaes Web o envio (insero ou manipulao de dados) e o resgate (consulta) de informaes de um servidor.
Vale ressaltar que o browser possui um tempo interno para aguardar uma resposta da requisio realizada. Em outras palavras: o browser envia alguns dados para o servidor. Este, por sua vez, realiza uma consulta sobre esses dados. Caso essa consulta seja demasiadamente lenta, o browser entender que a conexo com o servidor no existe mais e retornar uma mensagem de erro. Portanto, qualquer requisio nas aplicaes Web deve conter um retorno rpido, de forma a evitar esse problema. Alm do retorno das consultas que deve ser levado em considerao, o envio das informaes tambm importante.
Imagine voc enviar um arquivo enorme para o servidor. Se um arquivo muito grande (400 Mb, por exemplo) for enviado para o servidor e se a aplicao no estiver preparada para suportar esse trfego, muito provavelmente toda a aplicao ir parar enquanto processa a sua requisio.
Essas consideraes dependem do link com o servidor. O link, neste caso, refere-se velocidade de uma conexo com o servidor. Quanto maior a velocidade, maior o volume de dados possveis de trafegar na rede. Outro aspecto que importante ser levado em considerao no projeto de uma aplicao Web o cuidado com a usabilidade. Lembre-se sempre que o custo para diversos browsers interpretarem as pginas Web de forma semelhante a simplicidade do cdigo HTML. Esses elementos grficos no possuem qualidades semelhantes aos elementos de uma aplicao desktop. O crescente uso da Web como plataforma de sistemas acaba por forar a utilizao de mecanismos que melhorem o visual. Tornando-os mais atrativos para os usurios.
28
Atualmente existem recursos para minimizar esse problema, como CSS, JavaScript, entre outros. Mas aqui est se referenciando aos elementos bsicos do HTML como os elementos de formulrio. O uso das folhas de estilos (CSS) criam um visual mais amigvel e harmnico. O JavaScript, alm de poder realizar algumas tarefas do CSS, auxilia a interatividade com o usurio como mscaras e validaes de campos. Assim como qualquer aplicao desktop, o desenvolvimento de aplicaes para Web requer um projeto conciso em que possa abordar as diferentes tecnologias que sero utilizadas. Diferente do desktop, onde uma linguagem adotada para o projeto, a aplicao para Web requer, hoje, o uso de vrias linguagens e tecnologias para atingir um melhor resultado. Por isso, o uso de frameworks auxilia e muito o desenvolvimento em equipes, uma vez que essas ferramentas procuram manter um padro de desenvolvimento uniforme.
Ateno! Todo o projeto de software, seja de pequeno ou grande porte, requer uma fase de anlise rigorosa. Nesta etapa comea-se a identificar possveis problemas e riscos ao desenvolvimento. Ainda nesta fase, possvel direcionar e identificar as tecnologias utilizadas no desenvolvimento. Execute sempre aps o planejamento baseado na anlise do projeto. Aprenda o problema, a soluo j existe!
Apesar de se tratar de um desenvolvimento de software, as aplicaes Web possuem algumas caractersticas que a diferencia. a) ubiquidade; b) infraestrutura tecnolgica imprevisvel; c) alta volatilidade dos requisitos de negcio; d) equipes multidisciplinares.
Unidade 1
29
a) Ubiquidade
A ubiquidade nada mais que a caracterstica de acessar a aplicao de diversos locais para diversos dispositivos. Portanto, para ter essa caracterstica comprovada, a aplicao Web necessita estar disponvel rede. Entenda que, quando mencionado o acesso rede, trata-se de rede domstica, corporativa ou mundial. Hoje, com uso de dispositivos menores para acessar a rede, possvel criar vises especficas para um determinado tipo de dispositivo sem trocar a aplicao.
b) Infraestrutura tecnolgica imprevisvel

O que voc como desenvolvedor deve sempre manter em mente que qualquer pessoa conectada rede pode ter acesso a sua aplicao. No estamos tratando aqui os fatores de segurana, mas sim o nmero de acesso que sua aplicao pode ter. Assim, um usurio que deseja acessar sua aplicao pode conter uma infinidade de configuraes diferentes em seu equipamento. Podendo assim variar o sistema operacional, a memria, a velocidade de conexo, o tamanho de tela, a resoluo, entre outros. Todas essas variveis podem afetar diretamente a forma que o usurio poder visualizar a sua aplicao. Os browsers ainda permitem que os usurios alterem suas configuraes livremente desabilitando funcionalidades importantes que sua aplicao pode estar utilizando. As melhores aplicaes Web so aquelas que preveem o maior nmero de variaes de equipamentos possveis que os usurios possam ter. Um exemplo tpico que os usurios podem desabilitar o uso da linguagem JavaScript. Essa linguagem, como veremos, largamente utilizada em validaes de formulrios. Caso sua aplicao apenas valide o formulrio via o JavaScript, pode sofrer por usurios mal intencionados que esteja acessando sua aplicao. Outro exemplo seria a dimenso que voc pode estar utilizando. Ao dimensionar sua pgina Web de tal forma que alguns
30
usurios tenham de mover a barra de rolagem em diversas direes, leva a uma insatisfao por parte dos usurios. Sem falar que podem perder informaes importantes que no estejam sendo mostradas adequadamente.
c) Alta volatilidade dos requisitos de negcio

Lembre-se que em aplicaes Web a regra de negcio fica no servidor Web. Essa caracterstica permite que uma alterao se replique para todos os clientes instantaneamente. Essa ao faz com que seja comum nessas aplicaes um ndice maior na alterao das regras de negcio se comparadas com aplicaes desktops. Aplicaes para Web no possuem em sua maioria um controle de releases. Contudo, existem algumas aplicaes em que esse controle feito e normalmente so aplicaes Web para uso genrico. Nesses casos, voc adquire uma cpia, instala e passa a usar. Com a evoluo tecnolgica ou com a ocorrncia de relatos de bugs, uma nova release lanada.
d) Equipes multidisciplinares
Os projetos Web so concebidos, normalmente, por profissionais com conhecimentos abrangentes. Um projeto pequeno desenvolvido por um nico profissional acaba por forar este a aprimorar seus conhecimentos em design, banco de dados, linguagem server-side e em linguagem client-side. Assim, as aplicaes para Web formam profissionais com vises abrangentes sobre a soluo em que est se pretendendo alcanar.
Ateno! Essa ltima caracterstica pode se tornar um ponto fraco, pois muitos profissionais acabam por manter o foco em uma generalizao tamanha que lhes acaba faltando, algumas vezes, conhecimentos mais aprimorados sobre uma tecnologia.
Voc ver adiante mais detalhes sobre a linguagem server-side e client-side.
Unidade 1
31
J vimos at o momento diversas informaes que mostram como o desenvolvimento para a Web benfico, mas necessita de alguns cuidados. Chegou a hora de desmitificar uma aplicao Web e um website. A aplicao Web formada por websites que possibilitam aos usurios interagirem com a aplicao. Toda a aplicao para Web composta por websites que propiciam o servio aos usurios. A nfase tambm diferente: os websites tm em seu ponto forte os aspectos plsticos do sistema (apresentao, movimento, navegao, informao). As aplicaes para Web, por sua vez, preocupam-se com os aspectos funcionais da soluo (velocidade de resposta, funcionalidade, interatividade, aplicabilidade). Todo esse conjunto facilitado pelo ambiente que a aplicao est sendo desenvolvida, a internet. O ambiente da internet possui diversas aplicabilidades e finalidades que podem ser atendidas por uma aplicao. Por causa disso, existem diversas tecnologias que auxiliam a alcanar os objetivos. Muitas dessas tecnologias so definidas por diversas caractersticas como: aparncia, interatividade, disponibilidade no servidor Web, experincia do desenvolvedor ou por uma escolha pessoal do desenvolvedor por uma linguagem especfica.
Ateno! Cuidado com a escolha de uma linguagem, pois a escolha errada pode causar fracasso no projeto. Procure nunca utilizar o lado pessoal durante esse processo. Lembre-se que o objetivo de um desenvolvimento oferecer a melhor soluo para um problema.
Existem inmeras linguagens que podem ser trabalhadas no desenvolvimento Web e possvel interpretar linguagens tipicamente desktops em servidores Web. Lembre-se que, para
32
uma linguagem ser interpretada, basta que o servidor Web entenda os comandos provenientes desta. Vejamos mais detalhadamente duas linguagens amplamente disseminadas: (a) Client-Sides e (b) Server-Sides.
a) Linguagens Client-Sides
Client-sides caracterizam as linguagens que so interpretadas pelo browser. Normalmente no fazem parte da regra de negcio composta pelo projeto e possuem uma aplicabilidade de interao imediata.
Linguagens client-sides so mais teis no realce do aspecto visual da aplicao ou quando precisamos de processos simples e rpidos sendo executados na interface, como a validao dos dados digitados pelo usurio.
Hoje, esse tipo de linguagem tem ganhado fora com a usabilidade. As aplicaes atuais possuem um nvel muito grande de personalizao e interao. Por esse motivo, as linguagens como CSS, JavaScript e DHTML so cada vez mais trabalhadas e novos profissionais especialistas surgem no mercado. As linguagens client-sides mais comuns so:

CSS HTML XHTML Javascript AJAX Flash Action Script Microsoft Silverlight
Unidade 1
33
b) Linguagens Server-Sides
Este tipo de linguagem mantm em seu escopo as regras de negcio da aplicao. Pelo fato de as linguagens Server-sides serem executadas no servidor, todo o processamento da aplicao recai sobre ela. Nessa camada se fazem as chamadas a banco de dados e a arquivos de comunicao.
As linguagens server-sides j proveem mecanismos para a implementao da parte lgica da aplicao, como os algoritmos que executam os processos da camada de negcio ou recursos auxiliares, como acesso a banco de dados.
As linguagens mais usadas atualmente so:

PHP ASP .NET CGI, Perl Java, J2EE, WebObjects SSJS, Aptana Jaxer, Mozilla Rhino Python, Django Ruby, Ruby on Rails Smalltalk Seaside ColdFusion Lotus Domino Websphere
As linguagens server-sides dependem diretamente do servidor Web. Esse servidor necessita estar configurado para interpretar as linguagens. Em outras palavras, para que uma linguagem
34
se adque a um desenvolvimento Web e se torne Server-side, basta que o servidor Web interprete o seu cdigo. Mesmo linguagens tipicamente desktop como o C++ pode ser utilizada no desenvolvimento Web. Apenas o servidor tem de identificar seu cdigo e encaminhar para o compilado C. Software de aplicao (Software as a Service SaaS) so aplicaes executas em um servidor Web ao invs de serem instaladas em um equipamento cliente. Esse tipo de aplicao possui vrios tipos de benefcios, como reduzir a demanda dos departamentos internos de TI. O SaaS ainda pode aumentar a acessibilidade para o uso fora dos escritrios facilitando a sua manuteno. O usurio acessa o software como um servio, desta forma sempre est atualizado. Quaisquer atualizaes efetuadas no servidor causam diretamente impacto a todos os equipamentos dos usurios. Esse tipo de aplicao vem sendo utilizada pelas empresas para facilitar a atualizao dos seus softwares, alm de adotar uma padronizao. A Google utiliza esse conceito em vrios de seus softwares. Um dos mais usados o Google Docs, que se baseia em um conjunto de aplicativos para escritrios, como um editor de textos e uma planilha eletrnica.
Figura 1.9 - Planilha eletrnica do Google Docs. Fonte: <http://docs.google.com>.
A colaborao de projetos torna-se simplificada. Uma vez que o arquivo se encontra no servidor, no necessrio enviar para um colega. Simplesmente o usurio necessita compartilhar o arquivo com os colegas que deseja.
Unidade 1
35
Outra forma de aplicativo que vem ganhando muito espao e ateno so os Webtop. Um Webtop um desktop Web, isto , um ambiente de sistema operacional disponvel pelo browser. Esse tipo de aplicao possui um potencial impressionante, j que o usurio poder trocar de equipamento sem perder as suas configuraes e os seus arquivos.
Figura 1.10 - Webtop, uma forma de trabalhar de forma virtual. Fonte: http://icloud.com/pt. Acesso em 06 jan. 2011
Como voc pde notar, o desenvolvimento Web possui inmeras aplicabilidades e est longe de encontrar o seu limite. Porm, somente desenvolver no tudo. Conhecer o usurio e procurar tcnicas para melhorar o uso das aplicaes so fatores fundamentais. Essa tentativa de facilitar o uso das aplicaes e potencializar o seu uso chama-se de usabilidade.
Seo 3 Usabilidade
J foi mencionado aqui sobre usabilidade, como ela vem ganhando espao e cada vez mais utilizada em aplicaes Web. Mas, afinal, o que a usabilidade?
Usabilidade uma caracterstica daquilo que utilizvel, funcional. tornar bvio o bvio, tendo em conta as necessidades do utilizador e o contexto em que este est inserido. Podemos relacionar usabilidade com os seguintes verbos: simplificar, rentabilizar, otimizar, facilitar, melhorar, acelerar. Mais usabilidade sinnimo de maior flexibilidade e de maior interao com os usurios.
36
A usabilidade est em todo o lugar, praticamente em todos os produtos que o ser humano desenvolveu possvel alterar para melhor. Porm, nem sempre mudar significa que ir melhorar. Qualquer pessoa que j tenha operado uma tev poder utilizar qualquer outra. Essa afirmao verdadeira, porm nem sempre poder utilizar no mximo de seus recursos. No so todos os detalhes que o usurio ter conhecimento, como uma funo sleep, mute, canal anterior, menu. Agora, se alterarmos o produto como celular, forno, forno microondas, lavadoras de loua, computadores, videogame. Percebemos que todos caem cabem nesse exemplo. Desta forma, a forma que se usa um determinado produto deve ser adequado para que se torne intuitivo. Assim, quando o produto no o faz, o problema do projeto do design, da usabilidade.
Vejamos um caso de sucesso: a Apple se esfora para que seus produtos se tornem completamente intuitivo e que todo o ritual de utilizar um produto da Apple torne-se nico e de uma facilidade sem precedentes.
Botes e informaes nos devidos locais com sua hierarquia de importncia; cores e diagramao intuitivas e adequadas; comportamento adequado ao pblico. Isso usabilidade em ao. Quando um produto usvel, nem se pensa no conceito de usabilidade. O problema est quando o produto no se adqua ao utilizador. A usabilidade um caminhar progressivo em direo ao utilizador, e no o contrrio.
Na internet a usabilidade no basta, mas corresponde a uma boa parte do caminho. Se considerarmos o exemplo de uma loja online, veremos que algo simples: se um usurio no encontra um produto, no o compra. Fazer com que o utilizador encontre o que procura usabilidade em ao.
Um site tem, em uma perspectiva otimista, entre 10 e 15 segundos para convencer, por isso todos os elementos da pgina
Unidade 1
37
precisam ser avaliados, pesados, medidos em termos de impacto. Um dos fatores mais apontados para pginas Web a velocidade de carregamento. Um usurio que espera dez segundos para uma pgina carregar, tende a desistir da visita. Todos os elementos grficos necessitam ser altamente otimizados (tamanho, qualidade, interesse). Sempre de boa prtica, verificar se todas as imagens so necessrias. Questionar se todos os elementos grficos so fundamentais. Tratando de aplicaes corporativas, esse questionamento deve ser realizado com muito mais seriedade. Aplicaes corporativas no necessitam vender um produto, mas maximizar a funcionalidade. Um layout deve ser consistente e implementado com o foco da aplicao. O layout deve mostrar a filosofia, a ideia central em que a aplicao desempenha dentro da empresa. Cada empresa tem uma linguagem, uma imagem que o layout do site necessita sublinhar.
O layout dever ser concebido a partir do ponto onde se pretende que o usurio inicie a movimentao visual. A distribuio dos elementos e as cores escolhidas so importantssimas, normalmente os olhos movimentam-se da esquerda para a direita e de cima para baixo.
Figura 1.11 - Simulao do movimento dos olhos ao ler uma pgina Web. Fonte: Elaborada pelo autor (2010).
Esse formato indica que o layout ideal aquele que leva o usurio sempre a observar primeiro os elementos superiores
38
esquerdos, normalmente utilizados em muitos sites e softwares como uma rea reservada para logotipo, aps este ponto descendo em diagonal. Os olhos procuram normalmente primeiro os elementos maiores e s depois os menores. A cor influencia, a tendncia primeiramente observamos os elementos mais escuros e s depois os mais claros. Quando falamos de layout, sempre devemos levar em considerao a coerncia e o equilbrio do visual apresentado. No devemos imprimir um layout onde os elementos grficos sejam maiores que as informaes textuais. No caso de formulrios, devemos evitar cadastros longos. Normalmente os formulrios devem estar totalmente visveis na janela do browser. Existe uma tcnica de avaliar o equilbrio da tela, devemos traar uma linha imaginria vertical ou horizontalmente em metade da tela. As medidas devem conter aproximadamente a mesma quantidade de texto.
Seo 4 HTML
HTML a linguagem padro de todos os browsers. Portanto, fundamental que voc conhea e entenda muito bem esta linguagem.
Os comandos HTML so representados no texto por meio de tags. O browser interpreta como tags todos os elementos HTML vlidos que estejam entre os sinais menor que (<) e maior que (>). Sua sintaxe bsica :
<tag>Descrio</tag>
Algumas tags podem ter um ou mais atributos, que definem alguma caracterstica especial. As tags permitem que voc crie atributos novos. O browser ir ignorar os atributos conhecidos. Esse artifcio permite que voc adicione caractersticas nicas
Unidade 1
39
para cada elemento do HTML. As tags com atributos so formatadas da seguinte forma:
<p align=center>teste</p> <table border=1> <tr> <td>Clula</td></tr> </table>
Veja que, no exemplo, o pargrafo est sendo centralizado. J a tabela possui uma borda aparente. Todo o documento HTML possui uma estrutura de hierarquia. Essa estrutura inicia com a identificao do documento por meio da tag <HTML>. Dentro do documento, a estrutura separa em cabealho e corpo.
<html> <head> <title>Teste</title> </head> <body> <p align=center>teste</p> <table border=1> <tr> <td>Clula</td></tr> </table> </body> </html>
A tag <head> delimita a parte do documento sendo o cabealho. O cabealho onde se encontram as informaes do documento. Nenhuma informao contida dentro desse bloco deve conter informaes a serem escritas no browser. Alm de informaes de configurao da pgina, a tag <title> informa o ttulo do documento, que ser apresentado na barra superior do browser. Essa tag deve sempre estar dentro do cabealho. A tag <body> contm o corpo do documento. Essa tag contm em seu interior toda a informao que ser mostrada em sua pgina. Os textos, as imagens, os formulrios, tudo que ser
40
apresentado pelo browser. Os atributos dessa tag definem cores para os textos, links, imagem de fundo, entre outras caractersticas. O HTML ainda oferece uma srie de tag que so utilizadas para formatar as informaes nele contidas. Podemos formatar textos de ttulos utilizando as tags <h1> at <h6>. A numerao representa os nveis dos ttulos.
<html. <head> <title>Teste de ttulos</title> </head> <body> <h1>Ttulo 1</h1> <h2>Ttulo 2</h2> <h3>Ttulo 3</h3> <h4>Ttulo 4</h4> <h5>Ttulo 5</h5> <h6>Ttulo 6</h6> </body> </html>
O browser interpretar da seguinte forma:
Figura 1.12 - Tags de formatao. Fonte: Elaborada pelo autor (2010).
Unidade 1
41
Alm das tags de ttulos, as quebras de linhas e pargrafos so muito utilizadas em textos e formatao de formulrios. O HTML usa comandos especiais para definir a quebra de um pargrafo ou de uma linha. A tag <p> indica a quebra de pargrafos, ela insere automaticamente uma linha em branco. O uso da tag de pargrafo pode ser feito em uma nica linha ou em bloco, esse uso opcional. O comando <p> permite alinhar o pargrafo dentro do documento.
<html> <head> <title>Teste de pargrafos</title> </head> <body> <p align=left>Alinhado esquerda <p align=center>Alinhado ao centro</p> <p align=right>Alinhado direita <p align=justify>Justificado - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - </p> </body> </html>
Como fica no browser :
42
Figura 1.13 - Tags de pargrafo e alinhamento de texto. Fonte: Elaborada pelo autor (2010).
Em vez de inserirmos uma quebra de pargrafo, pode ser necessria uma quebra de linha somente. Neste caso, devemos utilizar a tag <br>, pois ela finaliza a linha atual e passa para a prxima. Esse elemento no utilizado em bloco. Portanto, o browser quando a encontra entende que o texto posterior a ela colocado em uma nova linha.
<html> <head> <title>Teste de quebra de linha</title> </head> <body> Quebra de linha<br>Nova linha </body> </html>
O browser interpreta da seguinte forma:
Unidade 1
43
Figura 1.14 - Tag de nova linha. Fonte: Elaborada pelo autor (2010).
A tag <PRE> informa ao browser que deve interpretar o texto conforme foi digitado.
<html> <head> <title>Teste de pr-formatao</title> </head> <body> <pre>Texto pr-formatado. O browser interpretar exatamente desta forma que est sendo digitado. Inclusive com espaos em branco</pre> </body> </html>
O browser interpreta desta forma:
44
Figura 1.15 - Tag de pr-formatao. Fonte: Elaborada pelo autor (2010).
Por ser uma linguagem de formatao, o HTML tambm permite alterar o estilo do texto. Como aplicar negrito, itlico, sublinhado, subscrito, entre outros.
<html> <head> <title>Teste de formatao de texto</title> </head> <body> <b>Texto em negrito</b> <br> <i>Texto em itlico</i> <br> <u>Texto sublinhado</u> <br> <sup>Texto sobrescrito</sup> <br> <sub>Texto subscrito</sub> <br> <big>Almenta a fonte</big> <br> <small>Reduz a fonte</small> </body> </html>
Unidade 1
45
No browser fica assim:
Figura 1.16 - Tags de alterao de estilo. Fonte: Elaborada pelo autor (2010).
O HTML ainda possibilita a configurao da fonte de texto. O elemento utilizado a tag <font>. Alm do elemento, ainda possvel manipular algumas informaes por meio dos atributos, como tamanho e cor da fonte.
<html> <head> <title>Teste de fonte de texto</title> </head> <body> <font face=Verdana, Geneva, sans-serif> Teste fonte Verdana</ font><br /> <font face=Arial, Helvetica, sans-serif size=+1 color=#000066>Teste fonte arial</font><br /> <font face=Times New Roman, Times, serif size=+2 color=#006633>Teste fonte Times New Roman</font><br /> <font face=Tahoma, Geneva, sans-serif size=+3 color=#009900>Teste fonte Tahoma</font><br /> <font face=Lucida Sans Unicode, Lucida Grande, sans-serif size=+2 color=#0000FF>Teste fonte Lucida</font><br /> <font face=Courier New, Courier, monospace size=+4 color=#FF0000>Teste fonte Courier</font><br /> </body> </html>
46
Figura 1.17 - Tags manipuladores de fontes. Fonte: Elaborada pelo autor (2010).
Uma das tags extremamente utilizadas em uma tentativa de tornar os layouts mais amigveis e atrativos para os usurios. Esta tag a <div>, ela tratada tambm como camada visual em DHTML. J no HTML bsico utilizado como bloco de alinhamento horizontal.
<html> <head> <title>Teste de Div</title> </head> <body> <div align=center>Usando a TAG DIV:</div> <BR> <div align=right> <P>Usando a TAG DIV voc pode alinhar seu texto sem problemas. <P>Pode utilizar o alinhamento direita, que alinha seu texto na margem direita da tela. Como um texto criado em editor de textos para ser impresso em uma pgina. <P>Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vrios pargrafos. </div> </body> </html>
Unidade 1
47
Figura 1.18 - Tag de camadas. Fonte: Elaborada pelo autor (2010).
Uma forma de organizar as informaes dispostas no browser a utilizao de listas. As listas podem servir como resumos ou ndices de todo o site, contendo links para outras pginas. Podemos dividir as listas em trs tipos:

listas no ordenadas; listas ordenadas ou numeradas; listas descritivas.
As listas no ordenadas representam a formatao simples de informaes por meio de indicadores. A tag do comando a <ul> e seus tpicos so a <li>. Podemos ainda alterar o tipo do marcador pelo atributo type da tag <ul>.
48
<html> <head> <title>Teste de Lista no Ordenada</title> </head> <body> <ul type=circle> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ul> <ul type=disc> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ul> <ul type=square> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ul> </body> </html>

<html> <head> <title>Teste de Lista Ordenada</title> </head> <body> <ol type=1> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ol> <ol type=a start=4> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ol>
Unidade 1
49
<ol type=A> <li>Tpico 2</li><li>Tpico 3</li> <li>Tpico 4</li> </ol> <ol type=i start=2> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ol> <ol type=I> <li>Tpico 2</li> <li>Tpico 3</li> <li>Tpico 4</li> </ol> </body> </html>
Figura 1.19 - Tags de listas no ordenadas. Fonte: Elaborada pelo autor (2010).
As listas ordenadas no possibilitam enumerar os tpicos por meio de nmeros ou em ordem alfabtica. A tag utilizada a <ol>, alm do atributo type que define o tipo de numerador, a tag possui um segundo atributo, o start. Esse atributo informa ao browser em qual nmero a lista deve iniciar.
50
A apresentao no browser ser:
Figura 1.20 - Tags lista ordenada. Fonte: Elaborada pelo autor (2010).
As listas descritivas so diferentes das outras listas. Essa lista inicia pela tag <dl>. Cada item de uma lista descritiva possui dois componentes: um tpico <dt> e uma descrio do tpico <dd>.
<html> <head> <title>Teste de Lista Descritivas</title> </head> <body> <dl> <dt>Tpico 1</dt> <dd>Descrio do tpico 1</dd> <dt>Tpico 2</dt> <dd>Descrio do tpico 2</dd> <dt>Tpico 3</dt> <dd>Descrio do tpico 3</dd> </dl> </body> </html>
O browser deve apresentar da seguinte forma:

Unidade 1
51
Figura 1.21 - Tags de lista descritivas. Fonte: Elaborada pelo autor (2010).
Outra funcionalidade que amplamente usada em praticamente todas as pginas da internet o link ou hipertexto. Essa funcionalidade representa a ligao primitiva entre as pginas formando a teia da internet. Os links proporcionam a ligao entre pginas e textos da prpria pgina. Essa ligao interna utilizada principalmente em textos longos com tpicos especficos. Os links para outras pginas podem ser classificados como locais e externos. Os links locais representam uma ligao com uma pgina que est salva no mesmo local da pgina principal. Isso significa que a pgina que est sendo acessada far uma referncia direta a outro arquivo, sem a necessidade de utilizar o protocolo HTTP. O cdigo para esse tipo de link se torna extremamente simples:
<a href=segundaPagina.htm>Acessar a segunda pgina</a>
J quando tratamos de links externos, o link necessita realizar a chamada pelo protocolo HTTP.
<a href=http://www.google.com.br>Acessar o Google</a> <a href=../outros/paginatres.html>Acessar pgina trs em outros diretrio</a>
52
Porm, quando o acesso se tornar de ncora para uma parte do texto da prpria pgina, a sintaxe do HTML se altera um pouco:
<html> <head> <title>Link de Texto (Ancora)</title> </head> <body> <a href=#primeiraparte>Tabela</a> <br /> <a href=#Atalho>Atalhos</a> <pre> <a name=primeiraparte /> Tabelas Recurso Criando tabelas com um teclado Vantagem Voc pode capturar informaes tabulares de forma rpida e fcil Situaes Reunies, apresentaes, debates pessoais Tente agora 1. Coloque o cursor ao final da palavra Produto abaixo: Produto 2. Pressione TAB e digite Quantidade. 3. Pressione TAB novamente e digite preo. 4. Pressione ENTER. 5. Pressione TAB para passar de uma clula a outra e digite alguma informao nas clulas. 6. Pressione ENTER ao final da linha. 7. Tente pressionar TAB abaixo, aps Joo e aps Maria: Pessoa Dinheiro que lhes devo Joo Maria <a name=Atalho />
Unidade 1
53
Atalhos teis: ALT + ENTER insere outra linha dentro de uma clula (quando ENTER no funciona na ltima clula de uma tabela). CTRL + ENTER insere uma linha abaixo. CTRL + ALT + E, R insere uma coluna esquerda ou direita. Alm disso, tente fazer experincias com DEL, BACKSPACE, HOME, END e ENTER em vrios pontos da tabela. Verifique os Atalhos do Teclado no Office Online para descobrir outras funes de tabela que podem ser executadas em um teclado. </pre> </body> </html>
Alm dos hipertextos, as tabelas so elementos amplamente utilizados na internet. Ela no faz nenhuma ligao com outras pginas, mas organiza de uma forma matricial qualquer dado da pgina, tanto textos como outros elementos. No caso das aplicaes, as tabelas so utilizadas para organizar o formulrio na pgina. Quando voc domina o uso das tabelas, acaba tendo uma enorme facilidade em criar layouts organizados. As informaes so dispostas de forma mais clara para o usurio. Quando usada com as folhas de estilos CSS, tornam-se ainda mais amigveis. Porm, o prprio CSS responsvel pelo declnio no uso das tabelas para melhoramento dos layouts de pginas. Uma tabela pode ser criada de forma simples, apenas para organizar algum elemento ou mesmo o texto que voc queira utilizar. O padro das tabelas no conter bordas. As tabelas so dispostas por linhas e clulas, apesar de no browser dar a falsa impresso que possui colunas.
54
<html> <head> <title>Exemplo de Tabela</title> </head> <table> <tr> <td>Linha 1 Célula 1</td> <td>Linha 1 Célula 2</td> <td>Linha 1 Célula 3</td> <td>Linha 1 Célula 4</td> </tr> <tr> <td>Linha 2 Célula 1</td> <td>Linha 2 Célula 2</td> <td>Linha 2 Célula 3</td> <td>Linha 2 Célula 4</td> </tr> <tr> <td>Linha 3 Célula 1</td> <td>Linha 3 Célula 2</td> <td>Linha 3 Célula 3</td> <td>Linha 3 Célula 4</td> </tr> </table> <body> </body> </html>
O browser interpreta desta forma:
Unidade 1
55
Figura 1.22 - Tag de tabelas. Fonte: Elaborada pelo autor (2010).
Os atributos das tabelas podem alterar a aparncia, como a disposio do contedo. As bordas, o alinhamento do contedo, o espaamento entre as clulas, os espaos entre os dados e a prxima clula, entre outros, podem ser alterados. Alguns dos mais usados so:
width - atributo que manipula a largura da tabela em relao ao browser, pode ser tratado com pixels ou percentual relativo. height - atributo responsvel pela altura da tabela em relao ao browser, pode ser tratado com pix.els ou percentual relativo. border - atributo que trata da espessura da borda em pixels. cellspacing - atributo responsvel pelo espao entre uma clula e outra tratado em pixel. celladding - atributo responsvel pelo espao entre os dados e a borda da tabela tratado em pixels.
56
Procure pesquisar sobre os atributos das tabelas. Eles so de grande auxlio no desenvolvimento e na apresentao.
<html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <title>Atributos de clulas</title> </head> <body> <table width=400 border=1> <tr> <td>Linha 1 Célula 1</td> <td valign=bottom>Linha 1 Célula 2</td> <td bgcolor=#FF0000>Linha 1 Célula 3</td> <td>Linha 1 Célula 4</td> </tr> <tr> <td valign=bottom>Linha 2 Célula 1</td> <td valign=middle nowrap>Linha 2 Célula 2</td> <td>Linha 2 Célula 3</td> <td align=center>Linha 2 Célula 4</td> </tr> <tr> <td width=20 height=20>Linha 3 Célula 1</td> <td valign=top>Linha 3 Célula 2</td> <td align=right>Linha 3 Célula 3</td> <td>Linha 3 Célula 4</td> </tr> </table> </body> </html>
Unidade 1
57
<html> <head> <title>Tabela com atributos</title> </head> <body> <table border=1 cellpadding=2 cellspacing=1 width=70% height=50%> <tr> <td>Linha 1 Célula 1</td> <td>Linha 1 Célula 2</td> <td>Linha 1 Célula 3</td> <td>Linha 1 Célula 4</td> </tr> <tr> <td>Linha 2 Célula 1</td> <td>Linha 2 Célula 2</td> <td>Linha 2 Célula 3</td> <td>Linha 2 Célula 4</td> </tr> <tr> <td>Linha 3 Célula 1</td> <td>Linha 3 Célula 2</td> <td>Linha 3 Célula 3</td> <td>Linha 3 Célula 4</td> </tr> </table> </body> </html>
J no browser fica:
58
Figura 1.23 - Propriedade de tabela. Fonte: Elaborada pelo autor (2010).
As clulas, por sua vez, possuem atributos que so igualmente fundamentais para uma boa utilizao das tabelas. Voc pode manipular o alinhamento vertical e horizontal, a cor da clula, se o texto poder ou no ter quebra automtica de linha, entre outras. O browser interpreta da seguinte forma:
Figura 1.24 - Propriedades de clulas. Fonte: Elaborada pelo autor (2010).
Como voc pode notar, a estrutura da tabela sempre tender a um ajuste automtico. Ou seja, todas as clulas da mesma ordem so foradas a assumir a caracterstica que define o tamanho de uma clula.
59
Unidade 1
As linhas no fogem regra, voc pode utilizar alguns atributos como cor, alinhamento, entre outros. Lembre-se sempre que os atributos da linha modificaro todas as clulas contidas nela.
Os atributos das clulas e das linhas podem auxili-lo de forma surpreendente, procure pesquisar mais sobre quais so e como utiliz-los.
As clulas e as linhas ainda podem ser mescladas. Esse artifcio muito utilizado para facilitar a organizao das informaes. Para mesclar as clulas de uma mesma linha, utilize o atributo colspan e o nmero de clulas que voc est mesclando. J para mesclar clulas de linhas diferentes, utilize o atributo rowspan e o nmero de clula que voc est mesclando.
<html> <head> <title>Tabela Mesclando Clulas</title> </head> <body> <table border=1> <tr> <td>Linha 1 Célula 1</td> <td colspan=3>Linha 1 Célula Mesclada 2 - 3 - 4</td> </tr> <tr> <td rowspan=2>Célula 1- Linhas 2 e 3 mescladas</td> <td>Linha 2 Célula 2</td> <td>Linha 2 Célula 3</td> <td>Linha 2 Célula 4</td> </tr> <tr> <td>Linha 3 Célula 2</td> <td>Linha 3 Célula 3</td> <td>Linha 3 Célula 4</td> </tr> </table> </body> </html>
60
A apresentao no browser fica:
Figura 1.25 Mesclando clulas. Fonte: Elaborada pelo autor (2010).
Os formulrios so utilizados em todas as aplicaes Web com base em HTML. O formulrio possibilita ao usurio entrar com informaes destinadas ao servidor. Estes, por sua vez, processam e devolvem uma resposta. Os formulrios no processam as informaes. Essa responsabilidade efetuada por um interpretador no servidor, como o caso do ASP ou PHP. O interpretador ASP l os dados imputados do formulrio e realizar as instrues contidas no programa. Aps o trmino, remete para o usurio o carregamento completo. Uma linguagem Server-side, como o ASP, podem ser utilizadas de diversas formas. Podemos relacionar algumas:
processar as requisies e os dados enviados pelo usurio por meio de formulrios; tornar-se uma interface entre HTML e banco de dados SQL, fazendo a converso da transao HTML para SQL e vice-versa; converter dados do sistema em HTML gerando respostas para o cliente.
Unidade 1
61
Os scripts ou programas so escritos em linguagens compatveis com a plataforma sob a qual o servidor est rodando e devem produzir arquivos executveis. Os elementos de um formulrio so definidos separadamente. Na definio do formulrio, voc informa o local do programa (CGI, ASP, PHP) que controlar o formulrio e a forma ou o mtodo como os dados sero enviados para o servidor. A tag utilizada para o formulrio o form. Essa tag possui atributos que definem o destino do formulrio, o mtodo de envio, o nome, entre outros. Sobre esses atributos, podemos relacionar:
method: define o mtodo utilizado pelo servidor para receber os dados do formulrio. Este atributo pode receber dois valores:
post: mtodo que transmite toda a informao do formulrio incorporada no documento do HTML; get: anexa o contedo do formulrio ao endereo da URL, possui limitao de tamanho das informaes;
action: especifica o programa ou a pgina do servidor que processar os dados do formulrio; name: define o nome do formulrio.
Os elementos de formulrio so campos destinados a receber dados do usurio. Os mais utilizados so: input, select, textarea. a) Elemento input O elemento input de longe o mais utilizado. Sua configurao grfica varia conforme os valores do atributo type. Visualmente pode variar de uma caixa de texto para um boto. Os principais atributos deste elemento so:
62
type - define o tipo de entrada que o elemento ser:
text - campo simples de entrada de texto, utiliza como principais atributos associados: type, name, value, size, maxlength. password - texto protegido, no possvel visualizar os caracteres digitados, utiliza como principais atributos associados: type, name, value, size, maxlength. hidden - utiliza como principais atributos associados: type, name, value. radio - elemento com um boto de seleo nica, utiliza como principais atributos associados: type, name, value, checked. checkbox - caixa de seleo onde pode ser checado diversos elementos, utiliza como principais atributos associados: type, name, value, checked. reset - boto responsvel em limpar os dados do formulrio, utiliza como principais atributos associados: type, name, value. submit - boto responsvel em enviar o formulrio para o servidor, utiliza como principais atributos associados: type, name, value. image - mesma funo no atributo submit, porm o boto associado a uma imagem, utiliza como principais atributos associados: type, name, value, src. button - cria um boto sem ao predefinida, utiliza como principais atributos associados: type, name, value. file - abre uma janela para selecionar arquivo, utiliza como principais atributos associados: type, name, value.
name - nome do campo ou da varivel. src - local no servidor onde a imagem deva ser carregada. value - valor default do campo.
Unidade 1
63
checked - indica que o campo deve estar marcado ou no como padro. Quando no possuir valor atribudo assume true. size - define o tamanho do campo, ou seja, a quantidade de caracteres que ser exibida em campos do tipo text e password. maxlength - define a quantidade de caracteres que o campo pode receber em campos do tipo text e password.
<html> <head> <title>Teste formulário</title> </head> <body> <form action=processa.asp method=POST> <table> <tr> <th align=left Valign=top>Caixa de texto comum:</th> <td><input type=text name=txtTexto size=20 maxlength=25></td> </tr> <tr> <th>Texto protegido por senha:</th> <td><input type=password name=pwsSenha size=6 maxlength=6></td> </tr> <tr> <th>Botões de Radio:</th> <td> Qual o seu time? <input type=radio name=radOpcao value=F checked=true>Flamengo <input type=radio name=radOpcao value=V>Vasco</td> </tr> <tr> <th>Checkboxes:</th> <td> Que softwares você cohece? <input type=checkbox name=word value=Sim> Word <input type=checkbox name=excel value=Sim> Excel
64
<input type=checkbox name=firefox value=Sim>Firefox</td> </tr> <tr> <th>Botão de Envio:</th> <td><input type=submit name=cmdEnvio value=Enviar></td> </tr> <tr> <th>Botão de Limpeza:</th> <td><input type=reset name=cmdLimpar value=Limpar></td> </tr> <tr> <th>Tipo File:</th> <td><input type=file name=filArquivo></td> </tr> </table> </form> </body> </html>
O browser fica:
Figura 1.26 - Formulrios, entrada de dados dos usurios. Fonte: Elaborada pelo autor (2010).
b) Elemento select O elemento select trata-se de uma lista de itens que podem ser selecionados pelo usurio. Esta seleo pode se dar de forma nica ou mltipla, dependendo dos atributos que o elemento possa ter.
Unidade 1
65
name - atributo nome do elemento. size - atributo representa a quantidade de linhas que a lista mostrar. multiple - define o tipo de seleo da lista. Caso este atributo esteja presente, a lista ter seleo mltipla. option - esta tag representa a lista propriamente dita. Define cada opo da lista, as opes devem ser definidas entre as tags <option></option. selected - indica que a opo estar selecionada como default. Este atributo usado na tag option.
<html> <head> <title>Teste formulrio select</title> </head> <body> <form method=get name=formulario action=processa.asp> <table> <tr> <th>Quais as linguagens voc j viu?</th> <td><select name=linguagens size=5 multiple> <option>CSS</option> <option selected>HTML</option> <option>XHTML</option> <option>Javascript</option> <option>Flash Action Script</option> <option>Microsoft Silverlight</option> <option>PHP</option> <option>ASP</option> <option>.NET</option> <option>CGI, Perl</option> <option>Java, J2EE, WebObjects</option> <option>Python, Django</option> <option>Ruby, Ruby on Rails</option> <option>Smalltalk Seaside</option> <option>ColdFusion</option>
66
</select> </tr> <tr> <th>Qual seu estado civil</th> <td><select name=estadoCivil> <option>Casado</option> <option selected>Solteiro</option> <option>Divorciado</option> <option>Vivo</option> </select></td> </tr> </table> </form> </body> </html>
O browser aparecer da seguinte forma:
Figura 1.27 Elemento select (combobox). Fonte: Elaborada pelo autor (2010).
Unidade 1
67
a) Elemento textarea Trata-se de uma caixa de texto para serem digitadas vrias linhas de dados. Este tipo de elemento utilizado quando o usurio necessita digitar um grande volume de informao. Normalmente com vrias linhas de texto. Os principais atributos so:

name - atributo nome do elemento. rows - nmero de linhas da caixa de texto. cols - nmero de colunas da caixa de texto. texto - define o texto que aparecer como default.
<html> <head> <title>Formulário TextArea</title> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> </head> <body> <table> <tr> <th>Digite seu comentário</th> <td><textarea name=comentario rows=10 cols=30>Pode digitar aqui!</textarea></td> </tr> <tr> <td><input type=submit name=enviar value=Enviar></td> <td><input type=reset name=limpar value=Limpar></td> </tr> </table> </body> </html>
68
Figura 1.28 - Elemento de rea de texto. Fonte: Elaborada pelo autor (2010).
Voc pode relembrar alguns dos elementos do HTML. Estes elementos so fundamentais para um bom entendimento de como o desenvolvimento da aplicao realizada e como pode ser controlada.
O HTML exposto nesta seo descreveu diversos elementos nos quais voc utilizar durante o curso. Pesquise e aprofunde seus conhecimentos buscando mais elementos e atributos que possam auxili-lo no desenvolvimento.
Unidade 1
69
Seo 4 Integrao de linguagens

As aplicaes Web possuem um alto nvel de integrao entre as linguagens, uma vez que a plataforma em que desenvolvida no proporciona todas as facilidades e ferramentas para que possamos construir uma soluo amigvel.
Quando falamos de integrao, entenda que nos referimos troca de informaes entre uma linguagem e outra por meio de tecnologias disponveis.
Vamos tentar entender desta forma. Via de regra, linguagens no conversam entre si. Para superar esse obstculo, possvel utilizar alguns artifcios para que possamos alcanar os objetivos. Como j vimos, o HTML a linguagem utilizada para que o browser interprete os dados de uma forma padronizada e formatada. Vimos ainda que as linguagens server-side so responsveis por processar as informaes provenientes do HTML. Ento, como podemos resgatar as informaes de um servidor e escrever de forma dinmica? Basicamente existem duas formas de enviar informaes para o servidor via HTML. So os mtodos GET e POST. a) Mtodo GET O mtodo GET usado quando, no endereo da pgina Web, informaes so encapsuladas para serem lidas pelo servidor. Este encapsulamento pode ser feito de duas formas: escrita da url e por formulrios. Quando voc utiliza o mtodo GET no formulrio HTML, toda a informao contida no bloco form enviada pela url. Para utilizar, basta colocar na tag form o atributo method=GET e automaticamente ser processado desta forma. Usando de uma forma prtica, teramos o seguinte formulrio HTML:
70
<html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Mtodo Get</title> </head> <body> <form action=Dadosget.asp method=get name=form1> <table> <tr> <th>Marca :</th> <td><input name=marca type=text id=marca value=/></td> </tr> <tr> <th> Modelo:</th> <td><input name=modelo type=text id=modelo value=/></ td> </tr> <tr> <th> Combustvel :</th> <td><input name=combustivel type=text id=combustivel value=/></td> </tr> <tr> <th> Cor :</th> <td><input name=cor type=text id=cor value=/></td> </tr> <tr> <th> Ano : </th> <td><input name=ano type=text id=ano value= size=4 /></ td> </tr> <tr> <td><input name=enviar type=submit id=enviar value=enviar /></td> <td><input name=limpar type=reset id=limpar value=limpar /></td> </tr> </table> </form> </body> </html>
Unidade 1
71
Repare que est sendo enviado para um arquivo de processamento ASP chamado Dadosget.asp. Neste arquivo onde se trabalha a diferena de requisio do formulrio. Portanto, teramos o seguinte cdigo:
<html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Processamento dados GET</title> </head> <body> <h2> Dados do Automvel: </h2> <% Response.Write Marca : &Request.querystring(marca) %><br> <% Response.Write Modelo : &Request.querystring(modelo) %><br> <% Response.Write Combustvel: &Request.querystring(combustivel) %><br> <% Response.Write Cor : &Request.querystring(cor) %><br> <% Response.Write Ano : &Request.querystring(ano) %><br> </body> </html>
O comando Response.Write apenas escreve na pgina. J o comando Request.querystring recupera a informao contida nos campos do formulrio. Desta forma, temos um Request. querystring para cada campo do formulrio que ser recuperado. Ainda para ilustrar, voc pode perceber que a url montada com os valores dos campos contidos no formulrio.
72
Figura 1.29 - Recuperao de dados por meio do mtodo GET. Fonte: Elaborada pelo autor (2010).
Outra forma de utilizar este mtodo escrever manualmente na url quais so os parmetros que deseja. Este mtodo normalmente utilizado nos links das pginas.
Quando voc digita o endereo <http://www.universia. com.br/ead>, entrar no site da EaD da Universia. Porm, se voc quer acessar uma notcia especfica, deve acessar: <http://www.universia.com.br/ead/ materia.jsp?id=19065. Onde matria.jsp a pgina onde possui o designer e a parte id=19065 est transmitindo para o sistema que tem de recuperar a notcia 19065, por exemplo.
Ateno! Por usar a url como meio de comunicao, existe um limite de caracteres a serem enviados. A url aceita 255 caracteres no total. Quando voc for usar o mtodo GET, voc tem de levar em considerao o endereo da pgina e as variveis que voc est transmitindo.
b) Mtodo POST O segundo mtodo de transmisso de informaes para o servidor do HTML o POST. Este mtodo realiza o encapsulamento dos elementos do formulrio diretamente no corpo da pgina. Isso significa que toda a informao contida no formulrio enviada como se fizesse parte do HTML esttico da pgina.
Ateno: este mtodo no pode ser escrito via url. A forma de se acessar ele utilizando o elemento form com o atributo method=POST.
Utilizando o mesmo formulrio HTML do exemplo anterior, possvel demonstrar verificar que no se deve utilizar a mesma forma para ler um formulrio submetido via mtodo post.
Unidade 1
73
<html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Processamento dados Post</title> </head> <body> <h2> Dados do Automvel: </h2> <% Response.Write Marca : &Request.Form(marca) %><br> <% Response.Write Modelo : &Request.Form(modelo) %><br> <% Response.Write Combustvel: &Request.Form(combustivel) %><br> <% Response.Write Cor : &Request.Form(cor) %><br> <% Response.Write Ano : &Request.Form(ano) %><br> </body> </html>
Veja que agora se altera o comando para recuperao da informao, mas a estrutura a mesma. Perceba que agora a url no possui parmetros algum. Toda a informao est contida no corpo do HTML. Conter dois comandos distintos para recuperar as informaes do formulrio um padro entre as linguagens. Agora que enviamos os dados para o servidor podemos processar o retorno da informao. Normalmente esse retorno est associado a uma busca no banco de dados e a aplicao das regras de negcio sobre essa informao. Quando se envia o resultado, podemos utilizar a forma mais bsica para interagir as linguagens Server-side com as Client-side: as linguagens Server-side escrevem as linguagens Client-side. Como as linguagens Server-side so executadas no servidor, elas so processadas antes que a informao chegue ao browser. Assim, tm-se as respostas prontas para serem formatas conforme a necessidade e possibilitando a adequao das linguagens Clientside como o HTML e Javascript.
74
Ateno! Todo o browser possui um tempo de espera da resposta do servidor. Quando um processamento no servidor for muito demorado, o browser interpretar que a conexo com o servidor no existe mais e no receber resposta. Assim sua aplicao ir gerar um erro pelo simples fato de estar com um processamento muito elevado.
A tecnologia est sempre em constantes alteraes e inovaes. Procure pesquisar e manter-se atualizado sobre as novas tendncias que esto surgindo.
Sntese
Durante esta unidade voc viu como possvel identificar uma aplicao Web e como ela trabalha conceitualmente. Voc estudou sobre a importncia do HTML e como utilizar formulrios e seus atributos. Percebeu que, apesar de o HTML ser uma linguagem simples, possui diversas opes que apresentam variaes significativas. Para finalizar, voc viu ainda que existem diversas linguagens disponveis para o seu aprendizado, mas todas compartilham dos mesmos conceitos aqui vistos.
Unidade 1
75
Atividades de autoavaliao
Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem. 1) Voc viu diversas utilidades para as aplicaes Web. Cite e comente duas vantagens e duas desvantagens de uma aplicao Webtop.
2) As aplicaes Web possuem diversas linguagens que podem ser classificadas como Server-side e client-side. Com base nesta afirmao, enumere a segunda coluna de acordo com a primeira. 1 Linguagem Server-side 2 Linguagem Client-side ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) PostgreSQL HTML Oracle SQLite Javascript Microsoft Silverlight PHP MySQL ASP DB2 .NET CGI Perl Java
76
Linguagem de Programao III
( ) ( ) ( ) ( ) ( ) ( ) ( ) ( )
CSS Python Microsoft SQL Server Ruby Firebird ColdFusion Websphere Flash
3) Voc viu a importncia do HTML e como ele necessrio para o desenvolvimento Web. Viu tambm como existem diversos atributos que manipulam aparncia e em alguns casos os dados que existem neles. Qual o limite de atributos que podemos utilizar em cada tag?
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em: <www.w3schools.com/>. Acesso em: 01 mar. 2010. W3C. World Wide Web Consortium, 2010. Disponvel em: <www.w3.org/>. Acesso em: 2 mar. 2010.
77
unidade 2
JavaScript
Identifique os elementos do Javascript.
Compreenda a sintaxe da linguagem.
Conhea os principais comandos do Javascript.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 JavaScript aplicado Tipos de dados Elementos de linguagem Scripts JS

A linguagem JavaScript possui a caracterstica de ser clientside, ou seja, o browser se encarrega de interpretar seu cdigo. Por causa disso, existem ligeiras diferenas nesta interpretao. A linguagem a mesma para qualquer browser, porm as aes dos browsers divergem um pouco uma das outras. Essas divergncias proporcionam chamadas de eventos distintas, alm de interpretaes de aes diferenciadas como a captura das aes de teclas. O JavaScript uma linguagem simples, porm extremamente poderosa. Foi concebida inicialmente pela Netscape e teve forte colaborao da Sun Microsystems, empresa responsvel pela linguagem Java. Existe uma discusso sobre o JavaScript ser ou no orientada a objetos. A prtica mostra que ele possui acesso e comportamento de uma linguagem orientada a objetos. Mas esses recursos so limitados e sua programao feita de forma estruturada acessando, quando necessrios, os recursos de orientao a objetos. Essa linguagem amplamente conhecida e divulgada como JavaScript, j a verso produzida pela Microsoft foi concebido o nome de JScript. Porm, tratam-se de implementaes que sendo fiis norma ECMAScript lhe acrescentaram novas funcionalidades teis, mas respeitando sempre as especificaes oficiais. Vale lembrar que JavaScript no Java e que a grande semelhana consiste apenas nome.
Seo 1 JavaScript aplicado

O JavaScript trabalha com os elementos do HTML de forma a conceitu-los como objetos a serem acessados. Assim todos os elementos existentes em uma pgina Web so transformados
80
em objetos pelo JavaScript. Internamente so criados objetos que permitem aos usurios criarem novos objetos dependo da necessidade. Durante o carregamento da pgina, o JavaScript cria os objetos em uso com suas respectivas propriedades e valores que so ajustados pelo contedo da prpria pgina. Qualquer objeto JavaScript possui uma hierarquia que deve ser respeitada. Cada propriedade pode ser acessada descrevendo toda a hierarquia que se segue.
Figura 2.1 - Hierarquia dos objetos do Javascript. Fonte: JavaScript aplicaes interativas para a Web (2006).
A figura 1 representa a hierarquia de objetos do JavaScript. Veja que vrios objetos so filhos de outros, e para acessar o filho temos de escrever todo o caminho a ser percorrido at ele. Assim, se desejamos acessar a propriedade form, devemos primeiramente acessar o objeto document separando-os por ponto:
document.form
Esta forma hierrquica de chamadas dos objetos HTML so sempre utilizadas no JavaScript. Assim como as chamadas dos mtodos de cada objeto.
O JavaScript permite omitir o objeto window, uma vez que considera todos os objetos da pgina esto abaixo desse objeto. Assim, o exemplo anterior pode ser escrito como: document.form.
Unidade 2
81
Todo o objeto do JavaScript possui caractersticas que podem ser manipuladas. A essas caractersticas damos o nome de propriedades. Podemos dizer ento que o objeto form uma propriedade do objeto document. Assim como esse mesmo objeto document possui outras propriedades que no so objetos como a propriedade title. Alm das propriedades, existe mais um conjunto de atribuies que so denominados de mtodos. Cada mtodo est associado a um objeto existente no documento fazendo parte do seu escopo de atuao.
Mtodos so funes predefinidas pela linguagem para executar uma operao especfica. Caso necessitamos que algo seja escrito em um documento, podemos utilizar um mtodo para exibir um texto qualquer.
Ateno! Nunca utilize mtodos em objetos que no o contenham, caso contrrio causar erro no script.
Os mtodos so usados comumente para alterar o valor de uma propriedade ou executar tarefas distintas. A sintaxe representada da seguinte forma:
nomeObjeto.metodo(argumento)
Vale ressaltar que o argumento pode ser opcional ou obrigatrio, dependendo do mtodo associado ao objeto. Com essas informaes, voc sabe como formada a linguagem, como o JavaScript foi construdo. Assim, podemos sempre ter em mente que qualquer algoritmo desenvolvido sobre essa linguagem dever sempre respeitar esses padres. O JavaScript pode ser escrito de duas formas: embutida no cdigo HTML ou em um arquivo externo com a extenso js.
82
Ambas as formas no alteram a sintaxe da linguagem. Porm, a forma que feita a referncia necessita de cuidado especial. Quando est embutida no cdigo, devemos utilizar as tags script da seguinte forma:
<html> <head> <title>Teste</title> <script language=javascript type=text/javascript> () </script> </head> <body> (...) </body> </html>
Os atributos language e type no necessitam estar discriminados na tag script, porm a especificao tcnica que foi construda pela ECMAScript recomenda o seu uso. Quando queremos utilizar um arquivo externo, a tag scritpt recebe um novo atributo. Esse atributo onde indicamos o local e o nome do arquivo JS. Quanto ao arquivo, basta escrever o JavaScript normalmente. Veja a seguir:
<html> <head> <title>Teste</title> <script language=javascript type=text/javascript src=tetse.js> </script> </head> <body> ... </body> </html>
Este padro o oficial reconhecido pelas indstrias.
Perceba que, quando chamamos um arquivo externo, a tag no pode conter um script. Caso seja necessrio, basta abrir uma segunda tag script e escrever o cdigo. A tag script pode ser escrita em qualquer parte do cdigo, porm aconselhvel
Unidade 2
83
utilizar antes do corpo da pgina, j que existem formas de realizar as chamadas JavaScript antes do carregamento total da pgina. Desta forma ocorrer um erro caso a chamada venha antes da escrita da funo. Uma prtica que os desenvolvedores utilizam para auxiliar na documentao do cdigo em qualquer software o uso dos comentrios de cdigo. Esse tipo de declarao normalmente feita por meio de comandos especiais em que a linguagem permite que o desenvolvedor adicione qualquer tipo de informao indicado ao interpretador do programa que deve ignorar qualquer tipo de instruo contida. Assim, o JavaScript, como as demais linguagens, permite que seja comentado todo o cdigo que produzimos, tornando-o mais legvel e mais fcil de mant-lo. Um comentrio adequado do cdigo que voc produz torna mais fcil realizar alteraes e melhorias mais tarde. O compartilhamento de cdigos (muito comum no desenvolvimento Web) com outras pessoas torna os comentrios ainda mais importantes para que os outros entendam aquilo que voc escreveu. Em JavaScript podemos usar comentrios de linha e comentrios de bloco. Os comentrios de linha comeam com os caracteres //. Isso d ao interpretador de JavaScript a indicao de que o resto da linha um comentrio. Deste modo, este ignora o resto da linha, continuando a interpretar o cdigo na linha seguinte. Um comentrio de bloco inicia com a abertura do bloco por meio do comando /* e continua at ser encontrada a sequncia de caracteres */, que marcam o fim do comentrio. Ao encontrar a sequncia /*, o interpretador de JavaScript procura imediatamente a sequncia de finalizao */, continuando a a interpretao do cdigo e ignorando o que est no meio. A seguir esto alguns exemplos de comentrios em JavaScript.
84
// Comentrio de linha /* Comentrio de bloco, mas apenas utilizando uma linha */ /* Comentrio de bloco utilizando vrias linhas. Qualquer comando escrito dentro do bloco ignorado pelo interpretador. Inclusive o comando de abertura de bloco /* ou ainda o comentrio de linha // Todas as informaes so ignoradas. */
Os blocos no so exclusividade dos comentrios. Eles so encontrados em diversos comandos do JavaScrpt. Os blocos so encontrados nos laos de deciso e repetio. Ainda so encontrados nas funes para delimitar seu contedo. Isso se consegue colocando-as entre chaves ({ }).
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de bloco</title> </head> <script language=javascript type=text/javascript> function fatorial(valor) { if (valor<2) return valor; return valor*fatorial(valor-1); } function controlador(vl_valor) { return document.form.txt_fatorial.value=fatorial(vl_valor); } </script> <body> <form name=form id=form action= method=get> <table cellpadding=0 cellspacing=0 border=0> <tr> <td> Digite um valor inteiro e positivo</td> <td><input type=text name=txt_valor id=txt_valor value= /></td> </tr> <tr>
Unidade 2
85
<td colspan=2 align=center><input type=button name=btn_calcular id=btn_calcular value=Calcular onclick=controlador(document.form.txt_valor.value) /></td> </tr> <tr> <td> Fatorial</td> <td><input type=text name=txt_fatorial id=txt_fatorial value= readonly=readonly/> <td> </tr> </table> </form> </body> </html>
Veja que nesse exemplo as funes esto delimitadas por blocos e seu contedo interno fica restrito ao bloco.
Seo 2 Tipos de dados

Assim como outras linguagens, o JavaScript possui uma padronizao quanto aos tipos de objetos. Podemos relacionar os tipos: numrico, lgico, caractere. O tipo caractere pode ser chamado tambm como string. Representa uma sequncia de caracteres, podendo esta ser qualquer caractere (pontuao, smbolo, nmeros, letras etc.). O seu limite de contedo depender do navegador que est interpretando. Os seus valores so delimitados por aspas simples ou duplas. Exemplo: texto ou texto. Toda a atribuio realizada a uma varivel contendo uma String contm internamente na linguagem a herana do objeto String. Isso significa que essa varivel tem um comportamento da uma instncia do objeto String, esto aptas a utilizar as propriedades e os seus mtodos.
86
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de String</title> </head> <script language=javascript type=text/javascript> var str = Teste de string!; document.write(Escreve o texto da varivel: ); document.write(str); document.write(<br>); document.write(Escreve uma parte do contedo da varivel: ); document.write(str.substr(9,6)); </script> <body> </body> </html>
Veja que no exemplo anterior est sendo utilizada uma funo chamada write. Essa funo escreve no HTML alguma informao. A varivel str est sendo atribuda com um valor de caractere. Com isso, ela herda os mtodos da classe String e podemos utilizar o mtodo substr, que recupera um pedao de uma string. O resultado no browser :
Figura 2.2 - Exemplo de string. Fonte: Elaborada pelo autor (2010).
Essa caracterstica se assemelha e muito com o mtodo de orientao a objetos. Porm, no se pode considerar uma
Unidade 2
87
linguagem orientanda a objetos, j que no obrigatria sua construo nessa metodologia. Outro tipo de dados de suma importncia so os numricos. Esse tipo de dado armazena valores, tanto inteiros como ponto flutuante (decimal).

23 1 2e10 3.98733 8990.09889 0.0999898
Os valores numricos so utilizados normalmente em operaes aritmticas (adio, subtrao, multiplicao e diviso). Podendo estarem sendo utilizados em laos de deciso e repetio. O JavaScript possui uma boa quantidade de funes para manipulao de valores numricos, como funes trigonomtricas, funes de arredondamento e exponencial, funes de transformao de tipos, entre outras. Existem alguns valores numricos especiais, so eles:
NaN o valor NaN, nos tipos de dados numricos, a abreviao de Not a Number (No um Nmero). O JavaScript apura esse valor normalmente quando ocorre alguma operao invlida com o tipo de dados numricos. Um exemplo clssico o resultado da operao (0/0), resultar no NaN. Infinity: representa um valor infinito, podendo ser tanto positivo quanto negativo. Todas as operaes com valores infinitos resultaro em um valor infinito, exceto diviso e subtrao que resultar no NaN.
88
O JavaScript ainda possui outros tipos de dados, como: Lgicos, Null e Undefined.
Lgicos: os valores lgicos podem assumir dois valores, true (verdadeiro) e false (falso). So utilizados normalmente como controle de deciso. Null: este tipo de dado um valor especial, representa um objeto nulo, no deve ser confundido com uma varivel no inicializada, pois o valor null existe. Portanto, uma varivel com o contedo null existe em memria, referenciando este objeto especial. Undefined: o valor undefined significa que a varivel no foi instanciada, ou seja, no foi atribuda um valor. Inicialmente todas as variveis se encontram neste estado.
Seo 3 Elementos de linguagem

Embora JavaScript tenha algumas semelhanas com outras linguagens, ele uma linguagem diferenciada em alguns aspectos. O JS possui variveis, operadores l gicos, operadores aritmticos, laos de repetio, laos de deciso, entre outros. Nesta seo, abordaremos com mais detalhes alguns desses aspectos.
a) Variveis
As variveis no JavaSscript podem ser de dois tipos: variveis globais e variveis locais. Ambas podem suportar quaisquer tipos de valores. Porm, o que diferencia o escopo e a forma de declarao da varivel. A varivel local para ser declarada deve ser antec edida pela palavra reservada var. Essa declarao pode ser feita a qualquer
Unidade 2
89
momento dentro de uma funo e poder ser acessada somente dentro dela:
var nome; var ano=2009;
Ao tentar acessar uma varivel local fora da funo em que ela foi declarada, ser gerado um erro porque a varivel s existe no universo da funo que foi declarada. Essa varivel no faz parte do mundo exterior a essa funo e como tal no pode ser utilizada. A varivel global deve ser antecedida pela palavra reservada var ou receber uma atribuio de valor. O seu escopo acessvel em toda a pgina, sendo que no transmitida de uma pgina para outra. As variveis podem ser declaradas da seguinte forma:
valor = 19; var numero = 3; fruta = Morango; var fruta2 = Banana; pi = 3.14159;
Nesses exemplos podemos considerar que todas as variveis declaradas sero variveis globais. Como j vimos, para declarar variveis cuja existncia se limita a uma pequena seo do cdigo (varivel local) teremos de usar a declarao var, assim: var numero = 3. Caso usemos essa declarao fora de qualquer funo, isto , a varivel declarada na base da estrutura de cdigo, ela ser global. Temos assim que a declarao var serve para limitar o contexto em que a varivel existe e que:
as variveis declaradas sem a declarao var so variveis globais; as variveis declaradas usando a declarao var existem apenas no contexto em que foram definidas.
90
Antes de comear a escrever cdigo em JavaScript, importante planejar o modo como este ser organizado. Deve-se comear a identificar os dados que sero utilizados. A seguir escolhem-se os nomes das variveis que guardaro esses dados e s depois que se comea a escrever o cdigo propriamente dito. Alm do seu escopo, algumas regras quanto ao nome devem ser respeitadas para que o interpretador possa trabalhar livremente:
todos os nomes tm de comear com uma letra ou com o caractere; os restantes caracteres que compem o nome podem igualmente conter nmeros. Nunca se esquea que para o JavaScript letra maiscula e letra minscula so coisas diferentes e que, por exemplo, as variveis variavel1, Variavel1 e vaRiavel1 so trs objetos distintos.
Muitas vezes nos deparamos com a necessidade de escrever algum caractere dentro de uma String, mas seu uso reservado como o caso das aspas. Para isso, utiliza-se a contrabarra dentro da string. Isso indica para o browser que a sua utilizao faz parte da string, e no um smbolo de comando.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de String</title> </head> <script language=javascript type=text/javascript> var str = O texto contm \aspas duplas\ e aspas simples\; document.write(Verificando o caso das \aspas\<br>); document.write(str); </script> <body> </body> </html>
Voc pode notar que somente obrigatrio o uso da contrabarra quando o interpretador pode confundir o trmino de uma string.
Unidade 2
91
Veja que a string est delimitada por aspas duplas e quando utilizada aspas simples dentro da string o uso da contrabarra opcional. Desta forma, o browser interpretar o comando.
Fig ura 2.3 - Exemplo de contrabarra. Fonte: Elaborada pelo autor (2010).
Assim como outras linguagens, o Javascript necessita de alguns caracteres especiais para poder armazenar ou imprimir alguma informao que tenha conflito com sua linguagem. Veja o quadro a seguir:
Tabela 2 Referente a caracteres especiais. Caractere Descrio \n Insere uma quebra de linha. \t Insere uma tabulao. \r Insere um retorno. \f Insere um caractere de barra. \t Tabulao. \ Apstrofo. \ Aspas. \\ Barra invertida. \XXX Caractere representado pela codificao Latin-1. Exemplo \251 representa o caractere de copyright .
Fonte: Javascript aplicaes interativas para a Web (2006).
Representado os cdigos dentro de um script teramos:
92
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de contra-barra</title> </head> <body> <script language=javascript type=text/javascript> var str=; str+=Teste de\bbackspace\n;// - Representa o backspace (caracter ascii 8) str+=Tabulao entre\ttextos\n;// - Tabulao (caracter ascii 9) str+=quebra de \r pargrafo\n;// Quebra de pargrafo (caracter ascii 13) str+=quebra de\nlinha\n;// Quebra de linha (caracter ascii 10) str+=tabilao\vvertical\n ;// - Tabulao vertical (caracter ascii 11) str+=Caracter unicode \u0198\n;// - Caracter unicode (NNNN representa um valor hexadecimal de 0000 a FFFF) str+=Caracter Asc \x28\n;// - Caracter ascii (NN representa um valor hexadecimal de 00 a FF) str+=Teste de \apstrofo\\n;// - Apstrofo str+=Teste de \aspas\\n;// - Aspas str+=Teste de \\barra inversa\n;// - Barra inversa alert(str); </script> </body> </html>
Unidade 2
93
Figura 2.4 Exemplo do uso de caracteres especiais. Fonte: Elaborada pelo autor (2010)
Perceba que a interpretao dos comandos depende no somente do JavaScript mas do meio que ir ler. Um exemplo seria a quebra de linha: para o JavaScript, a quebra de linha o caractere \n, porm para o browser isso s pode ocorrer por meio do HTML por meio da tag <BR>. Assim como o comando \r, o JavaScript no possui quebra de pargrafo, e no faz sua interpretao. Porm, um comando padro para diversos editores de texto conseguirem identificar essa quebra. Ao se trabalhar com variveis, acaba sendo inevitvel demandar uma ateno especial converso de valores para que determinado valor tenha um comportamento mais adequado ao seu cdigo, apesar de o JavaScript exigir pouco trabalho ao desenvolvedor para definir o tipo de dados que uma varivel deve guardar. Acaba sendo o prprio interpretador de JavaScript que decide o tipo de dados que a varivel ser. Assim, se escrever:
var nota = 9;
O interpretador decidir guardar internamente a varivel nota como um nmero inteiro, mas se escrevermos:
var nota = 9;
94
nota = O JavaScript necessita de ateno.;
Quando o interpretador l a segunda linha de cdigo mudar o tipo de dado da varivel e a varivel nota deixar de ser armazenada como um nmero inteiro. Ela passa a ser armazenada como uma String. Essa converso no tipo da varivel acontece de forma automtica e o desenvolvedor no precisa fazer nada para que ela acontea. Essa liberdade serve apenas para simplificar a escrita do cdigo. Quando mal utilizada, ela pode dar origem a cdigo difcil de ler e a erros. As regras de boa programao dizem que ao definir uma varivel o desenvolvedor deve decidir qual o tipo de dados que esta conter e no dever escrever cdigo que provoque uma converso no tipo de dados que a varivel guarda. Sempre que uma converso for necessria dever ser definida uma nova varivel para guardar o resultado da converso, mantendo inalterados os tipos das variveis antigas. As variveis podem receber diversos tipos de dados. Na prtica esses dados so convertidos em objetos pelo interpretador do JavaScript. Portanto, quando voc define uma varivel do tipo string, o interpretador considerar que essa varivel contm um objeto string. Essa converso proporciona o acesso a diversos mtodos especficos para cada tipo de dados a ser atribudo. Um objeto muito comum na orientao a objetos o this. O objeto this pode ser considerado como coringa. Ele representa o objeto atual de trabalho. Normalmente utilizado no JavaScript para referenciar os argumentos dentro das funes. Ele representa o prprio objeto em que usado. Esse objeto pode ser uma funo, uma ligao de hipertexto, uma imagem etc.
Unidade 2
95
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo Objeto This</title> </head> <script type=text/javascript language=javascript> function testedeobjetos(objeto) { alert(Atributo Type: +objeto.type+\nAtributo Name: +objeto. name+\nAtributo Value: +objeto.value); } </script> <body> <h1>Ao sair do campo ir emitir um alerta informando alguns atributos de cada campo</h1> <form name=form method=get> Cdigo: <input name=txt_codigo type=text value= onblur=testedeobjetos(this) /><br /> Nome: <input name=txt_nome type=text value= onblur=testedeobjetos(this) /><br /> Endereo: <input name=txt_endereco type=text value= onblur=testedeobjetos(this) /><br /> Complemento: <input name=txt_complemento type=text value= onblur=testedeobjetos(this) /><br /> </form> </body> </html>
Observe que o cdigo de chamada da funo no se altera. O objeto this assume por referncia o objeto padro de chamada. No caso do exemplo, a cada chamada ele assume a tag input como sendo o elemento base ao qual est se trabalhando. Quando se altera o objeto, altera o valor representativo do this.
96
Figura 2.5 - Exemplo do objeto this. Fonte: Elaborada pelo autor (2010)
O objeto string possui mtodos que podem ser utilizados em diversas situaes e auxiliam o desenvolvimento das aplicaes. Mtodo
charAt(ndice)
Descrio
Devolve o caractere que ocupa a posio ndice na string. Devolve o cdigo (conjunto Unicode) do caractere que ocupa a posio ndice na string. Devolve a posio em que se encontra a primeira ocorrncia de string_busca ou -1 se essa ocorrncia no existir. Se no fornecermos um ndice_opcional, a busca inicia-se na posio zero, mas se o fornecermos nesse ponto que se inicia a busca. Devolve a posio em que se encontra a ltima ocorrncia de string_busca ou -1 se essa ocorrncia no existir. A busca faz-se a partir do fim e caminha progressivamente para o incio. Se no fornecermos um ndice_ opcional, a busca inicia-se no fim, mas se o fornecermos nesse ponto que se inicia a busca.
charCodeAt(ndice)
indexOf(string_ busca, ndice_ opcional)
lastIndexOf(string_ busca, ndice_ opcional)
Unidade 2
97
Mtodo
Descrio
Divide uma string em partes usando as ocorrncias de string_separador como pontos de diviso. Devolve um array com todas as divises (substrings) encontradas. Cada elemento do array uma substring da string original. O limite_opcional indica o nmero mximo de partes a incluir no array que devolvido. A string_separador excluda das divises e o objeto String sobre o qual foi invocado este mtodo no sofre alteraes. Devolve uma sesso da string composta pelos caracteres que ocupam as posies com ndices entre incio (includa) e fim (excluda). Devolve uma verso da string com todos os caracteres convertidos para letra pequena. Devolve uma verso da string com todos os caracteres convertidos para letra grande.
split(string_separador, limite_opcional)
substring(incio, fim) toLowerCase() toUpperCase()
Fonte: JavaScript e HTML Dinmico (2007).
Toda a varivel do tipo string possui acesso aos mtodos descritos e a alguns outros.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo Mtodos do objeto String</title> </head> <body> <h3>Propriedade length</h3> <script type=text/javascript> var str=No h nada melhor que uma cervejinha gelada na sexta noite.; document.write(A String <b> + str + </b> possui );
98
document.write(str.length+ caracteres);
</script> <h3>Mtodo IndexOf</h3> <h6>Este exemplo verifica se uma string (varivel de texto) contm uma determinada palavra. Se a palavra for encontrada ser indicada a posio em que foi localizado o seu primeiro caractere.<br /> <b>Nota:</b> A posio do primeiro caractere da string 0, no 1. </ h6> <script type=text/javascript> var str=No h nada melhor que uma cervejinha gelada na sexta noite.; var pos=str.indexOf(cervejinha ); if (pos>=0) {
document.write(a palavra cervejinha foi encontrada na posio: ); document.write(pos + <br>);
} else{ document.write(a palavra cervejinha no foi encontrada!);
</script> <h3>Mtodo Match</h3> <h6>Este exemplo verifica se uma palavra (que neste caso gelada) est contida na string. Se estiver ela ser devolvida.</h6> <script type=text/javascript> var str=No h nada melhor que uma cervejinha gelada na sexta noite.; document.write(str.match(gelada)); </script> <h3> Mtodo substring</h3>
Unidade 2
99
<script type=text/javascript> var str=No h nada melhor que uma cervejinha gelada na sexta noite.; document.write(str.substring(27,31) = +str.substring(27,31)); document.write(<br>); document.write(str.substring(27,36)=+str.substring(27,36));
</script> <h3>Converte para Maiuscula e Minscula</h3> <script type=text/javascript> var str=Ol Pessoal do JavaScript!; document.write(str.toLowerCase()); document.write(<br>); document.write(str.toUpperCase());
</script> </body> </html> Fonte: JavaScript e HTML Dinmico (2007).
Figura 2.6 - Propriedades e mtodos de strings. Fonte: Elaborada pelo autor (2010).
100
Alm do objeto string, o JavaScript oferece o objeto date. Esse objeto possui a caracterstica de manipular datas e horas. A definio de valores possvel utilizando valores numricos e datas por extenso. Os mtodos atrelados a esse objeto so:
Mtodo getDate() getDay() getMonth() getFullYear() getYear() getHours() getMinutes() getSeconds() getMilliseconds() getTime() Descrio Devolve o dia do ms (de 1 a 31) que est guardado no objeto Date. Devolve o dia da semana (de 0 = domingo at 6 = sbado) guardado no objeto Date. Devolve o ms (de 0 = janeiro at 11 = dezembro) guardado no objeto Date. Devolve o valor completo do ano (quatro dgitos) guardado no objeto Date. Devolve o valor incompleto do ano (apenas dois dgitos) guardado no objeto Date. No use este mtodo, use getFullYear em seu lugar. Devolve o valor da hora (de 0 a 23) guardada no objeto Date. Devolve o valor dos minutos (de 0 a 59) guardados no objeto Date. Devolve o valor dos segundos (de 0 a 59) guardados no objeto Date. Devolve o valor dos milissegundos (de 0 a 999) guardados no objeto Date. Devolve a quantidade de milissegundos decorridos desde zero hora do dia 1 de janeiro de 1970 at a data que est guardada no objeto Date. Devolve a diferena de tempo entre o fuso horrio do computador que est a ser usado e o Tempo Mdio de Greenwich (Greenwich Mean Time, ou GMT). Devolve o dia do ms (de 1 a 31) guardado no objeto Date medido no padro de tempo universal (UTC). Devolve o dia da semana (de 0 a 6) guardado no objeto Date medido no padro de tempo universal (UTC). Devolve o valor do ms (de 0 a 11) guardado no objeto Date medido no padro de tempo universal (UTC). Devolve o valor completo do ano (com quatro dgitos) guardado no objeto Date medido no padro de tempo universal (UTC).
getTimezoneOffset() getUTCDate() getUTCDay() getUTCMonth() getUTCFullYear()
Unidade 2
101
Mtodo getUTCHours() getUTCMinutes()
Descrio Devolve a hora (de 0 a 23) guardada no objeto Date medida no padro de tempo universal (UTC). Devolve o valor dos minutos (de 0 a 59) guardados no objeto Date medidos no padro de tempo universal (UTC). Devolve o valor dos segundos (de 0 a 59) guardados no objeto Date medidos no padro de tempo universal (UTC). Devolve o valor dos milissegundos (de 0 a 999) guardados no objeto Date medidos no padro de tempo universal (UTC). Acerta o valor do dia (de 1 a 31) do ms guardado no objeto Date. Acerta o valor do ano (com quatro dgitos) guardado no objeto Date. Acerta o valor da hora (de 0 a 23) guardada no objeto Date. Acerta o valor dos milissegundos (de 0 a 999) guardados no objeto Date. Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date. Acerta o valor do ms (de 0 = janeiro a 11 = dezembro) guardado no objeto Date. Acerta o valor dos segundos (de 0 a 59) guardados no objeto Date. Acerta a data e a hora guardadas no objeto Date para o valor correspondente a zero hora do dia 1 de janeiro de 1970 mais o nmero de milissegundos que fornecido como argumento do mtodo. Acerta o valor do ano guardado no objeto Date. No use este mtodo, use antes o mtodo setFullYear. Acerta o valor do dia (de 1 a 31) do ms guardado no objeto Date usando o padro de tempo universal (UTC). Acerta o valor do dia da semana (de 0 = domingo a 6 = sbado) guardado no objeto Date usando o padro de tempo universal (UTC). Acerta o valor do ms (de 0 = janeiro a 11 = dezembro) guardado no objeto Date usando o padro de tempo universal (UTC).
getUTCSeconds()
getUTCMilliseconds() setDate(dia_ms) setFullYear(ano) setHours(horas) setMilliseconds(milisegundos) setMinutes(minutos) setMonth(ms) setSeconds(segundos)
setTime(data_numrica)
setYear(ano) setUTCDate(dia_ms) setUTCDay(dia_semana)
setUTCMonth(ms)
102
Mtodo setUTCFullYear(ano) setUTCHour(horas) setUTCMinutes(minutos) setUTCSeconds(segundos) setUTCMilliseconds(milisegu ndos) toGMTString() toLocaleString() toUTCString()
Descrio Acerta o valor do ano (com quatro dgitos) guardado no objeto Date. Acerta o valor da hora (de 0 a 23) guardada no objeto Date usando o padro de tempo universal (UTC). Acerta o valor dos minutos (de 0 a 59) guardados no objeto Date usando o padro de tempo universal (UTC). Acerta o valor dos segundos (de 0 a 59) guardados no objeto Date usando o padro de tempo universal (UTC). Acerta o valor dos milissegundos (de 0 a 999) guardados no objeto Date usando o padro de tempo universal (UTC). Devolve uma representao textual (a data e a hora escritas por extenso) usando como referncia o fuso horrio do Tempo Mdio de Greenwich (GMT). Devolve uma representao textual (a data e a hora escritas por extenso) no fuso horrio do computador local. Fornece uma representao textual (a data e a hora escritas por extenso) da data contida no objeto Date medida no padro UTC.
A utilizao do objeto date, assim como seus mtodos, feita de forma simplificada.
Unidade 2
103
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplos objeto Date</title> </head> <body> <h3>Mostrar o dia da semana</h3> <script type=text/javascript> var d = new Date(); var dia = d.getDay(); document.write(O nmero do dia da semana de hoje +dia);
// Para obtermos o nome do dia, criamos um Array em que Domingo ocupa a // posio 0, segunda ocupa a posio 1, ...
var nomesDias=new Array(Domingo,Segunda-feira,Terafeira,Quartafeira,Quinta-feira,Sexta-feira,Sbado); document.write(<br><br>O nome do dia de hoje +nomesDias[dia]);
</script> <h3>Obter a hora marcada pelo relgio do seu computador</h3> <script type=text/javascript> var d = new Date(); document.write(d.getHours()+ horas ); document.write(d.getMinutes()+ minutos ); document.write(d.getSeconds()+ segundos);
</script> <h3>Criar uma data com um valor predefinido</h3> <script type=text/javascript> var data1 = new Date(Fri, 21 Nov 2003 10:43:34 UTC); document.write(A data1 : +data1.toLocaleString());
104
document.write(<br><br>); var data2 = new Date(1069411529550); document.write(A data2 : +data2.toLocaleString());
</script> <h3>Estabelecer o ano para uma data</h3> <script type=text/javascript> var d = new Date(); d.setFullYear(1998); document.write(d.toLocaleString());
</script> <h3>Escrever a data completa com os nomes do dia e do ms</h3> <script type=text/javascript> var d = new Date(); var dia = d.getDay(); var mes = d.getMonth(); var ano = d.getFullYear();
// Para obtermos o nome do dia criamos um Array em que domingo ocupa a // posio 0, segunda ocupa a posio 1, ...
var nomesDias=new Array(Domingo,Segunda-feira,Terafeira,Quartafeira,Quinta-feira,Sexta-feira,Sbado); var nomesMeses=new Array(Janeiro,Fevereiro,Maro,Abril,Maio,J unho,Julho,Agosto,Setembro,Outubro,Novembro,Dezembro); var s=Hoje +nomesDias[dia]+, +d.getDate(); s+= de +nomesMeses[mes]+ de +ano; document.write(s);
</script> </body> </html> Fonte: JavaScript e HTML Dinmico (2007).
Unidade 2
105
Figura 2.7 - Mtodos e atributos de data. Fonte: Elaborada pelo autor (2010).
Um tipo especial de varivel o tipo de vetor ou cadeia de variveis. Um vetor um objeto capaz de guardar muitos valores, tantos quanto a memria disponvel na mquina permitir. Um vetor caracterizado como lacunas indexadas na memria que armazenam um conjunto finito de valores. Cada uma dessas lacunas que compem o vetor possui um ndice.
106
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de Array</title> </head> <body> <script type=text/javascript language=javascript> var numeros_primos = new Array( 2, 3, 5,7); var nomes = new Array(3); nomes[0] = Joo; nomes[1] = Maria; nomes[2] = Joaquim; for (var i=0; i<numeros_primos.length; i++) document.write(Posio +(i+1)+ :+numeros_primos[i]+<br>); </script> <br /> <script type=text/javascript language=javascript> for (var i=0; i<nomes.length; i++) document.write(Posio +(i+1)+ :+nomes[i]+<br>); </script> </body> </html>
Ao ser declarada a varivel numeros_primos, declaramos o Array (vetor) e atribumos os valores em uma nica operao. J no segundo caso, declaramos primeiro o Array e somente depois definimos os valores que ele deve conter. O browser interpretar da seguinte forma:
Unidade 2
107
Figura 2.8 - Exemplo de array Fonte: Elaborada pelo autor (2010).
J vimos que o JavaScript converte o tipo de dados conforme a atribuio que realizamos, por isso um array pode conter valores de tipos diferentes em cada lacuna. Podemos alterar sempre que necessrio, como mostra a seguir:
108
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo converso de dados no Array</title> </head> <body> <script type=text/javascript> var produto = new Array(45, Morango, false, 1.25, Biscoito, Wafer); document.write(Produto = + produto); produto[0] = 2; produto[2] = true; produto[6] = Bolacha; document.write(<br>); document.write(Produto = + produto); </script> </body> </html>
Quando atribuirmos um valor a um elemento do vetor com um ndice mais alto do que o seu comprimento, o interpretador do JavaScript aumenta o tamanho do vetor at chegar ao ndice pretendido. isso que acontece no exemplo anterior quando se chega linha que tem:
produto[6] = Bolacha;
Unidade 2
109
Figura2.9 -Manipulao de arrays. Fonte: Elaborada pelo autor (2010).
Os vetores so objetos e algumas propriedades entre as quais a length utilizada para contar o nmero de elementos dentro de um vetor. Assim, se ao exemplo anterior juntarmos uma linha com o seguinte cdigo:
var numeroDeElementos = produto.length;
A varivel numeroDeElementos ficar com o valor 7. Entenda que a propriedade length no l os ndices, mas conta o nmero de elementos no vetor. Lembre-se sempre que ndice e tamanho so diferentes.
110
O array um objeto e como tal possui propriedades que auxiliam no desenvolvimento de aplicaes.
Propriedade length Mtodo join() reverse() sort() Descrio Fornece o nmero de elementos que esto no Array. O valor desta propriedade estabelecido quando o Array criado, mas pode crescer se formos juntando mais elementos ao Array. Descrio Devolve uma String (varivel de texto) que representa o contedo do Array. Devolve um novo Array em que a ordem dos elementos est invertida (em particular temos que o elemento que tinha o ndice zero passa a ter o ndice mais alto e vice-versa). Devolve um novo Array em que os elementos esto ordenados (geralmente por ordem crescente).
Utilizando o mtodo de ordenao sobre um objeto array teramos:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo ordenao array</title> </head> <body> <script type=text/javascript> var fruta = new Array(Laranja,Banana,Morango,Abacaxi,Ma,K iwi); var numeros = new Array(27, 12, 15, 6, 2, 6); </script> <table border=1>
Unidade 2
111
<tr> <th colspan=2>Ordenar Strings</th> <th colspan=2>Ordenar Nmero</th> <tr> <td width=140><b>Ordem normal</b></td> <td><b>Ordem alfabtica</b></td> <td width=140><b>Ordem normal</b></td> <td><b>Ordem alfabtica</b></td> </tr> <td>
<script type=text/javascript> for (var i=0; i<6; i++) document.write(fruta[i] + <br>) </script> </td> <td> <script type=text/javascript> // Agora ordenamos o Array por ordem alfabtica invocando o // mtodo sort() fruta.sort() for (var i=0; i<6; i++) document.write(fruta[i] + <br>) </script> </td> <td>
<script type=text/javascript> <!-for (var i=0; i<6; i++) document.write(numeros[i] + <br>) // -->
112
</script> </td> <td>
<script type=text/javascript> <!-// Agora ordenamos o Array por ordem alfabtica invocando o //mtodo sort() numeros.sort() for (var i=0; i<6; i++) document.write(numeros[i] + <br>) // --> </script> </td> </tr> </table> </body> </html>
Figura 2.10 - Propriedade e mtodos do array. Fonte: Elaborada pelo autor (2010).
Unidade 2
113
b. Operadores
Os operadores so instrues utilizadas em expresses para valid-las ou calcul-las. H dois tipos de operadores: lgicos e aritmticos. Os operadores lgicos so aqueles destinados a realizar comparaes entre expresses. Normalmente essas comparaes esto associadas aos laos de condicionais e os de repetio. Os operadores mais usados so:
Tabela 3 Operadores lgicos. Operador && ou AND || ou OR ! ou NOT > < >= <= = == === != Descrio E OU NO Maior que Menor que Maior ou igual Menor ou igual Atribuio Igualdade Idntico (valor e tipo) Diferente
Como exemplo, temos:
114
<html> <head> <title>Teste</title> <script language=javascript type=text/javascript> var exemplo1= A; if (exemplo1==A) { alert(A condio verdadeira); } else { alert(A condio falsa); } </script> </head> <body> ... </body> </html>
Os operadores aritmticos, como o prprio nome j diz, so usados em operaes matemticas. Veja a relao dos principais operadores:
Tabela 4 Operadores aritmticos Operador + * / % Descrio Adio Subtrao Multiplicao Diviso Resto da diviso
Unidade 2
115
O operador + usado como concatenador de expresses. Portanto, se voc usar esse operador em uma expresso como esta: 1+1 o resultado ser 11.
O Javascript suporta ainda os operadores de incremento que so um contrao ou atalho para uma operao. Ou seja, quando queremos realizar um contador aem vez de somar um a um a varivel, podemos usar esse operador. A sintaxe :
varivel++ varivel--
c. Lao de deciso
O lao de deciso no JavaScript representado pela instruo if. Essa instruo permite executar um bloco de cdigo apenas se for verdadeira uma determinada condio. Caso a condio no seja verdadeira, esse bloco de cdigo no ser executado, podendo ser ou no executado outro cdigo alternativo, que ser especificado por meio da instruo else.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de lao de deciso</title> </head> <body> <script type=text/javascript language=javascript> function verifica(campo) { } if(campo[0].checked) alert(Levar um gurada-chuva); else alert(Deve estar quente!);
116
</script> <form name=form id=form> Est chovendo? <p> <label> <input type=radio name=chuva value=s id=chuva_0 onchange=verifica(document.form.chuva)/> Sim</label> <br /> <label> <input type=radio name=chuva value=n id=chuva_1 onchange=verifica(document.form.chuva)/> <br /> </p> <input type=button name=consultar value=Consultar onclick=verifica(document.form.chuva)/> </form> </body> </html>
O exemplo trata de uma interao com o usurio sobre o tempo. A resposta do usurio resultar em um teste lgico que mostrar uma mensagem de retorno. O browser interpreta da seguinte forma:
Unidade 2
117
Figura 2.11 - Exemplo do controlador IF. Fonte: Elaborada pelo autor (2010).
Uma instruo if no precisa ser associada a uma instruo else. Quando isso acontece, caso a condio no seja verdade, no ser executado qualquer cdigo alternativo. O interpretador apontar imediatamente a instruo aps o trmino do comando if. Outro lao de repetio suportado pelo JavaScript o switch. Esse lao no faz parte do padro ECMAScript, porm suportado pela maioria dos browsers. O switch possui a caracterstica de comparar uma varivel com diversos valores, executando blocos independentes para cada valor verdadeiro. Em casos como esse, o switch torna-se mais eficiente que a instruo if por possuir uma construo mais simplificada e organizada.
118
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de Switch</title> </head> <script language=javascript type=text/javascript> function testacor(campocor) { switch (campocor) { case azul: alert(O Azul pode ser usado para escrever um documento); break;
case vermelho: alert(O Vermelhor utilizado em correo); break;
case verde: alert(O Verde utilizado para marcao); break;
case amarelo: alert(O Amarelo utilizado para destacar texto); break;
default : alert(O Preto o padro); break;
} </script> <body> }
<form name=form action= method=get>
Unidade 2
119
Escolha uma cor: <select name=cor onchange=testacor(this.value)> <optgroup style=color:#000> <option value= selected=selected>Preto</option> </optgroup> <optgroup style=color:#009> <option value=azul>Azul</option> </optgroup> <optgroup style=color:#F00> <option value=vermelho>Vermelhor</option> </optgroup> <optgroup style=color:#0F0> <option value=verde>Verde</option> </optgroup> <optgroup style=color:#FF0> <option value=amarelo>Amarelo</option> </optgroup> </select> </form> </body> </html>
Perceba que o switch abre um bloco e dentro dele so inseridas as constantes a serem testadas. Cada constante precedida da instruo case e deve abrir um novo bloco de comando interno. Neste caso, usa-se o caractere dois pontos (:). O bloco de instruo de cada case deve ser encerrado com a instruo break, que indica uma interrupo da execuo de blocos. O browser interpreta da seguinte forma:
120
Figura 2.12 Exemplo do controlador switch. Fonte: Elaborada pelo autor ( 2010).
d. Laos de repetio
Os laos de repetio caracterizam-se por repetir um bloco de instruo um nmero finito de vezes. O bloco utiliza o delimitador de funo {} para definir o escopo do trabalho. Caso este seja omitido, a primeira linha seguinte instruo ser a nica dentro do lao. Um dos laos mais utilizados o lao for. Esse lao caracterizase por utilizar um contador numrico para limitar o nmero de iteraes. Ainda possui um conjunto de trs expresses contidas entre parntesis, separadas pelo caractere ponto e vrgula e pelo cdigo a executar em cada um dos laos. A primeira das expresses do lao for declara a varivel para utilizar como ndice inicializando-a. A segunda expresso declara uma condio que deve ser testada sempre que se inicia uma nova iterao. Se essa condio resultar em false, o lao ir parar e o cdigo definido abaixo no voltar a ser executado. A terceira expresso serve para atualizar o valor do ndice no final de cada ciclo.
Unidade 2
121
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo lao for</title> </head> <body> <script type=text/javascript language=javascript> for (var i=0; i<20; i++) { document.write(O do ndice : +i+<br>); } </script> </body> </html>
O resultado no browser :
122
Figura 2.13 - Exemplo do lao FOR. Fonte: Elaborada pelo autor (2010).
Esse exemplo mostra o lao de repetio for, como ele percorre o contador e a condio nele atribuda. Um outro exemplo seria:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de lao de repetio</title> </head> <script language=javascript type=text/javascript> function validarEntero(valor){ } valor = parseInt(valor); if (isNaN(valor)) { return ; } else { return valor; }
Unidade 2
123
function validarFormulario(campo){ } textoCampo = campo.value; textoCampo = validarEntero(textoCampo); campo.value = textoCampo;
function repete(rept, numero, result) { var repeticoes= rept.value; var inteiro = parseInt(numero.value); var resultado=0;
for (var i=1;i<=repeticoes;i++) resultado=resultado+(inteiro*repeticoes);
result.value=resultado;
</script> <body> <form method=post name=form1> Digite um nmero inteiro <input type=text name=inteiro value= onkeyup=validarFormular io(this) style=text-align:right;/> <br /> Escolha o nmero de repeties voc deseja <select name=repeticoes onchange=repete(this,document.form1. inteiro,document.form1.resultado)> <option value= selected> </option> <option value=1>UM</option> <option value=2>DOIS</option>
124
<option value=3>TRS</option> </select> <br /> Resultado da operao acumulada de (Repetio * Inteiro)<br> <input type= text name=resultado value= style=text-align:right; readonly=true /> </form> </body> </html>
No browser fica desta forma:
Figura 2.14 - Lao FOR sem bloco. Fonte: Elaborada pelo autor ( 2010).
Nesse exemplo simples, possvel verificar todos os laos e algumas funes. A funo isNaN testa um valor a fim de verificar se ele um nmero. A funo parseInt transforma uma expresso em um nmero possvel. Por fim, a funo this uma palavra reservada para referenciar o objeto corrente, neste caso, o campo do formulrio que est chamando a funo.
Unidade 2
125
Outras funes, como o parseInt, esto disponveis para o Javascript. Ainda possui a funo indexOf sendo muito til em condies. Pesquise sobre seu funcionamento e teste-a.
Outro lao de repetio importante o while. Esse lao muito parecido com o lao for. Na realidade, tudo o que um faz pode ser feito com o outro, embora por questes de legibilidade cada um deles possa ter reas de aplicao que para as quais mais indicado do que o outro. O lao while avalia uma condio e, se ela resultar em true, executa o bloco de cdigo que vem imediatamente a seguir. Caso resulte em false, o interpretador posiciona na instruo imediatamente aps o lao e continua a execuo.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo lao while</title> </head> <body> <script type=text/javascript language=javascript> var i=0; while (i<20) { } </script> </body> </html> document.write(O do ndice : +i+<br>); i++;
126
Figura 2.15 Lao WHILE. Fonte: Elaborada pelo autor (2010).
O resultado nesse caso idntico ao lao for. Porm, ntido que a complexidade envolvida nesse cdigo superior ao do lao for. Mesmo assim, quando voc tem a necessidade de utilizar um lao de deciso em que no seja necessrio um contador, o lao while a melhor soluo. Um terceiro lao que o JavaScript comporta o do..while. Esse lao irmo do lao while, possui uma sutil, mas importante, diferena. Para o lao while ser executado uma primeira vez, necessrio que a condio seja atendida ao menos uma vez. O lao do..while executa sempre uma vez antes de testar a condio. Isso possvel porque a condio verificada aps o bloco de comando. Diferente de seu irmo while, que testado antes do bloco iniciar.
Unidade 2
127
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo do..while</title> </head> <body> <script language=javascript type=text/javascript> var i = 0; while (i<8) { document.write(Intruo while executada vale: +i+, condio atendida<br>); } i = 0; do { document.write(Intruo do..while executada contador vale: +i+, condio atendida<br>); i++ i++;
} while (i<8) document.write(Quando a condio no atendida<br>Os laos so executados novamente neste exemplo.<br>); document.write(Porm a varivel no zerada, vejamos como se comporta<br><br>); // Condio NO atendida while (i<8) { document.write(Intruo while executada +i+ vez, condio NO atendida<br>);
128
i++;
do { document.write(Intruo do..while executada vale: +i+, condio NO atendida<br>); i++
} while (i<8) </script> </body> </html>
Nesse exemplo, a situao foi forada para voc perceber a diferena. Via de regra, voc pode adotar que o while deve ser usado sempre que um bloco do lao de repetio necessite de uma condio verdadeira para executar ao menos uma vez. O do..while deve ser construdo quando um bloco do lao necessite ser executado ao menos uma vez mesmo que uma condio no seja atendida. No browser, o resultado do exemplo fica:
Figura 2.16 - Comparao de estruturas while e do while. Fonte: Elaborada pelo autor (2010).
Unidade 2
129
e. Funes
Uma funo um bloco de cdigo que necessita ser chamado para executar uma determinada operao. Em JavaScript, esse artifcio amplamente utilizado, j que a maior utilizao dessa linguagem a interao com o usurio. As funes possuem uma declarao de nome e uma delimitao de bloco por meio do caractere {}. O bloco pode conter uma infinidade de instrues para execuo de seu cdigo. O retorno de informaes opcional e deve ser feito pela instruo return.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de Funo sem argumento</title> </head> <script type=text/javascript language=javascript> function testefuncao() { return A funo foi chamada; } </script> <body> <h1>Vejamos um teste de funo sem argumento!</h1> <script type=text/javascript language=javascript> document.write(testefuncao()); </script> </body> </html>
Veja que, alm do nome da funo, necessrio utilizar a entrada de parmetros que est entre parnteses. Desta forma, a funo chamada e seu retorno pode ser atribudo a uma varivel. O
130
browser interpreta como se a instruo estivesse sendo escrito diretamente na funo write.
Figura 2.17 - Chamada de funo. Fonte: Elaborada pelo autor (2010).
As funes ainda podem receber argumentos ou parmetros. Esses argumentos so variveis que recebem valores passados durante a chamada da funo. Isso possibilita o processamento do cdigo utilizando variveis locais com valores globais. O seu cdigo permanecer mais limpo e fcil de interpretar, sem questionar a diminuio da incidncia de erro ao utilizar variveis globais dentro das funes.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo Funo com argumentos fixo</title> </head> <script type=text/javascript language=javascript>
Unidade 2
131
function autosoma(valor) { var soma=0; do { soma += valor; valor--;
} while (valor>0) return soma;
function atribuircampo(campovalor, camporetorno) { } </script> <body> <h1>Funo com argumento fixo</h1> <form name=form method=get> Digite um nmero: <input type=text name=txt_valor id=txt_valor value= align=right /> <input type=button name=btn_calcular value=Calcular onclick=atribuircampo(document.form.txt_valor , document.form. txt_resultado)/><br /><br /> Resultado: <input type=text name=txt_resultado id=txt_ resultado value= readonly=readonly /> </form> </body> </html> camporetorno.value = autosoma(parseInt(campovalor.value));
Nesse exemplo, est sendo utilizada uma funo sem retorno (atribuicampo). Essa funo est recebendo dois argumentos, a diferena que esses argumentos no so valores, mas objetos do formulrio. O JavaScript realiza uma referncia com o objeto, ou seja, todos os atributos e mtodos associados a esse objeto so
132
propagados para o argumento, assim como qualquer alterao de valores ou estados refletida diretamente no objeto HTML. A segunda funo feita uma chamada com argumento. Mas este no passado um objeto, mas sim um valor. Assim o JavaScript interpreta que o valor foi passado por cpia e qualquer alterao nesse valor no influencia no ser progenitor, nesse caso, o campo txt_valor.
Figura 2.18 - Funo de retorno. Fonte: Elaborada pelo autor (2010).
Os argumentos so extremamente teis e muitas vezes necessrios. Mas imagine que seja necessrio que se faa uma funo que some qualquer cadeia de nmeros. Ou seja, uma funo que aceite receber qualquer nmero de argumentos e trabalhe com todos de forma dinmica. O JavaScript resolve esse problema com uma propriedade de todas as funes: o arguments. Essa propriedade atribui um array de argumentos que esto disponveis em dentro da funo.
Unidade 2
133
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo Funo argumento varivel</title> </head> <script type=text/javascript language=javascript> function autosoma() { var soma=0; for (var i=0; i<autosoma.arguments.length; i++) { soma += parseInt(autosoma.arguments[i]); } return soma; } </script> <body> <script type=text/javascript language=javascript> document.write(Chamada da funo, somar 1,5,6,7,8 = +autosoma(1,5,6,7,8)); document.write(<br>); document.write(Chamada da funo, somar 67, 8, 9 ,7 , 5, 7 ,9 = +autosoma(67, 8, 9 ,7 , 5, 7 ,9)); document.write(<br>); document.write(Chamada da funo, somar 7, 9, 5 = +autosoma(7, 9, 5)); </script> </body> </html>
Veja que nesse exemplo so passados diversos argumentos diferentes, quanto a valores e a nmero de argumentos. A
134
declarao da funo no est esperando nenhum argumento definido. Porm, por meio do atributo arguments, podemos acessar todos os argumentos transmitidos.
Figura 2.19 - Funo com argumentos genricos. Fonte: Elaborada pelo autor (2010)
e. Eventos
Como em outras linguagens, o Javascript possui manipulao de eventos. Esses eventos so as aes e as reaes que executam um determinado procedimento. Os eventos so quaisquer aes iniciadas pelo usurio (clicar em determinada rea da pgina, por exemplo) e normalmente so utilizados para realizar as chamadas das funes Javascript. A utilizao do evento feita como um atributo de uma tag HTML. A sintaxe feita da seguinte forma:
<tag Evento=chamada javascript>
A tabela a seguir representa os eventos mais comumente utilizados:
Unidade 2
135
Tabela 1 Eventos e manipuladores. EVENTO Blur Change Click Focus Load Unload MouseOver MANIPULADOR onBlur onChange onClick onFocus onLoad onUnload onMouseOver DESCRIO Ocorre quando o usurio retira o foco de um objeto de formulrio. Ocorre quando o usurio muda o valor de um objeto de formulrio. Ocorre quando o usurio clica sobre o objeto. Ocorre quando o usurio focaliza o objeto. Ocorre quando o usurio carrega a pgina. Ocorre quando o usurio abandona a pgina. Ocorre quando o ponteiro do mouse passa sobre um link ou uma ncora. Vlidos apenas para hiperlinks. Ocorre quando o usurio seleciona um elemento de um formulrio. Ocorre quando o usurio envia um formulrio. Ocorre quando o boto do mouse pressionado. Ocorre quando o ponteiro do mouse se movimenta sobre o objeto. Ocorre quando o ponteiro do mouse afasta de um objeto. Vlidos apenas para hiperlinks. Ocorre quando o boto do mouse solto. Ocorre quando uma tecla segurada. Ocorre quando uma tecla pressionada. Ocorre quando uma tecla solta.
Select Submit MouseDown MouseMove MouseOut
onSelect onSubmit onMouseDown onMouseMove onMouseOut
MouseUp KeyDown KeyPress KeyUp
onMouseUp onKeyDown onKeyPress onKeyUp
Fonte: Javascript aplicaes interativas para a Web (2006).
Existem eventos que so especficos para cada tag. A utilizao de um evento em uma tag que no o suporta acarretar em no
136
ativao do script. Veja ento a utilizao de um evento dentro do cdigo HTML:

<html> <head> <title>Teste</title> </head> <body onload=defaultStatus=(Seja bem vindo) onunload=alert(At mais)> ... </body> </html> O browser Firefox traz por default o bloqueio para alterao na barra de status. Para visualizar o exemplo, necessrio habilit-lo nas opes do browser.
Esses dois eventos so caractersticos da tag body. Eles so ativados quando a pgina carregada e quando descarregada do browser. Perceba que diretamente no houve uma ao direta do usurio, porm, considera-se uma ao do usurio o acesso e a sada da pgina.
Existem muitos outros eventos na linguagem. Alguns somente so portados em algumas verses de browser e outros somente em um tipo de browser. Procure pesquisar a fim de conhecer esses eventos e quais se adaptam melhor s suas necessidades.
Unidade 2
137
Seo 4 Scripts JS
Nesta seo, vamos utilizar o JS na prtica, realizando algumas validaes de campos. Assim, poderemos ver como utilizar o JS na sua principal funo. Voc j viu um exemplo para validar um campo somente numrico. Podemos comear ento acrescentando uma mscara para um campo de valores, como um campo de fone:
<html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Mascara de fone</title> <script language=javascript type=text/javascript> function mascarafone(objeto) { var aux; aux = ( + objeto.value.substr(0,2) + ); aux += objeto.value.substr(2,4)+- + objeto.value.substr(6,4); objeto.value = aux; </script> </head> <body> <form name=form1> <input type=text onblur=mascarafone(this);> </form> </body> </html>
Nesse exemplo, podemos ver que o evento associado chamada da funo o Blur. Portanto, a mscara somente ser executada quando o campo perder o foco, ou seja, quando o cursor sair do campo ser chamada a funo.
138
Outra funo usada foi a substr. Essa funo pega um pedao da literal que inicia na posio do primeiro argumento e o segundo argumento indica o nmero de caractere ser capturado. Vale ainda comentar que essa mscara visa colocar caracteres no formato dos fones. Vamos agora criar um script simples de validao de campos. Neste exemplo, no vamos nos preocupar com o tipo de dados apenas verificar se os itens obrigatrios esto preenchidos. Antes de iniciar, vale lembrar que os atributos das tags HTML no possuem validao, ou seja, posso criar qualquer atributo que eu venha a desejar. Ento, vamos ao script:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Validao dos campos</title> <script language=javascript type=text/javascript> function valida(objeto) { //a proriedade elements permite acessar todos os objetos existentes em forma de vetor. Assim, podemos colocar todos os objeto dentro de um lao acessando cada um sem saber qual o nome. var elementos = objeto.elements; var resp= for (var i=0; i< elementos.length; i++){
//neste exemplo, estamos validando apenas os campos do tipo text e que tem no atributo que foi criado obrigatorio igual a S, assim com uma nica funo podemos acrescentar vrios campos sem necessitar alterar a funo if ((elementos[i].getAttribute(type)==text)&& (elementos[i].getAttribute(obrigatorio)==S) &&
Unidade 2
139
(elementos[i].value==)) {
//style o objeto referente aos estilos CSS, neste caso estamos trocando a cor de fundo elementos[i].style.backgroundColor = #ffffcc;
resp+=O campo +elementos[i].getAttribute(descr) + obrigatorio.\n; } </script> </head> <body>  <form id=form1 name=form1 method=post action=www.google. com.br onsubmit=return valida(this);> <p>Nome: <label> <input type=text name=nome id=nome obrigatorio=S descr=O nome deve ser preenchido /> </label> </p> <p>Apelido: <label> <input type=text name=apelido id=apelido /> </label> } return true; } if (resp!=) { alert(resp); return false; }
140
</p> <p> Ano de nascimento <input name=ano type=text id=ano maxlength=4 obrigatorio=S descr=Ano deve ter especificamente 4 caracteres /> </p> <p> <label> <input type=submit name=button id=button value=Enviar /> </label> </p> </form> </body> </html>
Figura 2.20- Validao de campo. Fonte: Elaborada pelo autor (2010).
Unidade 2
141
Vamos para algo mais complexo: vamos verificar um script montado por terceiros, j que ser o mais comum a se encontrar na internet. Vamos tentar avaliz-lo e entend-lo:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Mascara de moedas</title> </head> <script language=javascript> //----------------------------------------------------//Funcao: MascaraMoeda //Sinopse: Mascara de preenchimento de moeda //Parametro: // objTextBox : Objeto (TextBox) // SeparadorMilesimo : Caracter separador de milsimos // SeparadorDecimal : Caracter separador de decimais // e : Evento //Retorno: Booleano //Autor: Gabriel Fres - www.codigofonte.com.br //Comentrios: Edson Lessa //----------------------------------------------------function MascaraMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ; var i = j = 0; var len = len2 = 0; // Caracteres vlidos durante a digitao
142
var strCheck = 0123456789; var aux = aux2 = ; // o comando ? possui a mesma funo do if, basicamente pode se trocar esta linha por // if ( (window.Event)==true) { var whichCode=e.which; } else { var whichCode=e.keyCode; } var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; // Valor para do nmero que foi digitado key = String.fromCharCode(whichCode); //verifica se o caracter est presende nos cacteres vlidos if (strCheck.indexOf(key) == -1) return false; // Chave invlida //length retorna o tamanho de caracters de uma expresso len = objTextBox.value.length; for(i = 0; i < len; i++) { //charAt o mtodo que retornar um caractere da posio indicada. Lembrando que o nmero da posio contado da esquerda para direita e inicia com 0. //esta parte do cdigo responsvel pela separao do inteiro e do decimal if ((objTextBox.value.charAt(i) != 0) && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; } aux = ; for(; i < len; i++) { //armazena na varivel aux os nmeros validos j digitados
if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); } //adiciona a ltima tecla digitada aux += key; //total de nmeros digitados
Unidade 2
143
len = aux.length; //este bloco adiciona zeros para os primeiros nmeros decimais digitados if (len == 0) objTextBox.value = ; if (len == 1) objTextBox.value = 0+ SeparadorDecimal + 0 + aux; if (len == 2) objTextBox.value = 0+ SeparadorDecimal + aux; //acrescenta do separador de milhar if (len > 2) { aux2 = ; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); //acrescenta smbolo do decimal nos dois ltimos caracteres objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; } </script> <body> Exemplo de utilizao: <form>
144
Valor R$: <input type=text name=valor onKeyPress=return(MascaraMoeda(t his,.,,,event)) style=text-align:right;> </form> </body> </html>
Perceba que nesse script estamos trabalhando diretamente com a captura das informaes digitadas pelo usurio por meio do evento onKeyPress e da funo event. Perceba tambm que estamos quebrando a cadeia de caracteres por meio do mtodo charAt para que seja possvel trabalh-la individualmente facilitando o processamento.
Existe mais de uma forma de se fazer uma casa. Procure outras formas de validao de campos e mscaras. Perceba que, por mais diferentes elas podem parecer, em sua essncia so todas iguais.
O JavaScript uma poderosa ferramenta a nosso dispor. Aprimorar e alcanar seus limites depende muito mais da criatividade do desenvolvedor. A internet est repleta de cdigos prontos disponibilizados por desenvolvedores para que no seja necessrio reinventar a roda. Procure sempre explorar novos horizontes.
Unidade 2
145
Sntese
O JavaScript uma linguagem orientada a objetos, porm possui recursos limitados que so predefinidos pela prpria linguagem. O JavaScript procura transformar todo o contedo HTML em objeto, para assim simplificar a sua manipulao. Toda a estrutura de variveis segue essa linha de objetos, porm a construo da aplicao com essa linguagem feita utilizando a forma estruturada. Esse mtodo simplifica a construo e o entendimento. As variveis podem ser do tipo string (caractere), date (data), array (cadeia de variveis), int (inteiro) ou boolean (lgico). Cada qual herda os mtodos e a propriedade respectiva de seus objetos. As funes so amplamente utilizadas por causa de a linguagem ser utilizada para interagir com o usurio. Os eventos existentes proporcionam um leque razovel de opes para interagir com as aes dos usurios.
Ao final de cada unidade, voc ser desafiado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico. Esforce-se para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem. 1. Faa um script para validar um formulrio que contenha nome, endereo, nome da me, idade e e-mail. Os campos obrigatrios so nome, nome da me, idade e e-mail. Valide a idade para aceitar somente inteiros positivos e entre 10 e 120 anos. O e-mail deve ser validado de tal forma que deve conter o caractere @ e pelo menos um ponto aps o @. Publique sua resposta na ferramenta Exposio do EVA. 2. Crie um formulrio que contenha um elemento textarea. Voc deve utilizar esse elemento para inserir informaes em uma tag div por meio do JavaScript. Publique o script na ferramenta exposio do EVA.
146
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: Cdigo Fonte, 2010. Disponvel em <http://codigofonte.uol.com. br/artigos/javascript-dhtml>. Acesso em: 01 mar. 2010. Truquese Dicas: Tutoriais de Javascript, 2010. Disponvel em <www.truquesedicas.com/tutoriais/javascript>. Acesso em: 2 mar. 2010. jsfromhell.com JavaScript Repository, 2010. Disponvel em: <http://jsfromhell.com/>. Acesso em: 15 mar. 2010.
Unidade 2
147
unidade 3
PHP
Saiba utilizar contedo dinmico. Conhea variveis, constantes e escopo de ao. Compreenda uso de operadores e expresses. Identifique e desenvolva os laos de deciso e repetio. Desenvolva aplicaes Serve-side.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 Seo 5 Viso geral Variveis e constantes Operadores Estruturas de controle Trabalhando com arquivos

Voc j observou que o desenvolvimento de uma aplicao para Web possui inmeras vantagens. Verificou a aplicabilidade dessa plataforma para o desenvolvimento de aplicaes de pequeno e grande porte. Estudou sobre o HTML e o JavaScript, que so linguagens client-side. Agora entraremos em um universo um pouco diferente, uma linguagem serve-side. Uma linguagem serve-side consiste em trabalhar diretamente no servidor de aplicao. Esse tipo de linguagem proporciona recursos de processamentos centralizados. Um maior controle sobre o ambiente o qual est sendo trabalhado. As linguagens server-side so indispensveis para se construir aplicaes que necessitam de armazenamento de dados. A linguagem PHP se encaixa perfeitamente a essa necessidade. O PHP uma linguagem muito utilizada e est presente em mais 20 milhes de domnios. Essa linguagem Open Source, ou seja, voc pode acessar o cdigo-fonte e alter-lo. O PHP foi desenvolvido em 1994 pelo desenvolvedor Rasmus Lerdorf. Mais tarde foi regravado por diversas equipes e alcanou a maturidade existente hoje. PHP teve seu significado original como sendo Personal Home Page, mas hoje foi alterado conforme a conveno para atribuio de nomes recursiva GNU, adotou-se o nome de PHP Hypertext Preprecessor. Sua Sintaxe lembra um pouco a sintaxe do C e do Perl, e uma linguagem bem fcil de aprender.
150
Seo 1 Viso geral

O PHP multiplataforma e pode ser usado na maioria dos sistemas operacionais. Diferente de scripts como o JavaScript, ele roda no servidor, que suportado pela maioria dos servidores Web que existem hoje no mercado, como Apache, IIS etc. O cliente recebe apenas os resultado dos scripts, que so interpretados no servidor, no tendo acesso ao cdigo. Muito simples de se aprender e trabalhar, o PHP atende desde os mais experientes desenvolvedores at os iniciantes na rea.
Existem diversos tutoriais para instalao do PHP. aconselhvel utilizar uma sute pronta de servidor como Xampp <http://www.apachefriends.org/en/ xampp.html>, ApacheTriad <http://www.apachefriends. org/en/xampp.html>, PHPTriad <http://sourceforge. net/projects/phptriad> ou outra sute semelhante em que se tenha o servidor Web + PHP + Mysql.
Uma das grandes vantagens do PHP sua portabilidade, ou seja, sua capacidade de ser executada em diversos sistemas operacionais. O PHP est presente nos principais sistemas operacionais existentes no mercado. Uma de suas caractersticas ser server-side, isso significa que executada somente no servidor e, por isso, facilita a sua manuteno e segurana em relao ocultao de linguagem. Visando melhorar o entendimento, vamos utilizar uma pgina baseada em um sistema de requisio. Esse sistema voltado para uma empresa comercial de informtica e tem como base requisitar produtos para o estoque situado em outra localidade. O nome da empresa InfoComponente. Imaginemos ento que a pgina HTML j esteja pronta e no requer nenhum recurso de usabilidade ou mesmo visual. Assim, temos o seguinte resultado:
Unidade 3
151
Figura 3.1 O formulrio de requisio em que se registra apenas a quantidade de produtos solicitados. Fonte: Elaborada pelo autor (2010).
Perceba que h duas informaes de extrema importncia no cdigo da requisio, como mostrado a seguir:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Formulrio</title> </head> <body> <form id=frmrequisicao name=frmrequisicao method=post action=processarrequisicao.php> <table width=30% border=1> <tr bgcolor=#999999> <th width=40% scope=col>Item</th> <th width=60% scope=col>Quantidade</th> </tr> <tr> <td><label for=txtmouse>Mouse</label></td>
152
<td> <input name=txtmouse type=text id=txtmouse value= maxlength=3/> </td> </tr> <tr> <td><label for=txtteclado> Teclado</label></td> <td><input name=txtteclado type=text id=txtteclado value= maxlength=3 /></td> </tr> <tr> <td><label for=txtfone> Fone </label></td> <td><input name=txtfone type=text id=txtfone value= maxlength=3 /></td> </tr> </table> <p> <input type=submit name=sbtenviar id=sbtenviar value=Enviar /> <input type=reset name=sbtlimpar id=sbtlimpar value=Limpar /> </p> </form> </body> </html>
A primeira tag do corpo do HTML a form e contm o atributo action. Esse atributo define qual o script ler as informaes enviadas pelo formulrio. Vale lembrar neste momento que existem diferenas quando o mtodo de envio GET ou POST, veremos isso mais adiante. A segunda informao importante so os nomes dos campos do formulrio, pois eles sero utilizados para realizar a leitura das informaes.
Unidade 3
153
Assim, podemos escrever o programa ou script que ser o receptor das informaes enviadas pelo formulrio. Vamos supor que tenhamos colocado as informaes no formulrio para mouse, teclado e fone, sendo 3, 2 e 1, respectivamente, teramos o seguinte resultado:
Figura 3.2 Representando a resposta do envio da requisio. Fonte: Elaborada pelo autor (2010).
O cdigo que teramos seria:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Relao Cadastrada</title> </head> <body> <p><h1>Requisies:</h1></p> <?php if ((@$_POST[txtmouse]>0)||(@$_POST[txtteclado]>0)||(@$_ POST[txtfone]>0)) { ?> <table width=40% border=1> <tr> <th scope=col>Itens</th>
154
<th scope=col>Quantidade</th> </tr> <tr> <th scope=row>Mouse</th> <td><?php echo @$_POST[txtmouse];?></td> </tr> <tr> <th scope=row>Teclado</th> <td><?=@$_POST[txtteclado]?></td> </tr> <tr> <th scope=row>Fone</th> <td><?=@$_POST[txtfone]?></td> </tr> </table> <?php } else { ?> <h1> ERRO INFORMAES NO VALIDADAS!</h1> <?php } ?> <a href=javascript:window.history.back(-1);>Voltar</a> </body> </html>
Unidade 3
155
Vamos atentar neste momento para trs elementos do PHP que podemos destacar. Primeiro a varivel predefinida $_POST. Essa varivel um vetor contendo todos os elementos de um formulrio enviado pelo mtodo post. Nesse vetor podemos regatar os botes que esto contidos no formulrio. Caso tenhamos utilizado o mtodo get no formulrio, o vetor do PHP tambm se altera passando para $_GET. O segundo elemento o @ antecedendo a varivel $_POST. O @ no PHP na realidade uma funo de inibio de erro. Ou seja, qualquer erro com a varivel que seja antecedida por @ ter como valor padro nulo.
Muito cuidado com o uso do @, ele pode esconder um erro importante do seu cdigo.
O terceiro elemento o uso das tags do PHP. A tag PHP dentro do HTML normalmente se apresenta dentro das tags <?php ?>. Existem ainda as tags de atalho como <?= ?>, que substituem a funo echo (escrever).
possvel utilizar as mesmas tags do ASP para escrever o PHP. Pesquise qual a configurao deve ser alterada para que isso ocorra. Normalmente o uso da tag <?php ?> juntamente com a palavra php obrigatrio, porm possvel alterar ests configurao de tal modo que aceite tambm sem a palavra php <? ?>. Pesquise qual configurao dever ser feita para que isso ocorra.
Embora nesse ponto j seja possvel iniciar uma programao simples em PHP, veja mais um elemento importante em programao: o comentrio. O comentrio muito til como documentao de baixo nvel. No PHP ela pode ser de trs formas: bloco, linha e estilo Shell. O comentrio em bloco feito utilizando /*, e tudo que estiver aps esse cdigo estar comentado e devendo ser encerrado com */.
156
/* Autor: Jos da Silva Modificado para melhorar o desempenho em 01 de maro */
A segunda forma de comentrio o comentrio de linha, no qual deve ser iniciado com // e terminar ao final da linha. Portanto, no necessrio fechar o bloco, basta trocar a linha para terminar o comentrio.
<td><?php echo @$_POST[txtmouse];?> // Escreve a quantidade requisitada se existir </td>
A terceira forma de comentrio o estilo em Shell, ou seja, esse padro adotado pelos scripts Shell e tambm pelo PHP. Basicamente tem a mesma sintaxe do comentrio de linha, porm para abrir o comentrio deve-se utilizar #.
<td><?php echo @$_POST[txtmouse];?> #Escreve a quantidade requisitada se existir </td>
Seo 2 Variveis e constantes

As variveis e as constantes possuem papel fundamental, pois com elas podemos manipular as informaes que so recebidas. As variveis no PHP so representadas pelo smbolo do cifro ($) seguido pelo nome da varivel.
<?php $var = Bob; $Var = Joe;
Unidade 3
157
echo $var, $Var;
// exibe Bob, Joe
$4site = not yet;
// invlido; comea com um nmero
$_4site = not yet; // vlido; comea com um sublinhado $tyte = mansikka; // vlido; um caractere ASCII (extendido) 228 ?>
O exemplo anterior pode ser encontrado no manual do PHP <http://www.php.net/manual/pt_BR/language. variables.basics.php>, assim como outros exemplos. Veja as funes para manipulao das variveis que consta no manual do PHP: <http://www.php.net/ manual/pt_BR/ref.var.php>.
a. Tipo de dados
As variveis so classificadas pelos tipos de dados que elas podem armazenar. Os tipos mais comuns so:
Integer (inteiro): especifica o tipo de armazenamento de nmeros inteiros. Float: especifica o tipo de armazenamento de ponto flutuante (decimal, notao cientfica). String: especifica o tipo de varivel sendo caractere. Array: especifica o tipo de varivel sendo um vetor. Object: especifica o tipo de varivel sendo uma instncia de classes.
Uma grande vantagem que voc no necessita definir as variveis pelo tipo no PHP. O interpretador identifica a dado que est sendo atribuda varivel e define o tipo de dado da varivel, assim possvel utilizar suas funes predefinidas especficas para aquele tipo de informao.
158
Lembre-se que o tipo definido pela ltima atribuio feita varivel. Portanto, se inicialmente voc atribuiu o nmero 4 para a varivel $a e posteriormente atribuiu uma string como quatro, no causar erro por essa atribuio.
Podemos considerar que os Arrays no PHP so vetores indexados. Em outras palavras, um valor do tipo array uma forma de arquivamento em memria em que os ndices so as chaves de acesso. Lembre-se que os ndices podem assumir valores de qualquer tipo e no somente inteiros. Outra caracterstica que os ndices no necessitam obedecer a uma sequncia contnua. No caso dos valores inteiros para os ndices, pode haver intervalos sem atribuio de valores. A verificao de tipos em PHP dinmica, valores de tipos diferentes podem ser usados como ndices de array, assim como os valores mapeados podem ser de diversos tipos.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de Arrays</title> </head> <body> <? $numeros_primos = array(2, 3, 5,7); $nomes = array(3); $nomes[0] = Joo; $nomes[1] = Maria; $nomes[2] = Joaquim; for ($i=0; $i<count($numeros_primos); $i++)
Unidade 3
159
echo Nmeros Primos, posio .($i+1). :.$numeros_ primos[$i].<br>; ?> <br /> <?
for ($i=0; $i<count($nomes); $i++) print(Nomes, posio .($i+1). :.$nomes[$i].<br>);
$frutas = array(vermelha=> array(1=>ma, 2=>morango), amarela=>banana, laranga=>array(laranja, mamo)); $i=0; foreach ($frutas as $cor => $tipos) { echo Indice: $cor; Valor: $tipos<br />\n; echo As frutas da cor .$cor. so:<br>; echo <ul>; if (is_array($tipos)) foreach ($tipos as $indice => $valor) echo <li>.$valor.</li>\n;
else
echo <li>.$tipos.</li>\n;
echo </ul>;
$posicao[1]=primiero valor; $posicao[3]=segundo valor; foreach ($posicao as $indice => $valor) echo Indice: $indice; Valor: $valor<br />\n;
$comida= array(0=>Feijoada, dois=> Churrasco, 3=>Arroz, quatro=>macarro, 10=>Ensopado); while (list($indice, $valor) = each($comida))
160
echo Valor do Indice : $indice e o contedo da posio : $valor<br />; ?> </body> </html>
Veja que no exemplo esto sendo utilizadas vrias formas de atribuir um array e de como acessar suas informaes. O PHP aceita vetor binrio, ou seja, vetor dentro de outro vetor. O comando count verifica quantas posies existem no vetor. A instruo foreach realiza um lao para percorrer todos os ndices e valores do vetor. Essa instruo somente pode ser utilizada com vetores, assim como o comando each que divide o vetor em ndice e valores unitariamente. Normalmente utilizada com a funo list, que cria variveis como se fossem array. Assim, o resultado esperado :
Figura 3.3 - Exemplo de arrays. Fonte: Elaborada pelo autor (2010).
Conhea mais funes do PHP para trabalhar com arrays no seu manual: <http://br3.php.net/manual/pt_BR/ book.array.php>
Apesar de o interpretador ser muito eficiente quanto aos tipos de dados, ocorre que algumas vezes necessrio forar uma converso dos tipos de dados. Isso pode ocorrer quando so
Unidade 3
161
executadas determinadas operaes entre dois valores de tipos diferentes. O interpretador do PHP converte o valor de um deles automaticamente. Os tipos de dados sero convertidos sempre para aquele que houver menor perda. Isto , um dos operandos for float, o outro ser convertido para float, seno, se um deles for integer, o outro ser convertido para integer.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de tipo de dados</title> </head> <body> <?php echo $variavel = 1; echo <br />; echo $variavel = $variavel+5; echo <br />; echo $variavel = $variavel+25; echo <br />; echo $variavel = $variavel+1.999; ?> </body> </html>
162
Como podemos notar, o PHP converte string para integer ou float mantendo o valor. Assim, espera-se o resultado:
Figura 3.4 - Exemplo de tipo de dados. Fonte: Elaborada pelo autor (2010).
O sistema utilizado pelo PHP para converter de strings para nmeros o seguinte:
analisado o incio da string. Se contiver um nmero, ele ser avaliado. Seno, o valor ser 0 (zero); O nmero pode conter um sinal no incio (+ ou -); Se a string contiver um ponto em sua parte numrica a ser analisada, ele ser considerado e o valor obtido ser float ; Se a string contiver um e ou E em sua parte numrica a ser analisada, o valor seguinte ser considerado como expoente da base 10 e o valor obtido ser float.
Unidade 3
163
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exemplo de tipo de dados</title> </head> <body> <?php echo $variavel = 1; echo <br />; echo $variavel = $variavel+5; echo <br />; echo $variavel = $variavel+25; echo <br />; echo $variavel = $variavel+1.999; ?> <br /> <br /> <?php echo $variavel = $variavel+1.8; echo <br />; echo $variavel = $variavel+-1.3e3; echo <br />; echo $variavel = $variavel+variavel3; echo <br />; echo $variavel = $variavel+222teste dadoas; echo <br />; echo $variavel = $variavel+ 9999x echo <br />; teste dadoas;
164
?> </body> </html>
O browser mostrar:
Figura 3.5 - Exemplo de tipo de dados. Fonte: Elaborada pelo autor (2010).
Outra forma de converso voc informar para o interpretador qual o tipo de dados est sendo convertido. A sintaxe do typecast de PHP: basta escrever o tipo entre parnteses antes do valor.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exempl typecast</title>
Unidade 3
165
</head> <body> <?php $var = 76; echo $var.<br />; $var = (float) $var; echo $var.<br />; $var = 74.234; echo $var.<br />; $var = (int) $var; echo $var.<br />; ?> </body> </html>
Os tipos de cast permitidos so:

(int), (integer) (real), (double), (float) (string) (array) (object) muda para integer; muda para float; muda para string; muda para array; muda para objeto.
O resultado do exemplo :
166
Figura 3.6 - Exemplo de tipo de cast. Fonte: Elaborada pelo autor (2010).
O PHP ainda permite que sejam criadas variveis por referncia. Isto , variveis com nomes diferentes, mas permanecem associadas com seu valor. Quando o contedo de uma alterado, o contedo da segunda alterado automaticamente.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Variavel por referencia</title> </head> <body> <?php $nome = Joo da Silva; $identificacao = &$nome;
Unidade 3
167
echo Varivel nome = $nome<br />; echo Varivel identificacao = $identificacao<br /><br />;
$nome = Maria Firmino;
echo Varivel nome = $nome<br />; echo Varivel identificacao = $identificacao<br /><br />;
$identificacao = Jos Maria;
echo Varivel nome = $nome<br />; echo Varivel identificacao = $identificacao<br />; ?> </body> </html>
O resultado ser:
Figura 3.7 - Exemplo de varivel por referncia. Fonte: Elaborada pelo autor (2010).
168
b. Literais
Podemos abrir um espao para explicar o uso das literais. As literais so string brutas, ou seja, no sofrem alterao. Elas esto contidas basicamente entre aspas ou apstrofo. Porm, o PHP interpreta um pouco diferente dependendo do tipo de smbolo usado. Vejamos a literal com apstrofo: ela fora o interpretador do PHP a ler quase todos os caracteres como literal. A exceo o uso da contra barra antecedendo o apstrofo, assim ele interpreta o prprio apstrofo:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Literal com apstrofo</title> </head> <body> <?php $teste=banana; echo Literal completa; echo <br>; echo Interpreta a varivel $teste.; echo <br>;
echo A contraa barra tem esta finalidade \ assim posso mostrar o apstrofo\ ; echo <br>; echo A contra barra no interpreta outras sequncias de escape \n teste ;
Unidade 3
169
?> </body> </html>
O browser interpreta:
Figura 3.8 - Exemplo de literal com apstrofo. Fonte: Elaborada pelo autor (2010).
A literal contida entre aspas fora o interpretador a identificar sequncia de escape, alm de interpretar variveis contidas dentro das prprias literais. Utilizando o exemplo anterior teramos outras sadas. Observe tambm que a concatenao entre literais e variveis por meio do smbolo ponto (.).
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Literal com aspas</title> </head>
170
<body> <?php $teste=banana; echo Literal completa; echo <br>; echo Interpreta a varivel $teste.; echo <br>;
echo A contrabarra tem esta finalidade \ assim posso mostrar o apstrofo\ ; echo <br>; echo A contra barra no interpreta outras sequncias de escape \n teste ; // neste exemplo deve-se olhar o cdigo fonte resultante... ter uma quebra de linha no cdigo ?> </body> </html>
O browser mostrar:
Figura 3.9 Exemplo de literal com aspas. Fonte: Elaborada pelo autor (2010).
Unidade 3
171
O manual do PHP possui uma lista de sequncia de escape que pode ser usadas, alm de outras sintaxes de literais: <http://br2.php.net/manual/pt_BR/language. types.string.php>.
c. Variveis predefinidas
O PHP possui uma grande gama de variveis predefinidas para qualquer script que ele execute. Elas auxiliam para a recuperao de informaes importantes como de formulrio, transferncia de arquivo, cookies, entre outros. As variveis predefinidas mais utilizadas so: $_GET: recupera informaes do formulrio HTML. $_POST: recupera informaes do formulrio HTML. $_FILE: utilizada quando existe um upload de arquivos, assim o PHP pode acessar todas as informaes pertinentes a este arquivo. $_SESSION: utilizada para registrar e recuperar variveis de sesso. $_COOKIE: possui todas as informaes registradas em cookie. Assim, possvel recuperar suas informaes. As variveis $_GET, $_POST, $_FILE e $_SESSION ficam disponveis enquanto a sesso permanecer ativa. A varivel $_ COOKIE independe da sesso.
Cookies so arquivos que contm informaes trocadas entre o browser e o servidor Web. A principal funo manter a persistncia das sees do protocolo HTTP. Os cookies possuem um tempo de vida, no so permanentes. Eles so muito utilizados para manter um perfil do usurio a uma determinada pgina. Eles so vulnerveis, mas no representam risco de segurana ou privacidade ao usurio.
172
Todas as variveis predefinidas so na realidade um array (vetor) de registro. Mesmo que elas s contenham uma informao, devem ser tratadas como um array em quaisquer circunstncias.
Para saber mais sobre variveis predefinidas, acesse o endereo <http://www.php.net/manual/pt_BR/ reserved.variables.php>.
d. Escopo de variveis
O PHP tem por definio que o escopo a abrangncia em que a varivel pode ser acessada em um script. O escopo pode ser definido em trs nveis bsicos no PHP, so eles:
Variveis globais: so visveis em todo o script, porm no so visveis dentro das funes. Variveis de funes: so visveis somente na funo que a declarou. Varveis globais em funes: so variveis globais que so definidas como globais dentro das funes. Para isso, nas funes deve ser precedida pela palavra reservada global.
<?php $var1=0; Funcao teste() { Global $var1; (...) } ?>
Para saber mais sobre variveis escopo de variveis, acesse o endereo <http://www.php.net/manual/ pt_BR/language.variables.scope.php>.
Unidade 3
173
e. Constantes
As constantes so elementos de programao que no sofrem variao durante o software. Elas so usadas para manter informaes padres como configuraes e elementos que no sofrem variao. No PHP as constantes podem ser representadas pela funo define e teramos:
define(SIMBOLOMOEDA,R); define(DTINSTALACAO,2009-05-01); define(COEFICIENTE,3.8);
As constantes definidas pela funo define no necessitam do smbolo $ e podem ser acessadas de qualquer parte do script.
e. Data
O PHP no possui um tipo de dados que seja data. Na realidade, uma data no PHP uma string. Porm, existem funes especficas que auxiliam no tratamento das datas. A funo date formata uma data e hora local conforme os parmetros utilizados.
<? echo date(d/m/Y); ?>
Retorna a data no formato DD/MM/YYYY. Lembre-se que o retorno sempre ser uma string. J a funo mktime retorna um inteiro que representa um tempo no formato UNIX. Esse tempo pode ser formatado para uma sada string. Ento para imprimir uma data 01/01/1998 13:32:12, basta o cdigo:
174
<?php echo date(d/m/Y H:i:s, mktime(13, 32, 12, 12, 32, 1997)); ?> Voc pode encontrar outras funes de datas no endereo <http://www.php.net/manual/pt_BR/ref. datetime.php>.
Seo 3 Operadores
Operadores so smbolos responsveis pelas manipulaes de valores e variveis nas linguagens. J vimos alguns operadores em alguns exemplos. Muitos j so de conhecimento comum. Alguns operadores podem aceitar um, dois ou trs argumentos, porm o mais comum utilizar operador que aceitam dois operadores.
a. Operadores de caractere
possvel utilizar o operador de concatenao para unir strings e formar um resultado de forma que se estabelea um padro semelhante ao da adio de nmeros. Observe:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Operador de Caracter</title> </head>
Unidade 3
175
<body> <?php $parte1=Universidade do ; $parte2=Sul de ; $resultado=$parte1.$parte2.Santa Catarina; echo $resultado; ?> </body> </tml>
O resultado ser:
Figura 3.10 - Exemplo de operador de caractere. Fonte: Elaborada pelo autor (2010).
b. Operadores aritmticos
Os operadores aritmticos esto na categoria dos operadores bsicos das linguagens de programao. Eles so simplesmente os operadores responsveis pelas manipulaes matemticas.
176
Tabela 5 Operadores aritmticos. Operador + * / Nome Adio Subtrao Multiplicao Diviso Exemplo $a + $b $a - $b $a * $b $a / $b $a % $b
% Mdulo Fonte: PHP e MySQL desenvolvimento Web.
Os operadores de adio, subtrao, multiplicao e diviso possuem seu funcionamento de forma esperada aos operadores matemticos. O operador de mdulo requer uma ateno especial, j que ele no existe nas operaes matemticas normais, e sim um resultado de uma diviso. Portanto, o operador de mdulo retorna o resto de uma diviso.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Operadores aritimticos</title> </head> <body> <?php $a=9; $b=2; echo Adio: .($a+$b).<br>; echo Subtrao: .($a-$b).<br>; echo Multiplicao: .($a*$b).<br>; echo Diviso: .($a/$b).<br>; $resultado = $a%$b;
Unidade 3
177
echo Mdulo ou resto: .$resultado; ?> </body> </html>
O resultado ser:
Figura 3.11 Exemplo de operadores aritmticos. Fonte: Elaborada pelo autor (2010).
A sada deste exemplo dever ser o resto da diviso entre o 9 e 2 sendo, portanto, 1. Os operadores aritmticos so usados em nmeros. Caso voc utilize esses operadores com strings, o PHP tentar converter para um inteiro ou decimal. No sendo bem-sucedido nessa tentativa, ele assumir que a string tem valor zero.
c. Operadores de atribuio
O operador de atribuio bsico representado pelo smbolo de = e sempre deve ser referido como configurado ou definido como. Em outras palavras, a varivel $a definida como nove. Essa definio deve ser feita para no confundir com os operadores de comparao.
178
Alm do operador bsico, o PHP possui operadores de atribuio combinados. Assim, possvel realizar operaes aritmticas juntamente com uma atribuio. Voc pode combinar os operadores aritmticos e o operador de caracteres com o de atribuio, assim teremos as seguintes combinaes:
Operador += -= *= /= %= .= Utilizao $a += $b $a -= $b $a *= $b $a /= $b $a %= $b $a .= $b Equivalente a $a = $a + $b $a = $a - $b $a = $a * $b $a = $a / $b $a = $a % $b $a = $a . $b
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Operadores de Atribuio</title> </head>
<body> <?php $a = 3; $a += 5; // configura $a para 8, como se dissssemos: $a = $a + 5; echo $a;
echo <br>;
Unidade 3
179
$b = Bom ; $b .= Dia!; // configura $b para Bom Dia!, como em $b = $b . Dia!; echo $b; echo <br>;
$a=23; $b=3; $a += $b; echo Adio: $a<br>; $a -= $b; echo Subtrao: $a<br>; $a *= $b; echo Multiplicao: $a<br>; $a /= $b; echo Diviso: $a<br>; $a %= $b; echo Mdulo ou resto: $a<br>; ?> </body> </html>
180
O resultado:
Figura 3.12 - Exemplo de operadores de atribuio. Fonte: Elaborada pelo autor (2010).
d. Operadores de comparao
Como o prprio nome j diz, esses operadores tem a finalidade de comparar valores. Os elementos que utilizam esses operadores retornam um valor lgico (verdadeiro ou falso):
Tabela 6 Operadores de comparao. Operador == === != <> < > <= Nome Igual a Idntico No igual No igual Menor que Maior que Menor que ou igual a Exemplo $a == $b $a === $b $a != $b $a <> $b $a < $b $a > $b $a <= $b $a >= $b
>= Maior que ou igual a Fonte: PHP e MySQL desenvolvimento Web.
Unidade 3
181
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Operadores de Comparao</title> </head>
<body> <?php $a=3; $b=3;
if ($a===$b) echo so idnticas; else echo no so idnticas; echo <br><strong>Teste igualdade</strong><br>; if ($a==$b) echo so iguais; else echo no so iguais; ?>
</body> </html>
182
O resultado:
Figura 3.13 - Exemplo de operadores de comparao. Fonte: Elaborada pelo autor (2010).
Operador de comparao de igualdade deve-se ter cuidado para no confundi-lo com o operador de comparao. Eles possuem funes diferentes e a no utilizao correta causa um erro de lgica difcil de ser identificado.
O operador de comparao idntico deve-se ser usado com cautela, j que ele no compara somente os valores como o de igualdade, mas compara o tipo tambm. Portanto, os valores iguais podem ser diferentes por causa do tipo definido para as variveis.
<?php $a=3; $b=3; if ($a===$b) echo so idnticas; else echo no so idnticas; echo <br><strong>Teste igualdade</strong><br>; if ($a==$b) echo so iguais; else echo no so iguais; ?>
Unidade 3
183
e. Operadores de incremento e decremento

Esta classe de operadores se refere a uma forma de atalho para que se possa aumentar ou diminuir valores de variveis.
Tabela 7 Operadores de incremento/decremento. Operador ++$a $a++ --$a $a-Nome Pr-incremento Ps-incremento Pr-decremento Ps-decremento Efeito Incrementa $a em um, e ento retorna $a. Retorna $a, e ento incrementa $a em um. Decrementa $a em um, e ento retorna $a. Retorna $a, e ento decrementa $a em um.
Os operadores de incremento e decremento no podem ser usados com valores lgicos (verdadeiro/true ou falso/false). Quanto aos valores NULL, no tero resultado para o decremento, mas se for incrementado assumir 1.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Operadores de incremento de decremento</title> </head> <body> <?php $a=7; echo A varivel \$a vale inicialmente: $a<br>; ++$a; echo A varivel \$a vale agora: $a<br>;
184
$a++; echo A varivel \$a vale finalmente: $a<br>; $b=56; echo A varivel \$b vale inicialmente: $b<br>; --$b; echo A varivel \$b vale agora: $b<br>; $b--; echo A varivel \$b vale finalmente: $b<br>; ?> </body> </html>
Resultando em:
Figura 3.14 Exemplo de operadores de incremento e decremento. Fonte: Elaborada pelo autor (2010).
Observe mais exemplos que conta no manual do PHP <http://www.php.net/manual/pt_BR/language. operators.increment.php>.
Unidade 3
185
f. Operadores lgicos
Os operadores lgicos tm a finalidade de combinar expresses de operadores lgicos. Desta forma, possibilita que vrias combinaes sejam feitas dentro da mesma estrutura.
Tabela 8 Operadores lgicos. Operador ! && Nome NO E Utilizao !$b $a && $b Resultado Retorna verdadeiro se $b for falso e vice-versa Retorna verdadeiro se $a e $b forem verdadeiros; caso contrrio falso Retorna verdadeiro se $a ou $b ou ambos forem verdadeiros O mesmo que &&, mas com procedncia mais baixa O mesmo que ||, mas com precedncia mais baixa
|| AND OR
OU E OU
$a || $b $a and $b $a or $b
Fonte: PHP e MySQL desenvolvimento Web.
Seo 4 Estrutura de controle

As estruturas de controle so responsveis pelas automatizaes e restries do fluxo da execuo. Desta maneira, conseguimos manipular de forma mais efetiva as operaes necessrias para a soluo. As estruturas de controle so elementos que permitem manter o controle sobre o fluxo da execuo. Elas podem ser representadas de diversas formas, normalmente so nominadas pelo seu efeito. Basicamente podemos classific-las de dois tipos: tomada de deciso e de repetio.
186
a.Instruo de tomada de deciso: if

Esta instruo responsvel por comparaes simples no fluxo. O if a instruo bsica para tomada de deciso. Ela testa uma condio e decide se deve ser executado bloco verdadeiro (quando a condio for verdadeira) ou o bloco falso (quando a condio for falsa). As instrues na condio if devem estar contidas dentro de parnteses. O if utiliza os operadores lgicos e os operadores de comparao para construir as expresses de condio. Ainda, o bloco que define o escopo das instrues compreendido entre chaves. Quando as chaves so omitidas, o interpretador compreende que no existe um bloco de instruo. Consequentemente, somente a primeira instruo executada.
<?php $a=23; if ($a>=18) { echo Idade: $a; echo <BR>; echo maior de idade<BR>; if ($a<21) echo Voc no maior de 21 anos<BR>; echo Fim do processo; } ?>
O if possui um comando de desvio, a instruo else. O else possui a finalidade de executar uma condio contraria a testada. Desta forma, o exemplo anterior ficaria:
Unidade 3
187
<?php $a=23; if ($a>=18) { echo Idade: $a; echo <BR>; echo maior de idade<BR>; if ($a<21) echo Voc no maior de 21 anos<BR>; else echo Voc maior de 21 anos<BR>; echo Fim do processo; } else { echo Idade: $a; echo <BR>; echo menor de idade; } ?>
O PHP suporta a instruo elseif, que na prtica significa encadear diversas instrues if e else. Combinando essas duas instrues em uma nica estrutura:
<?php $a=4; $b=4; if ( $a > $b ) { echo a maior que b ; } elseif ( $a == $b ) { echo a igual a b ; } else { echo a menor que b ; } ?>
188
Outra instruo que se compara ao if o operador ternrio. Esse operador utilizado para comparao e atribuio. A sua sintaxe :
condio ? valor_verdade : valor_falso
Assim, podemos exemplificar da seguinte forma:

<?php $a=23; $b=($a>=18)? Maior de idade: Menor de idade; echo idade: $a<br>\n$b; ?>
b. Instruo de tomada de deciso SWITCH

A instruo switch semelhante instruo if. Porm, ao contrrio do if que aceita somente dois valores de resultado para a condio (verdadeiro ou falso), essa instruo pode aceitar mais dois valores. fundamental entender o funcionamento do switch. Basicamente, essa instruo busca comparao de valores, ou seja, a partir de uma varivel busca-se uma lista de valores para encontrar o seu igual. Uma vez encontrado executa-se a instruo.
<?php $a=4; switch ($a) { case 1 : echo um; break;
case 2 :
Unidade 3
189
echo dois; break;
case 3 : echo trs; break;
case 4 : echo quatro; break;
default : echo padro; break;
} ?>
Uma situao especial no caso do switch o uso da instruo default. Essa instruo acionada quando no encontrada nenhuma condio verdadeira dentro do case.
c. Instruo de repetio while

A instruo while tem um comportamento semelhante ao if. O while utiliza uma condio para que o bloco de repetio seja executado enquanto a condio se mantiver verdadeira. O uso mais frequente desse lao quando no podemos visualizar o nmero de iteraes que o lao deve executar. Desta forma, o lao pode ser executado nenhuma ou n vezes.
190
<?php echo exemplo 1 <br>\n; $i = 1; while ($i <= 10) { echo ++$i.\n<br>\n; } echo <br>exemplo 2 <br>; $i = 1; while ($i <= 10): echo $i.\n<br>\n; $i++; endwhile; ?>
d.Instruo de repetio for

Este lao de repetio para uso exclusivo de incremento ou decremento de variveis. Assim, torna-se indispensvel a informao exata de quantas iteraes o lao deve executar. Utilizando o mesmo exemplo anterior podemos ter agora:
<?php echo exemplo 1 <br>\n; for ($i=10;$i >= 1;$i--) { echo $i.\n<br>\n; } echo <br>exemplo 2 <br>; $i = 1; for ($i=1;$i <= 10;$i++) { echo $i.\n<br>\n; } ?>
Unidade 3
191
No existem diferenas de desempenho entre a instruo for e a instruo while. Voc pode utilizar qualquer um dos dois em determinadas situaes.
e. Instruo de repetio do..while

O PHP possui uma contrao do lao while. Essa contrao inverte a posio da condio a ser respeitada. No while a condio testada no incio do bloco, j na do..while a condio executada no final do lao. Essa pequena diferena garante ao do..while que as instrues dentro do lao sejam executadas pelo menos uma nica vez. Uma garantia que o while no pode dar.
<?php $i = 3; do { echo $i++.<br>; } while ($i > 0); ?>
f. Funes
Funes so trechos de cdigos destinados a executar uma tarefa especfica. Qualquer cdigo PHP pode ser escrito dentro de funes. Lembre-se que a varivel de retorno no necessita ser declarada. Porm, recomendado que voc documente qual valor e tipo est sendo retornado em uma funo. Qualquer funo possui a capacidade de retornar um valor, porm no obrigatrio. Uma funo pode existir apenas para executar determinados cdigos e no interagir com o restante do programa. O PHP aceita que somente uma varivel ou constante seja retornada por uma funo. Mas a varivel poder ser um array.
192
A utilizao de argumentos em funes extremamente til, pois podemos encaminhar valores s funes para que elas possam executar suas tarefas. Os argumentos devem ser declarados logo aps o nome da funo, entre parnteses, e tornam-se variveis pertencentes ao escopo local da funo. Podemos utilizar trs modos de argumentos em PHP.

Argumento por cpia; Argumento por referncia; Argumento default.
Os argumentos por cpia so valores enviados s funes onde a sua manipulao no se reflete no restante do programa. J os argumentos por referncia, afetam qualquer varivel que possua a referncia do argumento. O argumento default significa que, caso a chamada da funo no contenha um valor o argumento, assume o valor preestabelecido.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Funes no PHP</title> </head> <body> <?php function simples() { } function retorno() { } return Funo que contm um retorno<br />; echo Funo sem argumentos e sem retorno<br />;
Unidade 3
193
function argumentocopia ($var1,$var2, $vetor) { echo Funo com argumentos por cpias<br />; for ($i=0;$i<count($vetor);$i++) echo Posio $i valor: .$vetor[$i].<br />;
$var1 += 5; $var2 = Sem alterao; echo Os valores atuais das variveis so: $var1, $var2<br />;
function argumentoreferencia (&$var1,$var2) { echo Funo com argumentos por referencia<br />; $var1 += 5; $var2 = Sem alterao;
echo Os valores dentro da funo nas variveis so: $var1, $var2<br />; } function argumentodefault ($var1 = Com argumentos, $var2=Sem argumentos) { } simples(); echo <br />; echo retorno(); echo <br />; echo <strong>Argumentos por cpia</strong><br />; // pode ser utilizado com qualquer argumento echo Funo com argumentos default<br />; echo O valor atual das variveis so: $var1, $var2<br />;
$argumento1=10; $argumento2=Segundo; $argumento3[0]=Banana; $argumento3[1]=Ma;
194
$argumento3[2]=Morango; $argumento3[3]=Melo;
argumentocopia ($argumento1,$argumento2, $argumento3); echo <br />; echo As variveis no programa no sofreram alterao<br />; echo Valor da varivel argumento1: $argumento1, valor da varivel argumento2: $argumento2<br />; for ($i=0;$i<count($argumento3);$i++) echo Posio $i valor: .$argumento3[$i].<br />;
echo <br />;
echo <strong>Argumentos por referncia</strong><br />;
$argumento1=45; $argumento2=Dois; echo Os valores dos argumentos antes de encaminhar a funo so: $argumento1, $argumento2<br />; argumentoreferencia ($argumento1,$argumento2); echo Aps a funo ser executada apenas a varivel por referncia ter seu valor alterado: $argumento1, $argumento2<br />; echo <br />;
echo <strong>Argumentos com valor default</strong><br />; argumentodefault(Encaminhado Valor); ?> </body> </html>
Unidade 3
195
Voc pode mesclar esses tipos de argumentos, ou seja, em uma mesma funo voc pode conter todos os tipos de argumentos. Os valores default no so obrigatrios em todos os argumentos. Voc pode utilizar em um nico argumento e nos demais no.
Figura3.15 - Exemplo de funo no PHP. Fonte: Elaborada pelo autor (2010).
196
Seo 5 Trabalhando com arquivos

Uma funcionalidade muito comum em diversas linguagens a manipulao de arquivos. Normalmente utilizada para ler ou escrever um arquivo de comunicao, ou seja, um arquivo que contm informaes pertinentes a uma integrao assncrona.
Lembre-se sempre que manipular arquivos requer permisso de acesso ao arquivo ou diretrio. Sempre verifique se os acessos no servidor esto corretos.
Para simplificar o estudo, vamos adotar como padro a manipulao de arquivos somente. Mesmo assim voc pode ampliar seus estudos consultando o manual do PHP no endereo <http://br2.php.net/manual/pt_BR/ ref.filesystem.php>.
Fopen
A funo fopen responsvel por abrir um URL. Ou seja, informando um endereo o PHP tentar encontrar qual o protocolo resolver a URL. Assim como interpreta que a abertura de um arquivo fsico uma forma de protocolo. A sintaxe dessa funo :
fopen(url,mode)
Podemos representar da seguinte forma:

<?php $arquivo = fopen(c:\teste.txt,r); ?>
O mode na realidade o modo em que voc trabalhar a URL. Esses tipos de manipulao esto descritos na tabela a seguir:
Unidade 3
197
Tabela 9 Tipos de abertura de arquivos.
mode
r r+ w
Descrio
Abre somente para leitura; coloca o ponteiro do arquivo no comeo do arquivo. Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo do arquivo. Abre somente para escrita; coloca o ponteiro do arquivo no comeo do arquivo e reduz o comprimento do arquivo para zero. Se o arquivo no existir, tenta cri-lo. Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo do arquivo e reduz o comprimento do arquivo para zero. Se o arquivo no existir, tenta cri-lo. Abre somente para escrita; coloca o ponteiro do arquivo no final do arquivo. Se o arquivo no existir, tenta cri-lo. Abre para leitura e escrita; coloca o ponteiro do arquivo no final do arquivo. Se o arquivo no existir, tenta cri-lo. Cria e abre o arquivo somente para escrita; coloca o ponteiro no comeo do arquivo. Se o arquivo j existir, a chamada a fopen() falhar, retornando FALSE e gerando um erro de nvel E_WARNING. Se o arquivo no existir, tenta cri-lo. Isto equivalente a especificar as flags O_EXCL|O_CREAT para a chamada de sistema open(2). Cria e abre o arquivo para leitura e escrita; coloca o ponteiro no comeo do arquivo. Se o arquivo j existir, a chamada a fopen() falhar, retornando FALSE e gerando um erro de nvel E_WARNING. Se o arquivo no existir, tenta cri-lo. Isso equivalente a especificar as flags O_EXCL|O_CREAT para a chamada de sistema open(2).
w+
a a+ x
x+
Em contrapartida, a funo fclose fecha o arquivo aberto. Normalmente aps a execuo do script o sistema fecha as sees abertas. Porm, aconselhvel sempre fechar manualmente para evitar que o arquivos seja corrompido quando fechado pelo encerramento do programa.
Fwhite
A funo fwrite responsvel em escrever no arquivo aberto. Essa uma das principais funes dentro da categoria de manipulao de arquivos. Com ela podemos imprimir todas as informaes necessrias dentro um arquivo especificado.
198
<?php $filename = teste.txt; $conteudo = Acrescentar isso ao arquivo\n;
// Primeiro vamos ter certeza de que o arquivo existe e pode ser alterado if (is_writable($filename)) { // caso exita vamos adicionar if (!$handle = fopen($filename, a)) { echo No foi possvel abrir o arquivo ($filename); exit; } } else { // caso no exista vamos cri-lo if (!$handle = fopen($filename, w+)) { echo No foi possvel abrir o arquivo ($filename); exit; } } // Escreve $conteudo no nosso arquivo aberto. if (fwrite($handle, $conteudo) === FALSE) { } echo Sucesso: Escrito ($conteudo) no arquivo ($filename); fclose($handle); ?> echo No foi possvel escrever no arquivo ($filename); exit;
Unidade 3
199
Observe que nesse exemplo foi forado o teste para verificar se o arquivo existe e pode ser gravado. Utilizando o mesmo exemplo e abrindo o arquivo no modo w+ j seria o suficiente para criar ou reescrever o arquivo.
Lembre-se sempre que o manual do PHP possui referncias e exemplos nos quais voc pode testar. Acesse <http://br2.php.net/manual/pt_BR/ function.fwrite.php>.
Fgets
O fgets a funo de leitura de uma linha. Ou seja, com ela lemos uma linha inteira e acrescentamos a uma varivel. Uma vez na varivel podemos interpretar e manipular a informao conforme a necessidade.
<?php //para este exemplo necessrio que o arquivo arquivodeentrada.txt exista no mesmo diretrio que o script est salvo if ($arquivo = @fopen(arquivodeentrada.txt, r)) { $contador=1; // feof verifica se chegou a fim do arquivo while (!feof($arquivo)) { $leitura = fgets($arquivo); echo Linha .$contador++.: $leitura<br>; } fclose($arquivo); } else { } ?> echo No foi possvel abrir o arquivo;
200
A manipulao extremamente importante, pois muito utilizada para a troca de informaes off-line. Em diversas situaes, existe a necessidade de exportar determinadas informaes. Isso pode ocorrer por meio de um arquivo formatado ou at mesmo por XML. A funo bsica criar o arquivo e ler linha por linha a fim de identificar seu contedo.
Sntese
Neste captulo voc ser apresentado linguagem serve-side PHP. O PHP uma linguagem simples de ser desenvolvida em funo da sua estrutura. Tanto possvel utilizar tcnicas avanadas como orientao a objetos quanto simplificar o desenvolvimento utilizando uma programao estruturada. Como era de se esperar, o interpretador extremamente dinmico. No necessrio se preocupar com declaraes de variveis. O PHP se encarrega de interpretar o tipo de dados a ser trabalhado. J quanto aos vetores, possui um leque de opes que supre praticamente quaisquer necessidades que nos deparemos. Ainda oferece a possibilidade de trabalhar com arquivos de uma forma simples. Os arquivos so muito utilizados como relatrios e comunicao de dados de uma forma off-line, ou seja, a comunicao no se d em tempo real.
Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem. 1. Faa um script para validar um formulrio utilizando a linguagem PHP. O formulrio deve conter nome, endereo, nome da me, idade e e-mail. Faa uma pgina de resposta para que o PHP leia e escreva na pgina o resultado do formulrio. A idade deve ser superior a dois anos e o e-mail deve ser validado.
Unidade 3
201
2. Acrescente ao exerccio anterior a criao de um arquivo texto das informaes provenientes do formulrio. O arquivo texto deve conter os seguintes padres: Nome Endereo Nome da me Idade E-mail Escreva um terceiro para ler essas informaes do arquivo e organiz-los em uma tabela do HTML. Publique sua resposta na ferramenta Exposio do EVA.
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: Manual PHP, 2010. Disponvel em <http://br2.php.net/manual/ pt_BR/index.php>. Acesso em: 5 abr. 2010. PHP Brasil, 2010. Disponvel em <www.phpbrasil.com>. Acesso em: 5 abr. 2010. Truquese Dicas Tutoriais de Javascript, 2010. Disponvel em <www.truquesedicas.com/tutoriais/php/index.htm>. Acesso em: 2 mar. 2010.
202
unidade 4
Sistemas Web com banco de dados (PHP + MYSQL)

Ao final desta unidade, voc ter subsdios para:
Delimitao de aplicaes Web com acesso a banco de dados. Saber realizar consultas. Trabalhar com manipulao de dados. Utilizar sesses de aplicaes Web.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 Seo 5 Seo 6 Banco de dados Banco de dados e acessos Trabalhando com tabelas API do PHP Envio e recuperao de dados Sesses e cookies

Quando falamos em sistemas de software, natural pensar em armazenamento e recuperao de dados. Embora possamos classificar a maioria dos sistemas desta maneira, existem sistemas que tratam de problemas cujo foco no o armazenamento e a recuperao. A manipulao de dados pode acontecer de qualquer forma que se permita salvar esses dados e, normalmente, essa ao utiliza um banco de dados. Ao utilizar um banco de dados, voc tem vantagens, como acesso rpido aos dados, facilidade em extrair conjuntos de dados, mecanismos predefinidos para lidar com acesso concorrente, entre outros. Veremos como o PHP trabalha com um banco de dados, mais especificamente com o MySQL. O seu escopo de trabalho, como manipular dados, e como montar uma sesso de acesso. Vale registrar que neste ponto ser abordado de forma superficial as funcionalidades do banco de dados. O foco principal de estudo como utiliza-lo para desenvolver sistemas dinmicos.
Seo 1 Banco de dados

Um banco de dados tem a finalidade de proporcionar mecanismos que facilitem as transaes de armazenamento de dados. Esses dados so formatados em tabelas cada qual contendo colunas e linhas. Essas tabelas podem se relacionar entre si utilizando colunas chamadas chaves, que nada mais so que os identificadores dos dados. Alm de se saber identificar e trabalhar com eles, voc deve saber projetar um banco de dados para Web.
204
Banco de dados na Web

A diferena crucial entre um desenvolvimento com banco de dados entre um sistema desktop e um sistema Web que no sistema desktop normalmente h uma conexo nica com o banco de dados. Enquanto a aplicao permanecer aberta, a conexo no se desfaz. Quando desenvolvemos em um sistema Web, o funcionamento um pouco diferente, pois toda a operao de conexo com o banco de dados se d no servidor. Quem faz a chamada uma aplicao externa que no mantm uma conexo com esse servidor de forma permanente. Podemos considerar que a cada resposta do servidor Web a conexo se desfaz. Desta forma, no h necessidade de se manter uma conexo aberta entre a linguagem server-side e o banco de dados. Em termos gerais, voc pode perceber que toda a pgina que necessitar conectar ao banco de dados dever abrir uma nova conexo e ao final essa conexo ser fechada. Ainda nesta unidade, retomaremos esse assunto para seu melhor entendimento.
Modelo relacional
O modelo relacional ainda o principal modelo utilizado hoje em dia, mesmo tendo sido criado na dcada de 1970. Como j foi comentado, o sistema gerenciador de banco de dados utiliza o armazenamento de dados em tabelas que possuem relaes entre si. Assim, a ideia do modelo relacional que os dados correlatos devem estar contidos na mesma tabela e utilizamos relacionamentos entre tabelas para agruparmos dados menos correlatos.
Considere este exemplo: um cadastro de clientes deve-se ter as informaes pessoais de cada cliente, porm, nesta mesma tabela, acrescentar as informaes de endereo torna-se redundante. Por causa disso, criamos uma segunda tabela com os endereos comuns (rua, CEP, bairro, cidade, estado). Na tabela cliente, apenas informamos a referncia do endereo, e no todo ele.
Unidade 4
205
Observe que nesse exemplo podemos usar mais relacionamentos. Realizar a anlise para diminuir a redundncia de informaes chama-se normalizao de dados. importante destacar tambm que os relacionamentos utilizam tipos especficos de campos na tabela. Esses tipos so denominados de chaves primrias e estrangeiras. Podemos resumir que uma coluna, ou campo, um pedao simples de dados definido por um tipo, tamanho ou outras caractersticas. J a linha, ou registro, um simples conjunto ordenado de colunas. Portanto, uma tabela contm um nmero fixo de colunas e qualquer nmero de linhas. Podemos concluir que um banco de dados um conjunto de TABELAS.
MySQL
O MySQL um banco de dados SQL multiusurio e multithreading (executa eventos em paralelo). Normalmente os sistemas que utilizam o MySQL no possuem um grande volume de informaes. Ele acaba sendo utilizado em todo o seu potencial para aplicaes com baixo a mdio volume de dados. O MySQL utilizado em diversos sistemas e tem como caractersticas marcantes estabilidade e agilidade nas operaes. Hoje, possui controle de transao, suporte a procedure, entre outras funcionalidades, e utiliza como base o modelo relacional de gerenciamento de dados e sua linguagem padro o SQL. Ainda mantm uma caracterstica que o tornou popular: facilidade de gerenciamento. O MySQL possui algumas particularidades que facilitam o desenvolvimento de aplicaes. Perceba que, alm das informaes comuns do SQL, como NOT NULL ou PRIMARY KEY, ao final do comando existem algumas
206
informaes adicionais que so se suma importncia. Essas informaes so os chamados Storage Engines.
Storage engines
Storage engine refere-se ao tipo de armazenamento que o banco de dados utilizar. No so todos os banco de dados que podem alterar o tipo de armazenamento conforme a necessidade. O MySQL permite voc alterar esse tipo de armazenamento para cada tabela criada. Portanto, podemos escolher qual a melhor forma de armazenamento para cada aplicao a ser desenvolvida.
Voc pode estar se questionando: para que mudar o tipo de armazenamento? Simplesmente para adequar a realidade do problema.
Cada storage engine possui algumas caractersticas nas quais pode se fazer necessrio para melhorar a soluo do problema. Desta forma, para chegar melhor soluo, necessrio que se conhea as principais caractersticas inerentes aos storage engines:
Transacional: caracterstica em que a tabela aceita mltiplos acessos. Isso significa que uma ao de um usurio ou aplicao no interfere com a operao do outro. Pode executar comandos em blocos (transao) em vez de executar um comando SQL por vez. Armazenamento: o MySQL permite gravar a tabela 100% em memria, isto , nada no disco. Pode-se gravar dados em uma TABLESPACE, ou seja, um arquivo onde se armazena todas as tabelas do banco. Pode-se utilizar ainda uma forma de arquivamento extramente rpida, conhecida como ISAM, para gravar dados e recuper-los de forma gil. Outro tipo de engine pode gravar os dados de forma compactada, economizando muito espao em disco. Ainda, pode-se gravar em formato CSV (arquivo com delimitador), que facilita bastante a integrao com equipamentos de rede e telefonia, por exemplo. E mais, em vez de ler e gravar os
207
Unidade 4
dados no servidor onde o MySQL est instalado, pode-se espalhar os dados por vrios computadores para se criar um cluster de alta disponibilidade e alta performance.
ndices: dependendo do motor, temos ndices do tipo B-TREE, B+TREE, RTREE (spatial ) ou FULL TEXT (que indexa palavras, em vez da coluna ou do campo inteiro, e permite buscas como fazemos no Google, digitando palavras fora de ordem). Integridade Referencial: so as Foreign Key (chaves estrangeiras). No so todos os engines que a utiliza. Como todos os recursos que estamos discutindo, dependendo da aplicao ou finalidade da tabela isso no necessrio, e uma funcionalidade que pesa para o banco de dados. s vezes, no ter este recurso pode ser uma vantagem em termos de velocidade. Lock: a capacidade de poder travar um nico registro (linha ou tupula), vrios registros ou a tabela inteira. Cada engine tem um ou mais tipo de travamentos disposio da tabela. Backup On-Line: o MySQL permite realizar backups em processo batch ou ainda on-line. Algumas storage engines permitem tal funcionalidade. Auto Recovery: h engines que, caso haja uma corrupo de ndice, por exemplo, voc pode utilizar o comando REPAIR TABLE. H outros, no entanto, que no mximo voc ser avisado, por meio do log de erro, que o MySQL server encontrou uma inconsistncia e j consertou.
A imagem a seguir ilustra a arquitetura do MySQL, conectores, engines e o gerenciador de banco de dados propriamente dito.
208
Figura 4.1 Arquitetura do MySQL. Fonte: <http://forge.mysql.com/wiki/MySQL_Internals_Custom_Engine>. Acesso em 06 jan. 2011.
Management Server & Utilities - so as ferramentas de administrao, backup, segurana, configurao, migrao, entre outras. Connection Pool - a camada que faz a autenticao, gerencia a thread (processo), limites de conexo, memrias e caches (atalho de processo). SQL Interface - camada que controla as estruturas do SQL como procedimentos, views, triggers, entre outros. Parser - verifica a sintaxe do comando SQL e os privilgios de acesso. Optimizer - monta as estatiscas do banco de dados para evetuais relatrios de desempenho. Caches & buffers - camada onde se cria atalhos e alocao de memrias para comandos e estruturas especficas. Pluggable Storage Engines - camada responsvel pelo gerenciamento e controle da estrutura de armazenamento. File System - controla o arquivamento fsico conforme a formatao do sistema operaciional.
209
Unidade 4
Files & logs - gerencia arquivos fsicos diversos de controles (logs, ndices, erros etc) .
As storages engines mais comuns so a InnoDB e a MyISAM. Veremos agora as principais caractersticas destes storages engines.
InnoDB
O InnoDB foi desenvolvido para obter o mximo de performance ao processar grande volume de dados e usado na produo de vrios sites com banco de dados grandes e que necessitam de alto desempenho. Este storage prov o MySQL com um mecanismo de armazenamento seguro com transaes com commit, rollback e recuperao em caso de falhas. O InnoDB faz bloqueio a nvel de registro e tambm fornece uma leitura sem bloqueio em SELECT em um estilo consistente com Oracle. Esses recursos aumentam a performance e a concorrncia de multiusurios. InnoDB o primeiro gerenciador de armazenamento no MySQL que suporta restries FOREIGN KEY. Tecnicamente, InnoDB um banco de dados completo colocado sob o MySQL. InnoDB tem sua prpria rea de buffer para armazenar dados e ndices na memria principal. InnoDB armazena suas tabelas e seus ndices em uma tablespace, o qual pode consistir de vrios arquivos. Isso diferente, por exemplo, de tabelas MyISAM, em que cada tabela armazenada como um arquivo separado. Tabelas InnoDB podem ser de qualquer tamanho, mesmo em sistemas operacionais em que o sistema de arquivo limitado a 2 GB.
MyISAM
As tabelas MyISAM possuem algumas caractersticas que podem auxiliar na soluo do problema. Voc pode compactar tabelas MyISAM para utilizar menos espao. Voc pode INSERIR novas linhas em uma tabela que no tenha blocos livres no meio
210
do arquivo de dados, na mesma hora, outras threadas (processo de conexo) so lidas da tabela (insero concorrente). Um bloco livre pode vir de uma atualizao de uma linha de tamanho dinmico com muitos dados para uma linha com menos dados ou ao deletarmos linhas. Quando todos os blocos livres so usados, todas as inseres futuras sero concorrentes de novo. Todo dado armazenado com byte mais baixo primeiro, ou seja, o dado que possui menor tamanho fsico. Isso torna a mquina e o sistema operacional independentes. A nica exigncia para a portabilidade do arquivo binrio que a mquina utilize inteiros com sinais em complemento de dois e formato de pontos flutuante IEEE. No h uma grande perda de velocidade em realizar esse tipo de armazenamento. O cdigo atual busca-valor-coluna tambm no crtico em relao ao tempo comparado a outro cdigo. O tratamento interno para uma coluna com a propriedade de AUTO_INCREMENT (numerao automtica sequencial para uma chave primaria) em uma Engine MyISAM de atualizar automaticamente aps INSERT/UPDATE seus ndices de controle. Ele far colunas AUTO_INCREMENT mais rpidas (pelo menos 10%) e nmeros antigos no sero reutilizados. Ao inserir ordenadamente (como quando se utiliza colunas AUTO_INCREMENT), a rvore-chave ser separada de forma que o n do mais alto contenha apenas uma chave. Isso aumentar a utilizao de espao na rvore de chaves. As colunas BLOB e TEXT podem ser indexadas, assim como os valores NULL so permitidos em colunas indexadas.
Todas as chaves numricas esto armazenadas com o byte mais alto em primeiro para conseguir melhor compactao do ndice.
Unidade 4
211
Seo 2 Banco de dados e acessos

Relembramos alguns conceitos de banco de dados e conhecemos algumas caractersticas inerentes ao MySQL que nos ajudaram em um desenvolvimento. Portanto, alguns procedimentos so ideais para que possamos trabalhar.
No vamos entrar na instalao do MySQL, uma vez que, pela diversidade de sistemas operacionais e constante atualizao banco, fica invivel a manuteno de um tutorial para instalao. Qualquer dvida, deve-se solicitar ao professor da disciplina.
Criando uma base de dados

O conjunto de caracteres aceito em um banco de dados denominado collation. No MySQL no podem ser nulos. Os comandos CREATE DATABASE e ALTER DATABASE possuem clusulas opcionais para especificarem o collation de banco de dados:
CREATE DATABASE db_name [DEFAULT CHARACTER SET character_set_name [COLLATE collation_ name]] ALTER DATABASE db_name [DEFAULT CHARACTER SET character_set_name [COLLATE collation_ name]] Exemplo: CREATE DATABASE db_name DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
O collation do banco de dados utiliza valores padres caso no sejam informados durante a criao deste banco. O valor padro definido na configurao do MySQL. Assim, para voc criar seu primeiro banco, deve acessar o MySQL com o usurio de administrador (normalmente o login root) por meio de um cliente SQL conectado ao banco de dados.
212
Em seguida, crie uma base de dados (ou schema, ou banco de dados). O comando SQL para isso create database.
Vamos supor que o nome da base de dados seja prg3. Ento o comando ficaria: CREATE DATABASE prg3 ;
Lembre-se que o SQL no case-sensitive, portanto no diferencia maisculas de minsculas.
Aps executar esse comando, o banco de dados ser criado com as configuraes padres. Caso queira trocar o nome do banco ou collation criada, basta utilizar o comando ALTER DATABASE. Vamos supor que fosse necessrio alterar o comando o collation para Sueco, sem diferenciar maisculas ou minsculas. Faramos o seguinte comando:
ALTER DATABASE prg3 DEFAULT CHARACTER SET latin1 COLLATE latin1_ general_ci;
Lembre-se que o collation do banco de dados no impede que a tabela seja criada em outra coleo. Apenas indica qual o padro a ser utilizado pelo banco. Veja a seguir uma tabela com os collations mais utilizados.
Collation Descrio
big5_bin binary
cp1250_bin cp1250_croatian_ci cp1250_czech_cs cp1250_general_ci cp1250_polish_ci
Chins Tradicional, Binrio Binrio

cp1250 (Windows Central European) Europeu Central (multilinguagem), Binrio Croata, No diferencia maisculas/minsculas Tcheco, Diferencia maisculas/minsculas Europeu Central (multilinguagem), No diferencia maisculas/minsculas Polons, No diferencia maisculas/minsculas
Unidade 4
213
Collation
Descrio cp852 (DOS Central European)
cp852_bin cp852_general_ci
Europeu Central (multilinguagem), Binrio Europeu Central (multilinguagem), No diferencia maisculas/minsculas cp866 (DOS Russian) Russo, Binrio Russo, No diferencia maisculas/minsculas latin1 (cp1252 West European) Oeste Europeu (multilinguagem), Binrio Dinamarqus, No diferencia maisculas/minsculas Oeste Europeu (multilinguagem), No diferencia maisculas/minsculas Oeste Europeu (multilinguagem), Diferencia maisculas/minsculas Alemo (dicionrio), No diferencia maisculas/ minsculas Alemo (Agenda de telefones), No diferencia maisculas/minsculas Espanhol, No diferencia maisculas/minsculas Suco, No diferencia maisculas/minsculas latin2 (ISO 8859-2 Central European) Europeu Central (multilinguagem), Binrio Croata, No diferencia maisculas/minsculas Tcheco, Diferencia maisculas/minsculas Europeu Central (multilinguagem), No diferencia maisculas/minsculas Hngaro, No diferencia maisculas/minsculas latin5 (ISO 8859-9 Turkish) Turco, Binrio Turco, No diferencia maisculas/minsculas Bltico (multilinguagem), Binrio Estoniano, Diferencia maisculas/minsculas
cp866_bin cp866_general_ci latin1_bin latin1_danish_ci latin1_general_ci latin1_general_cs latin1_german1_ci latin1_german2_ci latin1_spanish_ci latin1_swedish_ci latin2_bin latin2_croatian_ci latin2_czech_cs latin2_general_ci latin2_hungarian_ci latin5_bin latin5_turkish_ci latin7_bin latin7_estonian_cs
latin7 (ISO 8859-13 Baltic)
214
Collation latin7_general_ci latin7_general_cs
Descrio Bltico (multilinguagem), No diferencia maisculas/ minsculas Bltico (multilinguagem), Diferencia maisculas/ minsculas macce (Mac Central European) Europeu Central (multilinguagem), Binrio Europeu Central (multilinguagem), No diferencia maisculas/minsculas macroman (Mac West European) Oeste Europeu (multilinguagem), Binrio Oeste Europeu (multilinguagem), No diferencia maisculas/minsculas sjis (Shift-JIS Japanese) Japons, Binrio Japons, No diferencia maisculas/minsculas swe7 (7bit Swedish) Suco, Binrio Suco, No diferencia maisculas/minsculas utf8 (UTF-8 Unicode) Unicode (multilinguagem), Binrio Tcheco, No diferencia maisculas/minsculas Dinamarqus, No diferencia maisculas/minsculas Esperanto, No diferencia maisculas/minsculas Estoniano, No diferencia maisculas/minsculas Unicode (multilinguagem), No diferencia maisculas/ minsculas Hngaro, No diferencia maisculas/minsculas Islands, No diferencia maisculas/minsculas Letons, No diferencia maisculas/minsculas Litunio, No diferencia maisculas/minsculas Prsa, No diferencia maisculas/minsculas Polons, No diferencia maisculas/minsculas Oeste Europeu, No diferencia maisculas/minsculas
macce_bin macce_general_ci
macroman_bin macroman_general_ ci sjis_bin sjis_japanese_ci swe7_bin swe7_swedish_ci utf8_bin utf8_czech_ci utf8_danish_ci utf8_esperanto_ci utf8_estonian_ci utf8_general_ci utf8_hungarian_ci utf8_icelandic_ci utf8_latvian_ci utf8_lithuanian_ci utf8_persian_ci utf8_polish_ci utf8_roman_ci
Unidade 4
215
Collation utf8_romanian_ci utf8_slovak_ci utf8_slovenian_ci utf8_spanish2_ci utf8_spanish_ci utf8_swedish_ci utf8_turkish_ci utf8_unicode_ci Fonte: <http://www.mysql.com>.
Descrio Romno, No diferencia maisculas/minsculas Eslovquio, No diferencia maisculas/minsculas Eslovnio, No diferencia maisculas/minsculas Espanhol Traditional, No diferencia maisculas/ minsculas Espanhol, No diferencia maisculas/minsculas Suco, No diferencia maisculas/minsculas Turco, No diferencia maisculas/minsculas Unicode (multilinguagem), No diferencia maisculas/ minsculas
Criando usurio
Um fator importante para o desenvolvimento Web a segurana dos seus dados. Vale a pena ressaltar que, por causa da arquitetura da Web, o sistema fica mais exposto a pessoas mal intencionadas. Por isso, uma ateno segurana empregada fundamental. O MySQL usa o comando Grant para criar e conceder privilgios para os usurios. Esse procedimento importante para que possamos aumentar a segurana da aplicao. O MySQL no valida somente o login e a senha, mas tambm o endereo de onde se est conectando. Assim, mesmo que algum mal intencionado descubra o login e a senha, ele somente poder utilizar pelo servidor que ela est configurada. Para ser mais claro, vamos observar o registro de login do usurio do MySQL. A sintaxe completa do comando :
216
GRANT priv_type [(column_list)] [, tipo_priv [(column_list)] ...] ON {tbl_name | * | *.* | db_name.*} TO user_name [IDENTIFIED BY [PASSWORD] password] [, user_name [IDENTIFIED BY [PASSWORD] password] ...] [REQUIRE NONE | [{SSL| X509}] [CIPHER cipher [AND]] [ISSUER issuer [AND]] [SUBJECT subject]] [WITH [GRANT OPTION | MAX_QUERIES_PER_HOUR # | MAX_UPDATES_PER_HOUR # | MAX_CONNECTIONS_PER_HOUR #]]
Porm, podem existir casos em que a revogao dos direitos ou privilgios do usurio se faz necessria. Para isso, o comando a ser utilizado o REVOKE. A sua sintaxe :
REVOKE priv_type [(column_list)] [, priv_type [(column_list)] ...] ON {tbl_name | * | *.* | db_name.*} FROM user_name [, user_name ...]
Esse comando permite manipular os privilgios em quatro nveis: global, banco de dados, tabelas, colunas.
1. Nvel global
Neste nvel, os privilgios so aplicados a todos os bancos de dados de um servidor. Podem ser concedidos com o comando GRANT ALL ON *.* e revogados com o comando REVOKE ALL ON *.*.
Unidade 4
217
2. Nvel dos bancos de dados

Aplicam-se a todas as tabelas em um determinado banco de dados. A sintaxe para esta segurana so GRANT ALL ON db.* e REVOKE ALL ON db.*e concedero e revogaro apenas privilgios de banco de dados.
3. Nvel das tabelas

O nvel de tabelas aplica-se s colunas em uma determinada tabela. Para este privilgio, teremos de detalhar mais a sintaxe do comando utilizando GRANT ALL ON db.table e REVOKE ALL ON db.table e concedero e revogaro apenas privilgios de tabelas.
4. Nvel das colunas

Privilgios de colunas aplicam-se a uma nica coluna em uma determinada tabela. Para este comando, necessrio especificar cada acesso individualmente para cada coluna. Lembre-se que para o privilgio de DELETE sempre se refere a todo o registro. No possvel conceder um delete no nvel de coluna. Alm dos nveis, podemos ter o tipo de privilgios os quais podemos relacionar na tabela a seguir.
218
Privilgios ALL [PRIVILEGES]
Descrio Configura todos os privilgios simples, excetoWITH GRANT OPTION. Permite o uso deALTER TABLE. Permite o uso deCREATE TABLE. Permite o uso deCREATE TEMPORARY TABLE. Permite o uso deDELETE. Permite o uso deDROP TABLE. Permite que o usurio execute STORED PROCEDURES. Permite o uso deSELECT ... INTO OUTFILEeLOAD DATA INFILE. Permite o uso deCREATE INDEXeDROP INDEX. Permite o uso deINSERT Permite o uso deLOCK TABLESem tabelas nas quais se tem o privilgioSELECT. Permite o uso deSHOW FULL PROCESSLIST. Para o futuro. Permite o uso deFLUSH. D o direto ao usurio de perguntar onde o slave/ master est. Utilizando em replicao de banco de dados. Necessrio para a replicao dos slaves (para ler logs binrio do master). Permite o uso deSELECT. SHOW DATABASESexibe todos os bancos de dados.. Permite o uso demysqladmin shutdown. Permite a conexo (uma vez) mesmo se max_connections tiverem sido alcanados e executa o comandoCHANGE MASTER,KILL thread,mysqladmin debug,PURGE MASTER LOGSeSET GLOBAL. Permite o uso deUPDATE Sinnimo para sem privilgios. Sinnimo paraWITH GRANT OPTION.
ALTER CREATE CREATE TEMPORARY TABLES DELETE DROP EXECUTE FILE INDEX INSERT LOCK TABLES PROCESS REFERENCES RELOAD REPLICATION CLIENT
REPLICATION SLAVE SELECT SHOW DATABASES SHUTDOWN SUPER
UPDATE USAGE GRANT OPTION
Unidade 4
219
Os nicos valores do tipo de privilgio que voc pode especificar para uma tabela so: SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, GRANT, INDEX e ALTER. J para colunas voc pode especificar para uma coluna so: SELECT, INSERT, UPDATE e REFERENCES, como o mencionado anteriormente. Ateno:
O MySQL permite que voc crie privilgios a nvel de banco de dados mesmo se o banco de dados no existir para tornar fcil de se preparar para o uso do banco de dados. O MySQL no revogar automaticamente qualquer privilgio, mesmo se voc apagar uma tabela ou um banco de dados. Voc pode configurar privilgios globais utilizando a sintaxe ON *.*. Voc pode configurar privilgios de bancos de dados utilizando a sintaxe ON nome_bd.*. Se voc especificar ON * e estiver com algum banco de dados aberto, sero configurados os privilgios somente para este banco de dados. Se voc especificar ON * e voc no tem possui um banco de dados aberto, afetaro os privilgios globais.
Os privilgios para uma tabela ou coluna so formados por meio do OU lgico dos privilgios em cada um dos quatro nveis de privilgios. Por exemplo, um usurio tem um privilgio global select, isso no pode ser negado por uma entrada no nvel de banco de dados, tabela ou coluna. Os privilgios para uma coluna podem ser calculados da seguinte forma:
privilgios globais OU (privilgios de banco de dados E privilgios de mquina) OU privilgios de tabela OU privilgios de coluna.
Na maioria dos casos, os direitos a um usurio so atribudos em apenas um dos nveis de privilgios, portanto a situao no to complicada como mostrado anteriormente.
220
Um novo usurio criado ou, se voc possui privilgios de concesso globais, a senha do usurio ser especificada utilizando a clusula IDENTIFIED BY, se uma for dada. Se o usurio j possui uma senha, ela trocada pela nova. Se voc no quiser enviar a senha em texto puro, voc pode usar a opo PASSWORD seguida de uma senha embaralhada da funo SQL PASSWORD().
Se voc criar um novo usurio, mas no especificar uma clusula IDENTIFIED BY, o usurio no possuir uma senha. Isso no seguro.
Somente sero apresentadas as tabelas ou os banco de dados pelo comando SHOW TABLES (por exemplo) que o usurio tm acesso. Se um usurio no tem privilgios em uma tabela, ela no mostrada quando o usurio solicita uma lista de tabelas ou de banco de dados. A clusula WITH GRANT OPTION d ao usurio habilidade de fornecer a outros usurios quaisquer privilgios que ele tenha em um nvel especfico de privilgio. Tenha sempre cuidado ao fornecer o privilgio Grant. Voc no pode conceder a outro usurio um privilgio que no possua; o privilgio GRANT possibilita fornecer somente os privilgios que possuir. Esteja ciente que, quando conceder a um usurio o privilgio GRANT em um nvel particular de privilgios, qualquer privilgio que o usurio j possua nesse nvel tambm pode ser concedido por esse usurio. Suponha que voc conceda a um usurio o privilgio INSERT em um banco de dados. Se voc conceder o privilgio SELECT no banco de dados e especificar WITH GRANT OPTION, o usurio, alm de poder repassar o privilgio SELECT, poder repassar o insert. Se voc concede o privilgio UPDATE para o usurio no banco de dados, o usurio poder conceder os privilgios INSERT, SELECT e UPDATE.
Unidade 4
221
Quando o MySQL inicia, todos os privilgios so lidos na memria. Privilgios de bancos de dados, tabelas e colunas so iniciados um vez, e privilgios ao nvel de usurio fazem efeito na prxima vez que o usurio conectar. Modificaes nas tabelas de permisses que voc realiza utilizando GRANT ou REVOKE so percebidas pelo servidor imediatamente. Quaisquer outras alteraes devero ser acrescidas do comando FLUSH PRIVILEGES, assim dizemos ao servidor para recarregar as tabelas de permisses. Vamos criar um usurio para que possamos iniciar a construo de uma aplicao. Vamos supor que o nome do usurio seja web e a senha seja senha123. O comando ficaria:
GRANT SELECT , INSERT ,UPDATE ,DELETE, RELOAD, REFERENCES, SHOW DATABASES, LOCK TABLES ON prg3 .* to web@localhost identified by senha123;
Esse exemplo o mais simples em criao de usurios e estamos concedendo privilgio de selecionar, inserir, alterar e excluir os dados da base de dados prg3 para todas as tabelas (prg3.*). O login do usurio ficou web e somente poder ser acessado do prprio servidor que o MySQL est instalado.
Para que esse usurio funcione na aplicao, obrigatrio que o servidor Web tambm esteja instalado na mesma mquina. Caso esteja em outra, no ter permisso para se conectar no banco de dados.
Perceba que a arquitetura da internet possibilita essa configurao, mesmo que vrias pessoas acessem um site qualquer. O site localiza-se em um servidor e todas as conexes que sarem dele sempre sero feitas pelo servidor Web, mesmo que a solicitao seja feita por um usurio na internet. - Lembre-se que, por causa da arquitetura da internet, deve-se sempre ter o servidor Web muito bem configurado para que no deixem pessoas mal intencionadas acessar servios derivados dele.
222
- Sempre tenha um projeto definido para o banco de dados. Caso o seu banco no esteja bem definido, ser difcil armazenar e recuperar as informaes
Seo 3 Trabalhando com tabelas

J criamos o banco de dados e o usurio que ser acessado pela aplicao. Agora veremos a criao das tabelas desse banco de dados. Para isso, o comando as ser utilizado o CREATE TABLE e sua sintaxe completa :
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] nome_tabela [(definio_ create,...)] [table_options] [select_statement]
ou
CREATE [TEMPORARY] TABLE [IF NOT EXISTS] nome_tabela [(]LIKE nome_antigo_tabela[)];
definio_create:
nome_coluna tipo [NOT NULL | NULL] [DEFAULT valor_padro] [AUTO_ INCREMENT] [[PRIMARY] KEY] [COMMENT string] [definio_referncia] | [CONSTRAINT [symbol]] PRIMARY KEY (index_col_name,...) | KEY [nome_indice] (index_nome_coluna,...) | INDEX [nome_indice] (index_nome_coluna,...) | [CONSTRAINT [symbol]] UNIQUE [INDEX] [index_name] (index_col_ name,...) | FULLTEXT [INDEX] [nome_indice] (index_nome_coluna,...) | [CONSTRAINT [symbol]] FOREIGN KEY [index_name] (index_col_ name,...) [definio_referncia] | CHECK (expr)
Unidade 4
223
tipo:
TINYINT[(tamanho)] [UNSIGNED] [ZEROFILL] | SMALLINT[(tamanho)] [UNSIGNED] [ZEROFILL] | MEDIUMINT[(tamanho)] [UNSIGNED] [ZEROFILL] | INT[(tamanho)] [UNSIGNED] [ZEROFILL] | INTEGER[(tamanho)] [UNSIGNED] [ZEROFILL] | BIGINT[(tamanho)] [UNSIGNED] [ZEROFILL] | REAL[(tamanho,decimais)] [UNSIGNED] [ZEROFILL] | DOUBLE[(tamanho,decimais)] [UNSIGNED] [ZEROFILL] | FLOAT[(tamanho,decimais)] [UNSIGNED] [ZEROFILL] | DECIMAL(tamanho,decimais) [UNSIGNED] [ZEROFILL] | NUMERIC(tamanho,decimais) [UNSIGNED] [ZEROFILL] | CHAR(tamanho) [BINARY | ASCII | UNICODE] | VARCHAR(tamanho) [BINARY] | DATE | TIME | TIMESTAMP | DATETIME | TINYBLOB | BLOB | MEDIUMBLOB | LONGBLOB | TINYTEXT | TEXT | MEDIUMTEXT | LONGTEXT | ENUM(value1,value2,value3,...) | SET(value1,value2,value3,...)
index_nome_coluna:
224
nome_coluna [(tamanho)] [ASC | DESC]
definio_referncia:
REFERENCES nome_tabela [(index_nome_coluna,...)] [MATCH FULL | MATCH PARTIAL] [ON DELETE opo_referncia] [ON UPDATE opo_referncia]
opo_referncia:
RESTRICT | CASCADE | SET NULL | NO ACTION | SET DEFAULT
opes_tabela:
table_option [table_option] ...
opes_tabela:
ENGINE = {BDB | HEAP | ISAM | InnoDB | MERGE | MRG_MYISAM | MYISAM } | AUTO_INCREMENT = # | AVG_ROW_LENGTH = # | CHECKSUM = {0 | 1} | COMMENT = string | MAX_ROWS = # | MIN_ROWS = # | PACK_KEYS = {0 | 1 | DEFAULT} | PASSWORD = string | DELAY_KEY_WRITE = {0 | 1} | ROW_FORMAT = { DEFAULT | DYNAMIC | FIXED | COMPRESSED } | RAID_TYPE = { 1 | STRIPED | RAID0 } RAID_CHUNKS=# RAID_CHUNKSIZE=# | UNION = (table_name,[table_name...]) | INSERT_METHOD = { NO | FIRST | LAST } | DATA DIRECTORY = caminho absluto para o diretrio | INDEX DIRECTORY = caminho absluto para o diretrio | DEFAULT CHARACTER SET character_set_name [COLLATE collation_name]
Unidade 4
225
Obviamente, no utilizamos normalmente essa sintaxe completa, mas uma sintaxe em que podemos definir o nome da tabela, os campos, o relacionamento e o tipo da tabela. Vale pena ressaltar que a tabela temporria (quando especificamos a instruo TEMPORARY) visvel apenas a para a conexo atual, e ser automaticamente deletada quando a conexo fechada. Isso significa que duas conexes diferentes podem usar o mesmo nome de tabela temporria sem conflitos com outras ou com uma tabela existente com o mesmo nome. Para a arquitetura das aplicaes Web, onde, via de regra, as conexes so finalizadas a cada retorno da requisio, o seu uso fica ainda mais limitado. Essa tabela temporria ser acessada somente durante o processamento da pgina pelo servidor. Quando a requisio retorna ao usurio, a conexo fecha e a tabela excluda. Quando falamos de tipos de registros, podemos descrever as seguintes caractersticas: 1. TINYINT[(M)] [UNSIGNED] [ZEROFILL] Um inteiro muito pequeno. A faixa desse inteiro com sinal de -128 at 127. A faixa sem sinal de 0 at 255. 2. BIT, BOOL, BOOLEAN Estes so sinnimos para TINYINT(1). 3. SMALLINT[(M)] [UNSIGNED] [ZEROFILL] Um inteiro pequeno. A faixa do inteiro com sinal de -32768 at 32767. A faixa sem sinal de 0 a 65535. 4. MEDIUMINT[(M)] [UNSIGNED] [ZEROFILL] Um inteiro de tamanho mdio. A faixa com sinal de -8388608 a 8388607. A faixa sem sinal de 0 a 16777215. 5. INT[(M)] [UNSIGNED] [ZEROFILL] Um inteiro de tamanho normal. A faixa com sinal de -2147483648 a 2147483647. A faixa sem sinal de 0 a 4294967295. 6. INTEGER[(M)] [UNSIGNED] [ZEROFILL] Este um sinnimo para INT.
226
7. BIGINT[(M)] [UNSIGNED] [ZEROFILL] Um inteiro grande. A faixa com sinal de -9223372036854775808 a 9223372036854775807. A faixa sem sinal de 0 a 18446744073709551615. Existem algumas coisas sobre campos BIGINT sobre as quais voc deve estar ciente:
Todas as operaes aritmticas so feitas usando valores BIGINT ou DOUBLE com sinal, no devemos utilizar inteiros sem sinal maiores que 9223372036854775807 (63 bits), exceto com funes ded bit! Se voc fizer isso, alguns dos ltimos digitos no resultado podem estar errados por causa de erros de arredondamento na converso de BIGINT para DOUBLE. Quando usar operadores (+, -, *, etc.) em que ambos os operandos so inteiros. Voc pode armazenar valores inteiro exatos em um campo BIGINT armazenando-os como string, como ocorre nestes casos, no haver nenhuma representao intermediaria dupla. -, +, e * sero utilizados em clculos aritimticos BIGINT quando ambos os argumentos forem valores do tipo INTEGER! Isso significa que, se voc multiplicar dois inteiros grandes (ou obter resultados de funes que retornam inteiros), voc pode obter resultados inesperados quando o resultado for maior que 9223372036854775807.
8. FLOAT(preciso) [UNSIGNED] [ZEROFILL] Um nmero de ponto flutuante. Um ponto flutuante a definio dada ao processador interpretar os nmeros reais. Podemos considerar que engloba o tipo ponto flutuante qualquer nmero que possa ser representado por meio de uma notao cientfica (N intero multiplicado por uma base elevado a um expoente). Esses tipos so como os tipos FLOAT e DOUBLE descritos logo a seguir. FLOAT(X) tem a mesma faixa que os tipos correspondentes FLOAT e DOUBLE, mas o tamanho do display e o nmero de casas decimais
Unidade 4
227
indefinido. Note que o uso de FLOAT pode trazer alguns problemas inesperados, como nos clculos, j que em MySQL todos so feitos com dupla preciso. 9. FLOAT[(M,D)] [UNSIGNED] [ZEROFILL] Um nmero de ponto flutuante pequeno (preciso simples). Os valores permitidos esto entre -3.402823466E+38 e -1.175494351E-38, 0 e entre 1.175494351E-38 e 3.402823466E+38. Se UNSIGNED for especificado, valores negativos no so permitidos O M a largura do display e o D o nmero de casas decimais. FLOAT sem um argumento ou FLOAT(X) onde X <=24 tende a um nmero de ponto flutuante de preciso simples. 10. DOUBLE[(M,D)] [UNSIGNED] [ZEROFILL] Um nmero de ponto flutuante de tamanho normal (dupla preciso). Valores permitidos esto entre -1.7976931348623157E+308 e -2.2250738585072014E308, 0 e entre 2.2250738585072014E-308 e 1.7976931348623157E+308. Se UNSIGNED for especificado, valores negativos no so permitidos. O M a largura do display e o D nmero de casa decimais. DOUBLE sem argumento ou FLOAT(X) onde 25 <= X <= 53 so nmeros de ponto flutuante de dupla preciso. 11. DOUBLE PRECISION[(M,D)] [UNSIGNED] [ZEROFILL], REAL[(M,D)] [UNSIGNED] [ZEROFILL] Estes so sinnimos para DOUBLE. 12. DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL] Um nmero de ponto flutuante no empacotado. Comporta-se como um campo CHAR: ``no empacotado significa que o nmero armazenado como uma string, usando um caractere para cada dgito do valor. O ponto decimal e, para nmeros negativos, o sinal de menos (-), no so contados em M (mas reservado espao para isso). Se D for 0, os valores no tero ponto decimal ou parte fracionria. A faixa mxima do valor DECIMAL a mesma do DOUBLE, mas a faixa atual para um campo DECIMAL dado pode
228
ser limitado pela escolha de M e D. Se UNSIGNED especificado, valores negativos no so permitidos. Se D no for definido, ser considerado como 0. Se M no for definido, considerado como 10. 13. DEC[(M[,D])] [UNSIGNED] [ZEROFILL], NUMERIC[(M[,D])] [UNSIGNED] [ZEROFILL], FIXED[(M[,D])] [UNSIGNED] [ZEROFILL] Este um sinnimo para DECIMAL. 14. DATE Uma data. A faixa suportada entre 1000-01-01 e 9999-12-31. MySQL mostra valores DATE no formato AAAA-MM-DD, mas permite a voc atribuir valores a campos DATE utilizando tanto strings quanto nmeros. 15. DATETIME Uma combinao de hora e data. A faixa suportada entre 1000-01-01 00:00:00 e 9999-12-31 23:59:59. MySQL mostra valores DATETIME no formato AAAA-MM-DD HH:MM:SS, mas permite a voc atribuir valores a campos DATETIME utilizado strings ou nmeros. 16. TIMESTAMP[(M)] Um timestamp. A faixa entre 1970-01-01 00:00:00 e algum momento no ano 2037.
Propriedades das colunas

As colunas ainda possuem propriedades que ajudam a restringir o seu contedo assim como acrescenta regras ao seu banco de dados:
Se nem NULL nem NOT NULL forem especificados, a coluna tratada como se NULL fosse especificado.
Uma coluna integer pode ter o atributo adicional AUTO_ INCREMENT. Quando voc insere um valor de NULL ou 0 em uma coluna AUTO_INCREMENT indexada, a coluna definida com o valor da prxima sequncia. Normalmente
Unidade 4
229
ele valor+1, onde valor o maior valor para a coluna column atualmente na tabela. A sequncia de AUTO_INCREMENT comea com 1.
Se voc deletar a linha contendo o valor mximo para uma coluna AUTO_INCREMENT, o valor no ser reutilizado por tabelas MyISAM ou InnoDB. Se voc deletar todas as linhas na sua tabela com DELETE FROM nome_tabela (sem um WHERE) no modo AUTOCOMMIT, a sequncia ser reiniciada em todos os tipos de tabela, exceto InnoDB.
Apenas poder existir uma coluna AUTO_INCREMENT por tabela. Ainda deve ser indexado e no ter valor DEFAULT tampouco valores negativos.
Em tabelas MyISAM e BDB, voc pode especificar colunas AUTO_INCREMENT secundrias em uma chave multicoluna. Um valor padro (DEFAULT) tem de ser constante, ele no pode ser uma funo ou uma expresso. Se nenhum valor DEFAULT especificado para uma coluna, o MySQL atribuir um automaticamente, como a seguir:
Se a coluna aceitar NULL como um valor, o valor padro NULL. Se a coluna declarada como NOT NULL, o valor padro depende do tipo de coluna:
Para tipos numricos no declarados com o atributo AUTO_INCREMENT, o padro 0. Para uma coluna AUTO_INCREMENT, o valor padro o prximo valor na sequncia. Para tipos date e time diferentes de TIMESTAMP, o padro o valor zero apropriado para o tipo. Para a primeira coluna TIMESTAMP na tabela, o padro a data e hora atuais.
230
Para tipos strings diferentes de ENUM, o valor padro uma string vazia. Para ENUM, o padro o primeiro valor enumerado.
Valores padres devem ser constantes. Isso significa, por exemplo, que voc no pode definir o padro de uma coluna date como o valor de funes como NOW() or CURRENT_DATE. Um comentrio para uma coluna pode ser especificado com a opo COMMENT. O comentrio mostrado pela instruo SHOW CREATE TABLE e por SHOW FULL COLUMNS. KEY normalmente um sinnimo para INDEX. O atributo de chave PRIMARY KEY tambm pode ser especificado apenas como KEY. No MySQL, uma chave UNIQUE s pode ter valores distintos. Um erro ocorre se voc tentar adicionar uma nova linha com uma chave que coincida com uma j existente.
Primary Key
PRIMARY KEY uma chave nica (KEY) onde todas as colunas-chave devem ser definidas como NOT NULL. Se elas no forem explicitamente declaradas como NOT NULL, isso ser feito implicitamente e sem aviso. No MySQL, a chave chamada PRIMARY. Uma tabela pode ter apenas uma PRIMARY KEY. Se voc no tiver uma PRIMARY KEY e alguma aplicao perguntar pela PRIMARY KEY em sua tabela, o MySQL retornar primeira chave UNIQUE, que no possui nenhuma coluna NULL, como a PRIMARY KEY. Uma PRIMARY KEY pode ser um ndice multicoluna. Porm, voc no pode criar um ndice multicoluna usando o atributo de chave PRIMARY KEY em uma especificao de coluna. Fazendo assim apenas colunas simples podero ser marcadas como primrias. Voc deve utilizar uma clusula PRIMARY KEY(index_nome_coluna, ...) separada.
Unidade 4
231
Um ndice UNIQUE aquele no qual todos os valores no ndice devem ser distintos. A exceo a isso que, se for permitido conter valores NULL em uma coluna no ndice, ele pode conter mltiplos valores NULL. Essa exceo no se aplica a tabelas BDB, que permitem apenas um nico NULL. Se a chave PRIMARY ou UNIQUE consistir de apenas uma coluna e ela do tipo inteiro, voc tambm poder se referir a ela como _rowid. Se voc no atribuir um nome ao ndice que no um PRIMARY KEY, ele ter o mesmo nome da primeira index_ nome_coluna, com um sufixo opcional (_2, _3, ...) para tornlo nico. Voc pode nome de ndices para uma tabela usando SHOW INDEX FROM nome_tabela. Apenas os tipos de tabelas MyISAM, InnoDB, e BDB suportam ndices em coluna que possam ter valores NULL. Nos outros casos, voc deve declarar tais colunas NOT NULL ou um erro ser retornado. Com a sintaxe nome_coluna(length) em uma especificao de ndice, voc pode criar um ndice que utiliza apenas os primeiros length() bytes de uma coluna CHAR ou VARCHAR. Isso pode tornar o arquivo de ndices muito menor. Apenas os tipos de tabela MyISAM e InnoDB suportam ndice em colunas BLOB e TEXT. Ao colocar um ndice em uma coluna BLOB ou TEXT, voc sempre DEVE especificar o tamanho do ndice, at 255 bytes. Por exemplo:
CREATE TABLE test (blob_col BLOB, INDEX(blob_col(10)));
Uma especificao index_col_name pode finalizar com ASC ou DESC. Essas palavras-chaves so permitidas para extenso futura para especificar o armazenamento do valor do ndice em crescente ou decrescente. Atualmente elas so analisadas, mas ignoradas; valores de ndice so sempre armazenados em ordem crescente. Quando voc utiliza ORDER BY ou GROUP BY com uma coluna TEXT ou BLOB, o servidor ordena valores usando apenas o nmero inicial de bytes, indicado pela varivel do servidor max_sort_length.
232
Voc tambm pode criar ndices FULLTEXT especiais. Eles so usados para busca full-text. Apenas o tipo de tabela MyISAM suporta ndices FULLTEXT. Eles s podem ser criados em colunas CHAR, VARCHAR e TEXT. A indexao sempre ocorre sobre toda a coluna; ndices parciais no so suportados. Tabelas InnoDB suportam verificao de chaves estrangeiras. Note que a sintaxe FOREIGN KEY no InnoDB mais restrita que a sintaxe apresentada anteriormente. As colunas da tabela indicada devem ser nomeadas explicitamente. O InnoDB suporta ambas as aes ON DELETE e ON UPDATE em chaves estrangeiras. Para outros tipos de tabelas, MySQL Server analisa as sintaxes FOREIGN KEY, CHECK e REFERENCES no comando CREATE TABLE, mas sem tal ao ser tomada. Para tabelas ISAM e MyISAM, cada coluna NULL tem um bit extra, arredondado para o byte mais prximo. O tamanho mximo de um registro em bytes pode ser calculado como a seguir:
tamanho da linha = 1 + (soma do tamanho da coluna) + (nmeros de coluna NULL + delete_flag 7)/8 + (nmero de colunas de tamanho varivel)
delete_flag 1 para tabelas com formato de registro esttico. Tabelas estticas usam um bit no registro para um parmetro que indica se a linha foi deletada. delete_flag 0 para tabelas dinmicas porque esse parmetro armazenado no cabealho da linha dinmica. Esses clculos no se aplicam a tabelas InnoDB, para a qual o tamanho do armazenamento no diferente para colunas NULL comparados a colunas NOT NULL. Para ajudar a ter um melhor entendimento, vamos utilizar um conjunto pequeno de tabelas em que possamos sintetizar as informaes e nos focar na lgica embutida. Relembrando que o comando para a criao de tabelas o create table. Ainda como forma didtica, vamos supor que tenhamos
Unidade 4
233
dois cadastros: livros e autores. Para criar essas tabelas, utilize os comandos a seguir.
CREATE TABLE prg3.autores ( cod_autor int(11) NOT NULL AUTO_INCREMENT, nom_autor varchar(50) NOT NULL, PRIMARY KEY (cod_autor), KEY nom_autor (nom_autor) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Neste caso, estamos criando a tabela autores dentro da base de dados j criada prg3. Essa tabela possui dois campos: cod_autor, nom_autor. A chave primria o campo cod_autor. Vamos inserir os seguintes dados:
INSERT INTO autores (cod_autor, nom_autor) VALUES (NULL, Fulano de Tal); INSERT INTO autores (nom_autor) VALUES (Outro Autor);
Perceba a sutil diferena entre as duas instrues. A primeira instruo informa que o campo cod_autor receber NULL para forar a ao do AUTO_INCREMENT. No segundo comando, o campo omitido e com isso foramos a interpretao do gerenciador que o campo est recebendo NULL e ter o mesmo comportamento da primeira instruo. Portanto, se selecionarmos os registros, dever retornar os seguintes dados: SELECT cod_autor, nom_autor FROM autores;
cod_autor nom_autor Fulano de Tal Outro Autor
1
2
J criamos uma tabela criada de autores, portanto nada mais natural que criar uma segunda tabela de livros.
234
CREATE TABLE IF NOT EXISTS livros ( cod_livro int(11) NOT NULL AUTO_INCREMENT, nom_livro varchar(50) NOT NULL, cod_autor int(11) DEFAULT NULL, PRIMARY KEY (cod_livro), KEY nom_livro (nom_livro,cod_autor), KEY cod_autor (cod_autor) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Temos uma chave primria cod_livro. O nome do livro (nom_ livro) que possui um ndice composto com o cod_autor. Por fim, o cod_autor. Perceba que apenas existe o cdido do autor. Esse campo relacionar com a tabela autor para que possamos minimizar dados, redundncia e possamos melhor organizar as informaes. Vamos ao segundo passo, vamos relacionar as duas tabelas.
ALTER TABLE livros ADD CONSTRAINT livros_fk_1 FOREIGN KEY (cod_autor) REFERENCES autores (cod_autor) ON DELETE SET NULL ON UPDATE SET NULL;
Vale a ressalva que a criao do relacionamento poderia ser realizada no prprio comando CREATE. Agora podemos inserir dados na tabela de livros:
INSERT INTO livros (cod_livro ,nom_livro ,cod_autor) VALUES (NULL , PHP, 1), (NULL , MySQL, 1);
Desta vez, em um nico comando inserimos dois registros. No MySQL esse comando muito til para economizar instrues a serem realizadas. Selecionaremos a tabela livros e relacionaremos a tabela autor. Alm de um comando, j se torna base de um relatrio plausvel.
Unidade 4
235
SELECT cod_livro, nom_livro, nom_autor FROM livros a, autores b WHERE a.cod_autor = b.cod_autor;
cod_livro 2 1
nom_livro MySQL PHP
nom_autor Fulano de Tal Fulano de Tal
Quando igualamos os valores dos campos relacionados, otimizamos a busca e condicionamos o resultado verificao vlida dos registros. Ou seja, somente retornar as informaes que se relacionarem. Vimos que o MySQL um banco de dados consistente e simplificado. A sua instalao, o seu gerenciamento e os seus controles so postos de tal forma que facilitam o trabalho do desenvolvedor.
Voc pode pesquisar mais o MySQL no endereo: <http://www.mysql. com>.
Seo 4 API do PHP

O PHP utiliza interfaces que so chamadas de API para realizar a conexo com o banco de dados. Ele possui uma gama de APIs que facilitam a conexo com diversos bancos de dados. Estas APIs caracterizam-se por serem extremamente eficientes a geis quanto a sua resposta de requisitos. Porm, o principal problema encontrado quando voc necessitar trocar o banco de dados. Vamos ver dois exemplos comparativos para que fique mais claro. O primeiro sendo o PHP:
236
<?php $con = mysql_connect($host, $user, $pass); mysql_select_db($dbnome); $query = select * from tabela; $qry = mysql_query($query, $con); While ( $row = mysql_fetch_assoc($qry) { echo $row[primeiroNome]; echo $row[segundoNome]; } mysql_free_result($qry); mysql_close($con); ?>
Perl com DBI:

Use DBI; my $con = DBI -> connect(dbi:mysql:$ dbnome, $user, $pass); my $qry = $con -> do (select * from tabela); while (my $row = $qry->fetchrow_hashref) { print $row->( primeiroNome); print $row->( segundoNome); } $qry->finish; $con->disconnect;
Perceba que o nvel de complexidade semelhante entre as duas instrues. Porm, o exemplo da linguagem Perl mais porttil. Fica compreensvel se tivermos de trocar o banco de dados. Imagine que necessitamos trocar o banco de dados do MySQL para o Oracle, todas as instrues de API do MySQL teriam de ser trocadas para as chamadas da API do Oracle. No Perl
Unidade 4
237
onde utiliza um mtodo orientado a objetos bastaria adequar um comando:

my $con = DBI -> connect(dbi:oracle:$ dbnome, $user, $pass);
Na verdade, no utilizaremos um mtodo orientado a objetos. Voc poderia se perguntar por que no utilizar esse mtodo. A resposta O PHP no uma linguagem orientada a objetos, mas possui recursos para orientao a objetos. Para solucionar esse problema, voc pode criar suas prprias classes de conexes ou simplesmente funes genricas para melhor utilizar as APIs, alm de buscar solues pblicas, como as classes PEAR.
Voc pode pesquisar mais a PEAR no endereo: <http://pear.php.net/>.
Como o mencionado, voc pode criar funes ou classes para melhor solucionar o seu problema. Um exemplo de funes seria:
<?php function conect($tipo, $host, $usr, $pass, $banco) { GLOBAL $BC = $tipo; switch ($BC) { case mysql: $res= mysql_connect($host, $usr, $pass); mysql_select_db($banco, $res); case oracle: $res = oci_connect($usr, $pass, $host); } return $res; } ?>
Desta forma, alternando-se o tipo pode-se utilizar diversas APIs com o mesmo comando. Iremos nos aprofundar um pouco mais na API do MySQL mais frente.
238
Conexo
O PHP possui conexes nativas com diversos bancos de dados. O MySQL foi uma das primeiras API a ser desenvolvida. Desta forma, no necessita de uma configurao para acessar o banco. Basta que o endereo do servidor do banco de dados tenha permisso para conexo. O comando para realizar esse procedimento o mysql_connect.
mysql_connect(servidor,login,senha);
Discriminando o comando, temos os seguintes conceitos:
servidor: endereo do servidor do banco de dados (caso seja sua prpria mquina, o endereo localhost ou 127.0.0.1); login: nome de usurio utilizado para acessar o banco de dados; senha: senha do usurio que far a conexo.
O retorno do comando um identificador para a conexo em caso de sucesso ou false em caso de falha. O identificador deve ser armazenado dentro de uma varivel PHP para utilizar em outros comandos e diferenciar de uma segunda conexo paralela se existir. Vamos conectar no banco de dados utilizando o usurio web. O comando ficaria assim:
$con = mysql_connect(localhost,web,senha123);
A varivel $con receber o identificador da conexo, que poderemos utilizar para identific-la quando necessrio. Feita a conexo, devemos selecionar o banco de dados em que deveremos trabalhar. Voc pode passar o nome do banco de dados como quarto parmetro da conexo ou utilizar a funo mysql_select_ db() para isso. Selecionando a base de dados, ficaria assim:
Unidade 4
239
mysql_select_db(prg3,$con);
As conexes que so abertas durante o script abertas pelo mysql_ connect so fechadas quando este script termina o processamento. Porm, podem ocorrer situaes em que voc necessite encerrar a conexo. Para isso, deve-se utilizar o comando mysql_connect.
mysql_select_db(prg3,$con); () mysql_close($con);
Vamos ento construir uma pgina onde recuperaremos apenas as informaes j cadastradas em um banco de dados. Para isso, criaremos uma tabela no banco de dados que voc j deve ter criado. O banco de dados prg3. Criando a tabela livrarias:
CREATE TABLE prg3.livrarias ( cod_livraria int(11) NOT NULL AUTO_INCREMENT, nom_livraria varchar(50) NOT NULL, PRIMARY KEY (cod_livraria ), KEY nom_autor (nom_livraria) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Inserir algumas livrarias de exemplo:

INSERT INTO livrarias (cod_livraria, nom_livraria) VALUES (NULL, Livraria 1), (NULL, Livraria 2), (NULL, Livraria 3), (NULL, Livraria 4), (NULL, Livraria 5), (NULL, Livraria 6);
O cdigo para mostrar uma relao de livrarias desse exemplo seria:
240
<html> <head> <title>Relao de Livrarias</title> </head> <body> <h1><strong>Relao de Livrarias</strong></h1>
<?php // a conexo com o servidor bando de dados realizada $link = mysql_connect(localhost,web,123); // o banco de dados selecionado mysql_select_db(prg3);
// a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_livraria, nom_livraria from livrarias);
?> <!-Montamos a tabela em HTML para montar o relatrio --> <table border=1 cellspacing=0 cellpadding=0 style=bordercollapse:collapse;border:none> <tr> <td width=81 valign=top style=border-top:solid black 1.0pt; border-left:none;border-bottom:solid black 1.0pt;border-right:none; padding:0cm 5.4pt 0cm 5.4pt> <b>Cdigo</b> </td> <td width=579 valign=top style=border-top:solid black 1.0pt; border-left:none;border-bottom:solid black 1.0pt;border-right:none; padding:0cm 5.4pt 0cm 5.4pt> <b>Nome</b>
Unidade 4
241
</td> </tr> <?php // controle utilizado no HTML 4.0 para alternar a cor da tabela do HTML $fundo=white; /* este lao de repetio executado enquanto existirem registros a serem recuperados a funo mysql_fetch_array retona os registro do banco e atriibui um vetor de resultado */ while ($relacao = mysql_fetch_array($result)) { if ($fundo==white) { $fundo=silver;
} else { $fundo=white;
?> <tr> }
<td width=81 valign=middle style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>; padding:0cm 5.4pt 0cm 5.4pt>  <b><?=$relacao[cod_livraria]; ?></b> </td> <td width=579 valign=top style=border:none; border-bottom:solid black 1.0pt; background:<?=$fundo?>;padding:0cm 5.4pt 0cm 5.4pt> <?=$relacao[nom_livraria]; ?> </td> </tr> <?php
242
} ?> </table> </body> </html>
O resultado desse cdigo :
Figura 4.2 Exposio da query. Fonte: Elaborada pelo autor (2010).
Nesse exemplo podemos notar que, de forma simples, podemos montar uma consulta ao banco e retornar uma relao de forma a ser interpretada. Perceba que a consulta foi usado os campos, e no utilizao o asterisco. Quando voc usa o asterisco nas consultas SQLs, voc fora um processamento maior do gerenciador. No nosso exemplo, seria algo insignificante, mas a prtica de utilizar sempre os campos excelente e evita que voc se esquea de utilizar. Vamos agora incrementar um pouco o exemplo. Perceba que estamos utilizando a conexo de forma a estar embutido na prpria pgina. Isso deixa exposto o acesso ao nosso banco de dados por terceiros. A forma mais simples de realizar um incremento na segurana de uma pgina retirar o servidor, o login, a senha e o banco de dados da pgina. Podemos realizar essa tarefa utilizando o comando include. Esse comando busca um arquivo e interpreta o seu contedo como parte da pgina. Assim, teremos acesso ao servidor, ao login, senha e ao banco de dados sem que este esteja presente na pgina do programa. Vamos construir um arquivo qualquer, como exemplo ser
Unidade 4
243
denominado com o nome de variaveis.bd salvo na prpria pasta da pgina. Esse arquivo ser texto puro. No tem funo de programao, apenas para que o PHP interprete de forma que possamos utilizar como variveis, atribuiremos as variveis como no PHP, mas dever conter as tags.
<?php $user=web; $pass=123; $serv=localhost; $bd=prg3; ?>
O programa fica desta forma:

<?php /* com o comando include, todo o texto contido no arquivo passa a fazer parte do programa. No nosso caso, como o arquivo possui comando vlidos no PHP, so incorporados de forma natural. */ include(variaveis.bd); // a conexo com o servidor bando de dados realizada $link = mysql_connect($serv, $user, $pass); // o banco de dados selecionado mysql_select_db($bd); // a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_livraria, nom_livraria from livrarias); ?>
O restante da pgina no se altera. Veja que as variveis que esto dentro do arquivo variveis.bd so incorporadas de tal forma que possui o mesmo comportamento das variveis atribudas na pgina. Para ficar mais claro, o cdigo a seguir representa esta semelhana.
244
<?php /* O comando include no est sendo utilizado, neste momento est sendo usada a atribuio direta de variveis. Mas, neste caso, voltamos ao problema inicial das variveis de segurana estarem abertas na pgina. */ $user=web; $pass=123; $serv=localhost; $bd=prg3; // a conexo com o servidor bando de dados realizada $link = mysql_connect($serv, $user, $pass); // o banco de dados selecionado mysql_select_db($bd); // a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_livraria, nom_livraria from livrarias); ?>
Para aumentar a segurana, voc pode armazenar o arquivo com as configuraes do servidor de banco de dados fora da pasta de publicao da Web. Ou seja, o arquivo de parametrizao no estar acessvel pela internet.
Tratamento de erros
Vamos continuar com o mesmo exemplo e increment-lo um pouco mais, acrescentando um tratamento de erros de alguns nveis como mensagem personalizada e o prprio erro do banco de dados.
Unidade 4
245
<?php /* continuando com o comando include */ include(variaveis.bd);
/* a conexo com o servidor bando de dados realizada, caso ocorra algum problema o programa ir parar e emitir a mensagem: Erro na conexo com o banco de dados. Nenhum outro comando ser executado. */ $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); // vamos selecionar o banco de dados errado o que resultar em um erro
mysql_select_db(bancoerrado) or die (<BR>Erro na seleo do banco de dados > .mysql_errno($link) . : . mysql_error($link). \n<BR>) ;
// a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_livraria, nom_livraria from livrarias) or die(Erro na execuo da consulta > . mysql_errno($link) . : . mysql_ error($link)); ?>
A funo mysql_erro retorna o ltimo erro ocorrido no banco de dados. J a funo mysql_errno retorna o nmero do erro. Esse nmero importante identificar, pois mais fcil a busca e a identificao da soluo do erro. O resultado do exemplo ser:
Figura 4.3 Tratamento de erros. Fonte: Elaborada pelo autor (2010).
246
Outra forma de montar um tratamento de erro seria a construo de algoritmo para que ocorra um desvio durante a execuo. Desta forma, possvel manter um controle maior sobre a aplicao e ainda respostas mais amigveis ao usurio. Um exemplo desse tipo de tratamento de erro voc pode ver a seguir.
<?php /* continuando com o comando include */ include(variaveis.bd);
/* a conexo com o servidor bando de dados realizada, caso ocorra algum problema o programa ir parar e emitir a mensagem: Erro na conexo com o banco de dados. Nenhum outro comando ser executado. */
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); // vamos selecionar o banco de dados errado o que resultar em um erro if (!(mysql_select_db(bancoerrado))){ echo <p>Erro na seleo do banco de dados</p>\n; echo <b> .mysql_errno($link) . : . mysql_error($link). </b>\n<BR>;
} else {
// a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_livraria, nom_livraria from livrarias);
?> <!-Montamos a tabela em HTML para montar o relatrio -->
Unidade 4
247
<table border=1 cellspacing=0 cellpadding=0 style=bordercollapse:collapse;border:none> <tr> <td width=81 valign=top style=border-top:solid black 1.0pt; border-left:none;border-bottom:solid black 1.0pt;border-right:none; padding:0cm 5.4pt 0cm 5.4pt> <b>Código</b> </td>
<td width=579 valign=top style=border-top:solid black 1.0pt; border-left:none;border-bottom:solid black 1.0pt;border-right:none; padding:0cm 5.4pt 0cm 5.4pt> <b>Nome</b> </td> </tr> <?php // controle utilizado no HTML 4.0 para alternar a cor da tabela do HTML $fundo=white; while ($relacao = mysql_fetch_array($result)) { ?> <tr> <td width=81 valign=middle style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>; padding:0cm 5.4pt 0cm 5.4pt>  <b><?=$relacao[cod_livraria]; ?></b> </td> } if ($fundo==white) { $fundo=silver; } else { $fundo=white;
248
<td width=579 valign=top style=border:none; borderbottom:solid black 1.0pt; background:<?=$fundo?>;padding:0cm 5.4pt 0cm 5.4pt> <?=$relacao[nom_livraria]; ?> </td> </tr> <?php } ?> </table> <?php } ?>
Seo 5 Envio e recuperao de dados

J observamos alguns recursos que a API do PHP com o MySQL disponibiliza para que possamos desenvolver sistemas completos. Porm, essas APIs teriam uma utilizao reduzida, sem a interao com as prprias pginas HTML. Via de regra, as pginas funcionaro com programas independentes um dos outros. Cada requisio ao servidor executaro as instrues e retornaro suas respostas, uma vez que retornar a resposta o programa encerra, ao menos na viso do servidor.
Formulrios para manipulao de dados

Vamos montar agora um script simples de edio e pesquisa de duas tabelas do MySQL. Vamos utilizar como base a tabela de livros e autores j mostrados em outros exemplos. Primeiramente montaremos uma pgina em HTML para funcionar como um menu de operaes.
Unidade 4
249
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <head> <title>Livros e Autores</title> </head> <body> <h1>Livros e Cadastros</h1> <hr /> <h2>Menu de Operações</h2> <p><a href=listautor.php target=_self>Listar Autores</a><br /> <a href=listlivros.php>Listar Livros</a><br /> <a href=pesqregistros.php>Pesquisar Dados</a></p> </body> </html>
Utilizaremos trs operaes: Listar Livros, Listar Autores e Pesquisar Dados. Cada link apontado para uma pgina diferente, como resultado fica assim:
Figura 4.4 Formulando menus. Fonte: Elaborada pelo autor (2010).
Veja que essa pgina de menu apenas HTML, no foi utilizado nenhum comando de PHP ou JavaScript. Lembre-se que uma escolha para esse exemplo. Nada impede que possamos incrementar a navegao.
250
Vamos trabalhar agora com a Lista de Autores. Essa pgina aumenta um pouco a complexidade do desenvolvimento. A ideia listar todos os registros cadastrados na tabela autores. Para cada registro listado, o usurio pode alterar ou excluir o registro. Alm disso, um link para inserir um novo registro.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd><html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Autores</title> </head> <body> <h1>Autores</h1> <hr /> <!-link para cadastrar o autor --> <p><a href=cadautor.php>Cadastrar</a></p> <?php // include com as variveis do banco de dados include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // a consulta montada e encaminhada ao servidor $result= mysql_query(select cod_autor, nom_autor from autores); ?> <table width=40% border=1> <tr> <th scope=col>Código</th>
Unidade 4
251
<th scope=col>Nome</th> <th colspan=2 scope=col>Opções</th> </tr> <?php // lembre-se que voc pode mesclar as TAGs entre HTML e o PHP // Teste para verificar se relacionou ao menos um registro na consulta // O @ utilizado para inibir qualquer mensagem erro. if (@mysql_num_rows($result)>=1) { // o lao ser executado enquanto existir registros while ($relacao = mysql_fetch_array($result)) { ?> <tr style=background:<?=$fundo?>;> <td><?=$relacao[cod_autor]; ?></td> <td><?=$relacao[nom_autor]; ?></td>  <td><a href=altautor.php?cod=<?=$relacao[cod_autor]?>>Alterar</ a></td> <td><a href=excautor.php?cod=<?=$relacao[cod_ autor]?>>Excluir</a></td> </tr> <?php } // construido a linha dos resultados da consulta // construo em PHP para manipular o CSS if ($fundo==white) { $fundo=silver; } else { $fundo=white;
252
} } else { ?> <tr style=background:silver;> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <?php } ?> </table> <p><a href=menu.html>Voltar</a></p> <p> </p> <p> </p> </body> </html> // caso no seja encontrado registros esta linha montada
Veja que nesse cdigo realizamos uma consulta ao banco de dados. Alm disso, foi manipulado o HTML para se modificar dependendo de cada resultado. Assim, teramos a pgina com os seguintes dados.
Figura 4.5 Recuperando dados do MySQL. Fonte: Elaborada pelo autor (2010).
Vamos agora montar a pgina que ir inserir os dados na tabela.
Unidade 4
253
Como anteriormente mostrado, essa tabela de autores est criada com o campo cod_autor sendo auto_increment. Assim, podemos omitir esse campo no cadastro, j que nenhuma informao do usurio deve ser inserida nesse campo. Portanto, teremos apenas um campo que receber informaes do usurio. Outro fator que ser utilizado uma validao de campo em JavaScript.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Cadastrar Autor</title> <script language=javascript type=text/javascript charset=utf-8> function valida_form(form) { // verificando a quantidade de caracteres inseridos no campo nom if (form.nom.value.length<4) { // se for inferior a quatro caracteres uma mensagem mostrada alert(O nome do Autor deve conter no mnimo 4 caracteres!);
// retorna falso para o formulrio inibindo o seu envio para o servidor. O comando return encerra a funo } </script> </head> <body> <?php // verificao se o formulrio foi submetido, ou seja, enviado ao servidor if (@$_POST[salvar]!=) { // include com as variveis do banco de dados } return true; return false;
254
include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // a inserso de dados montada e encaminhada ao servidor $result= mysql_query(insert into autores (nom_autor) values (.$_ POST[nom].)) or die (Erro ao cadastrar autor); ?> <script language=javascript type=text/javascript charset=utf-8> // interao do PHP com o JavaScript alert (Registro inserido com sucesso! Cdigo gerado: <?=mysql_insert_ id()?>); </script> <?php } ?> <h1>Cadastrar Autor</h1> <hr> <!-o atributo onSubmit=return valida_form(this); est chamando uma funo JavaScript. Alm disso, o comando return fora que o formulrio s seja enviado se a funo retornar verdadeiro (true) --> <form action= method=post enctype=multipart/form-data name=frmcad target=_self onSubmit=return valida_form(this);> <table width=40% border=1> <tr> <td width=28%><label for=nom>Nome</label></td> <td width=72%><input type=text name=nom id=nom value=></td> </tr>
Unidade 4
255
<tr> <td colspan=2 align=center> <input type=submit name=salvar id=Cadastrar value=Cadastrar>   <input type=reset name=Limpar id=Limpar value=Limpar> </td> </tr> </table> <p><a href=listautor.php>Voltar</a></p> </form> </body> </html>
Alguns pontos podem ressaltar nesse exemplo. O primeiro com relao validao de campos. A validao efetuada foi realizada apenas em JavaScript. Isso acarreta em baixa segurana quanto s validaes de informaes. Como j falamos, o JavaScript uma linguagem client-side, isso significa que a interpretao fica a cargo do browser do usurio. Portanto, torna-se facilmente manipulvel pelo prprio usurio. A forma mais simples desabilitando a interpretao do JavaScript pelo browser. Assim, a validao ir parar de funcionar. Outra forma seria a utilizao de algumas ferramentas de desenvolvimento on-line, ou seja, pode ser alterada a programao em tempo de execuo. Poderia citar o Firebug do Firefox, que permite alterar todas as informaes das linguagens client-side. Para aumentar a segurana, necessrio utilizar uma validao de dados tambm na linguagem Server-side. Nosso exemplo bastaria acrescentar o campo que deva ser obrigatrio acrescido da funo strlen que conta o nmero de caracteres em uma string:
256
(...) <?php // verificao se o formulrio foi submetido, ou seja, enviado ao servidor if ((@$_POST[salvar]!=) && (strlen(@$_POST[nom])>3)) { // include com as variveis do banco de dados include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); (...)
Com essa simples alterao, no ser permitida a incluso de um registro que no tenha pelo menos quatro caracteres no nome. Normalmente quando h uma validao em JavaScript, no feito um tratamento nas linguagens service-side, apenas verifica se foi validado corretamente pelo JavaScript, mas fica a cargo de cada desenvolvedor. Outro ponto a ser comentado quanto integrao do PHP com o JavaScript. Veja que no exemplo, aps a insero do registro, emitida uma mensagem em JavaScript avisando que foi inserido com sucesso e ainda mostrando o cdigo que foi inserido. Esse cdigo pode ser resgatado pela funo mysql_insert_id. Perceba que a interao se d por meio de escrita, ou seja, o PHP manda escrever alguma informao dentro do cdigo JavaScript. Ele, por sua vez, realiza a interpretao de sua programao sem tomar conhecimento da existncia do PHP. Ainda relacionado ao cdigo, foi utilizado uma programao embutida na prpria pgina do formulrio. Esse mtodo requer que seja sempre verificado se o formulrio foi enviado ao servidor ou simplesmente a pgina foi carregada a primeira vez. Como resultado, temos a seguinte pgina:
Figura 4.6 Cadastrando dados no banco de dados. Fonte: Elaborada pelo autor (2010).
Unidade 4
257
A mensagem de retorno como:
Figura 4.7 Mensagem de retorno em JavaScript. Fonte: Elaborada pelo autor (2010).
Aps inserir alguns registros, retornaremos a pgina de listagem, desta vez mostrar os dados inseridos:
Figura 4.8 Listagem completa das informaes. Fonte: Elaborada pelo autor (2010).
Com os dados inseridos, podemos trabalhar nas outras pginas de manipulao (Alterar e Excluir). A primeira a trabalharmos ser a pgina de alterao de dados. A funcionalidade muito semelhante pgina de insero. Porm, necessrio recuperar a informao e realizar a alterao. Uma parte desse desenvolvimento j est acoplada pgina de Listar Autores. Quando o usurio clicar no link Alterar, j est sendo enviado o cdigo do registro que ser alterado. Assim, a pgina de alterao j saber qual registro deve ser manipulado.
258
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Alterar Autor</title> <script language=javascript type=text/javascript charset=utf-8> function valida_form(form) { if (form.nom.value.length<4) { alert(O nome do Autor deve conter no mnimo 4 caracteres!); return false;
} }
return true;
</script> </head> <body> <?php // include com as variveis do banco de dados include(variaveis.bd); // include com as variveis do banco de dados $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // Validao de dados e mtodo if ((@$_POST[cod]!=) && (strlen(@$_POST[nom])>3) && (@$_ POST[cod]==@$_GET[cod])){ /* comando de alterao de dados
Unidade 4
259
deve-se preferencialmente filtrado pela chave primaria, assim garante que apenas um registro ser alterado */ $result= mysql_query(update autores set nom_autor=.$_ POST[nom]. where cod_autor=.$_GET[cod]) or die (Erro ao cadastrar autor); ?> <script language=javascript type=text/javascript charset=utf-8> alert (Registro alterado com sucesso! Cdigo alterado: <?=$_ GET[cod]?>); </script> <?php } /* verifica o registro que foi selecionado na pgina de listagem todo a informao mostrada na url interpretada pelo PHP como um envio de informao pelo mtodo GET*/ if (@$_GET[cod]!=) { $result= mysql_query(select cod_autor, nom_autor from autores where cod_autor=.$_GET[cod]); } ?> <h1>Alterar Autor</h1> <hr> <form action= method=post enctype=multipart/form-data name=frmcad target=_self onSubmit=return valida_form(this);> <table width=40% border=1> <tr> <td><label for=cod>Código</label></td> <td>  $relacao = mysql_fetch_array($result);
260
<input type=text name=cod id=cod value=<?=@$relacao[cod_ autor]; ?> readonly=true> </td> </tr> <tr> <td width=28%><label for=nom>Nome</label></td> <td width=72%><input type=text name=nom id=nom value=<?=@$relacao[nom_autor]; ?>></td> </tr> <tr> <td colspan=2 align=center> <input type=submit name=salvar id=Alterar value=Alterar>   <input type=reset name=Limpar id=Limpar value=Limpar> </td> </tr> </table> <p><a href=listautor.php>Voltar</a></p> </form> </body> </html>
Veja que nessa pgina est sendo realizado um acesso a banco de dados antes do envio das informaes do formulrio. Isso se faz necessrio para que seja realizada uma consulta sobre o cdigo envido pela pgina anterior. Desta forma, pode alimentar os campos do formulrio para serem alterados.
Unidade 4
261
Figura 4.9 Alterando valores. Fonte: Elaborada pelo autor (2010).
O campo cdigo no pode ser alterado, para isso impossibilitamos a alterao dele no campo. As validaes de JavaScript permanecem assim como a resposta da alterao. Ento, com esse exemplo, possvel perceber que entre uma pgina de incluso e outra de alterao existem pequenas alteraes no cdigo, mas que fazem muita diferena no final. Uma delas a reposio da conexo com o banco de dados. Como ela necessria nos dois momentos (carregar a pginas e envio para o servidor), necessrio que seja feita fora dos laos de deciso. Uma validao que aparece nesse exemplo sobre o mtodo. Ou seja, temos de validar se o cdigo consultado o mesmo que foi alterado. Podemos fazer isso verificando se cdigo enviado pela url da pgina o mesmo utilizado no formulrio. Qualquer discrepncia dessas informaes em funo de o usurio estar tentando burlar o sistema.
Essa forma de segurana utilizada soluciona o problema dess e exemplo. Existem diversas forma de aumentar a segurana da aplicao. Uma dela utilizado chaves criptografadas de verificao. Pesquise sobre o assunto!
A segunda pgina de manipulao de dados a excluso de registro. Essa pgina no h uma entrada de informaes pelo usurio. Para este exemplo, foi adotada uma interao maior com o JavaScript. Uma confirmao de excluso por meio do JavaScript feita e somente ento excludo o registro.
262
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Exclui Autor</title> <script language=javascript type=text/javascript charset=utf-8> function valida_form(form) { // verifica se o usuario quer mesmo excluir o usurio if (confirm(Deseja Realmente Excluir o Registro?)) { return true;
} }
return false;
</script> </head> <body> <?php // include com as variveis do banco de dados include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); if ((@$_POST[cod]!=) && (@$_POST[cod]==@$_GET[cod])){ // query para excluir as informaes $result= mysql_query(delete from autores where cod_autor=.$_ POST[cod]) or die (Erro ao cadastrar autor); ?> <script language=javascript type=text/javascript charset=utf-8>
Unidade 4
263
alert (Registro excludo com sucesso! Cdigo excludo: <?=$_ GET[cod]?>); location.href=listautor.php; </script> <?php } if (@$_GET[cod]!=) { $result= mysql_query(select cod_autor, nom_autor from autores where cod_autor=.$_GET[cod]); } ?> <h1>Alterar Autor</h1> <hr> <form action= method=post enctype=multipart/form-data name=frmcad target=_self onSubmit=return valida_form(this);> <table width=40% border=1> <tr> <td>Código</td> <td>  <input type=hidden name=cod id=cod value=<?=@$relacao[cod_autor]; ?>> <?=@$relacao[cod_autor]; ?></td> </tr> <tr> <td width=28%>Nome</td> <td width=72%><?=@$relacao[nom_autor]; ?></td> </tr> <tr> <td colspan=2 align=center> $relacao = mysql_fetch_array($result);
264
<input type=submit name=salvar id=Excluir value=Excluir>   <input type=reset name=Limpar id=Limpar value=Limpar> </td> </tr> </table> <p><a href=listautor.php>Voltar</a></p> </form> </body> </html>
Veja que no h uma diferena expressiva entre a excluso e a alterao de dados. As principais alteraes se daro quanto regra de negcio contida na programao, logicamente, no levando em considerao os aspectos visuais da pgina. Todas as pginas partindo dessa soluo sero construdas de forma muito semelhante. Pouca alterao da lgica de programao ser feita. Porm, pode ainda existir algum insegurana quando se trabalha com relacionamentos. Por causa disso, o exemplo a seguir ilustra a pgina de alterao de livros. Esta tabela possui um relacionamento com autores. A soluo essencialmente a mesma utilizada para a tabela autores: uma pgina para listagem dos registros, uma para cadastro, uma para alterao e uma para excluso.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Alterar Livro</title> <script language=javascript type=text/javascript charset=utf-8> function valida_form(form) {
Unidade 4
265
if (form.nom.value.length<4) { alert(O nome do Livro deve conter no mnimo 4 caracteres!); return false;
return true; } </script> </head> <body> <?php // include com as variveis do banco de dados include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // valida as informaes encaminhadas if ((@$_POST[cod]!=) && (strlen(@$_POST[nom])>3) && (@$_ POST[cod]==@$_GET[cod]) && (@$_POST[cod_autor]!=)) { // adequao das informaes em branco para nulo if (@$_POST[cod_autor]!=) { $cod_autor=$_POST[cod_autor]; } else { } $result= mysql_query(update livros set nom_livro=.$_POST[nom]., cod_autor=.$_POST[cod_autor]. where cod_livro=.$_POST[cod]) or die (Erro ao cadastrar livro); ?> <script language=javascript type=text/javascript charset=utf-8> alert (Registro alterado com sucesso! Cdigo gerado: <?=$_ POST[cod]?>); $cod_autor=NULL;
266
</script> <?php } if (@$_GET[cod]!=) { $result= mysql_query(select cod_livro, nom_livro, cod_autor from livros where cod_livro=.$_GET[cod]); } ?> <h1>Alterar Livro</h1> <hr> <form action= method=post enctype=multipart/form-data name=frmcad target=_self onSubmit=return valida_form(this);> <table width=40% border=1> <tr> <td width=28%><label for=cod>Código</label></td> <td width=72%><input type=text name=cod id=cod value=<?=$relacao[cod_livro]?> readonly=true></td> </tr> <tr> <td width=28%><label for=nom>Nome</label></td> <td width=72%><input type=text name=nom id=nom value=<?=$relacao[nom_livro]; ?>></td> </tr> <tr> <td width=28%><label for=cod_autor>Autor</label></td> <td width=72%> <select name=cod_autor> <option value=>-----------------</option> <?php //consulta para montar as informaes de relacionamento $relacao = mysql_fetch_array($result);
Unidade 4
267
$result_autores= mysql_query(select cod_autor, nom_autor from autores); while ($relacao_autores = mysql_fetch_array($result_autores)) { //seleciona o autor cadastrado para o livro if ($relacao_autores[cod_autor]==$relacao[cod_autor]) { $select=selected;
} else {
?> }
$select=;
<option value=<?=$relacao_autores[cod_autor]?> <?=$select?>><?=$relacao_autores[nom_autor]; ?></option> <?php } ?> </select> </td> </tr> <tr> <td colspan=2 align=center> <input type=submit name=salvar id=Alterar value=Alterar>   <input type=reset name=Limpar id=Limpar value=Limpar> </td> </tr> </table> <p><a href=listlivros.php>Voltar</a></p> </form> </body> </html>
268
Apesar de existir o relacionamento entre as tabelas, a soluo nesse caso foi de compor as consultas para cada campo, ou seja, uma consulta que recupera a informao de livros e outra que recupera as informaes de autores, selecionando o autor cadastrado no livro. Essa soluo mais bem empregada para o uso do campo combox do formulrio. O restante do cdigo se torna muito semelhante pgina de alterar autores.
Toda a forma de manipulao de dados sempre a mesma: incluir, alterar, excluir. Quando se define uma soluo para essa manipulao, uma pgina ela tende a se propagar para todo o sistema. O cuidado para as informaes ou detalhes especficas de cada pgina.
O resultado desse cdigo uma pgina com trs campos: cdigo, nome do livro e autor.
Figura 4.10 Alterando no relacionamento entre tabelas. Fonte: Elaborada pelo autor (2010).
Procure desenvolver as outras pginas (listar, incluso e excluso) dos registros de livros.
Vamos construir agora uma pgina de consulta. Esta pgina consiste em o usurio informar algum dado e o sistema procurar as informaes e list-las na tela. Para aumentar um pouco a complexidade, vamos realizar a consulta sobre as duas tabelas (autores e livros). Para os registros encontrados, faremos um link apontando para a pgina de alterao de informaes. Desta forma, maximizaremos a utilidade da consulta.
Unidade 4
269
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Alterar Livro</title> <script language=javascript type=text/javascript charset=utf-8> function valida_form(form) { // teste para obrigar um caracter em algum dos campos
if ((form.nom_livro.value.length<1) && (form.nom_autor.value. length<1)) { alert(O nome do Livro deve conter no mnimo 1 caracter!\n Ou\ nO nome do Autor deve conter no mnimo 1 caracter!); } return false;
return true; } </script> </head> <body> <?php if (@$_POST[pesquisar]!=) { include(variaveis.bd); $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // esta varivel tem a funo de montar o filtro da consulta $pesquisa=; if (@$_POST[nom_livro]!=) { // primeiro filtro montado se existir algum caracter
270
$pesquisa=nom_livro like %.$_POST[nom_livro].%;
if (@$_POST[nom_autor]!=) { // verifica se o primeiro filtro foi usado. Caso sim, acrescenta a condio AND (E) para que o segundo filtro seja utilizado if ($pesquisa!=) { $pesquisa.= and ; } } // consulta montada em uma varivel para facilitar o desenvolvimento $query=select a.cod_livro, a.nom_livro, b.cod_autor, b.nom_autor from livros a, autores b where a.cod_autor=b.cod_autor and .$pesquisa; // consulta executada $result= mysql_query($query); } ?> <h1>Pesquisar Registros</h1> <hr> <form action= method=post enctype=multipart/form-data name=frmcad target=_self onSubmit=return valida_form(this);> <table width=40% border=1> <tr> <td width=28%><label for=nom_livro>Livro</label></td> <td width=72%><input type=text name=nom_livro id=nom_ livro value=></td> </tr> <tr> <td width=28%><label for=nom_autor>Autor</label></td> <td width=72%><input type=text name=nom_autor id=nom_ autor value=> </td> </tr> // segundo filtro montado se existir algum caracter $pesquisa.=nom_autor like %.$_POST[nom_autor].%;
Unidade 4
271
<tr> <td colspan=2 align=center> <input type=submit name=pesquisar id=pesquisar value=Pesquisar>   <input type=reset name=Limpar id=Limpar value=Limpar> </td> </tr> </table> </form> <hr> <table width=54% height=82 border=1> <tr> <th scope=col>Código Livro</th> <th scope=col>Nome Livro</th> <th scope=col>Código Autor</th> <th scope=col>Nome Autor</th> </tr> <?php // if (@mysql_num_rows($result)>=1) { $fundo=white; while ($relacao = mysql_fetch_array($result)) { ?> <tr style=background:<?=$fundo?>;> <td><label title=Alterar os dados deste livro><a href=altlivros. php?cod=<?=$relacao[cod_livro]; ?>><?=$relacao[cod_livro]; ?> } if ($fundo==white) { $fundo=silver; } else { $fundo=white;
272
</a></label></td> <td><?=$relacao[nom_livro]; ?></td> <td><label title=Alterar os dados deste Autor><a href=altautor. php?cod=<?=$relacao[cod_autor]; ?>><?=$relacao[cod_autor]; ?> </a></label></td> <td><?=$relacao[nom_autor]; ?></td> </tr> <?php } } else { ?> <tr style=background:silver;> <td colspan=4> <?php // caso no encontre informaes, mostra uma mensagem
if (@$_POST[pesquisar]!=) echo No foram encontrado registros na pesquisa.; else echo ; ?> </td> </tr> <?php } ?> </table> <p><a href=menu.html>Voltar</a></p> </body> </html>
Como j mencionado, o controle da pgina semelhante s outras pginas do sistema. A diferena est na construo da consulta de forma dinmica. Conforme a combinao de
273
Unidade 4
informaes digitadas no campo, a consulta se altera. Desta forma, aumenta a complexidade do desenvolvimento, mas em contrapartida a satisfao do usurio tambm ampliada. O usurio no precisa ficar navegando para filtrar vrias informaes.
Figura 4.11 Pesquisa de informaes. Fonte: Elaborada pelo autor (2010).
Outro atrativo da pgina de consulta a possibilidade de se realizar alteraes dos registros. Caso o usurio clique no link do cdigo do livro, ser encaminhado pgina de alterao de livros. Assim, como se clicar no cdigo do autor, ser encaminhado pgina de alterao do autor. Nesse simples exemplo, montamos um sistema completo em todas as suas principais caractersticas: cadastros, manipulao de dados, recuperao de informaes. A maioria dos sistemas comerciais se baseia nessas operaes. Como voc pde ver e comprovar, o desenvolvimento pode se tornar extenso, porm muito simples e intuitivo. O importante o desenvolvedor se concentrar no problema para entend-lo e posteriormente desenvolver uma soluo.
274
Seo 6 Sesses e cookies

Voc j entendeu as operaes envolvidas em um desenvolvimento de um sistema. Ainda assim algumas perguntas ficaram no ar. Como posso identificar se o usurio j visitou a minha pgina? Como manter informaes? Para respondermos essas perguntas, precisamos entender um pouco mais sobre o protocolo HTTP. O protocolo HTTP no possui informao de estado, ou seja, no possui formas predefinidas de se dar continuidade entre as transaes. Quando o usurio navega entre as pginas, o HTPP no possui formas de se identificar se a navegao se deu pelo mesmo usurio. Uma necessidade fundamental para uma segurana em sistema Web conseguir controlar a sesso dos usurios. Em outras palavras, conseguir monitorar um usurio durante uma nica sesso em um site Web. Todas as sesses no PHP se baseiam em um registro nico de sesso chamado de ID. Esse ID uma numerao aleatria e criptografada. Esta gerao realizada pelo PHP e armazenado no cliente para o tempo de vida de uma sesso. As formar de manter esse ID por meio de cookies no computador do usurio ou enviado com a URL. Muito provavelmente voc j deve ter utilizado sites que mantinham sesses para identificar e monitorar a sua navegao. O ID da sesso funciona como uma chave que d acesso s variveis privadas da sua navegao. Essas variveis so armazenadas no servidor e somente pode ser acessadas quando o mesmo ID transmitido para o servidor. O ID a nica informao visvel no cliente.
Cookie
Cookie um arquivo texto que contm uma pequena parte de informaes que os programas armazenam. O cookie basicamente possui nome, valor, tempo de vida, caminho no servidor, domnio, protocolo de segurana.
Unidade 4
275
No PHP para um cookie ser criado usamos a funo setcookie(). As informaes do cookie fazem parte do cabealho de uma pgina. Quando o usurio faz uma requisio, a pgina vem dividida em duas partes, o cabealho, que contm as informaes sobre a requisio e o contedo, que onde a sada HTML do processamento. Acabam se tornando muito comum os erros de cabealho quando tentamos alterar essas informaes aps ser enviado o contedo da pgina (cdigos HTML). Todas as informaes de cabealho necessitam ser passados antes de qualquer contedo. Por esse motivo, necessrio ter cuidado para usar o setcookie antes de qualquer sada HTML. Essa sada pode ser uma tag ou um simples espao que est no comeo do arquivo antes da abertura da tag <?php.
<?php //teste para verificar se o formulrio foi enviado if (@$_POST[nome]!=) { //criao do cookie setcookie(primeirocookie, $_POST[nome], time() + 3600); } ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Grava Cookie</title> </head> <body> <form name=form1 method=post action=> <label>Nome <input type=text name=nome id=nome> </label> <br> <input type=submit name=enviar value=Enviar>
276
</form> <p><a href=leituracookie.php>Ler Cookie</a><br> <a href=apagarcookie.php>Apagar Cookie </a></p> </body> </html>
Como j mencionado, a funo setcookie aceita vrios parmetros, sendo os mais importantes os trs primeiros:

o nome do cookie (primeirocookie) o valor do cookie ($_POST[nome]) tempo de expirao do cookie (time() + 3600 um clculo que retorna o tempo no timestamp unix, que a quantidade de segundos que passou desde o dia 01/01/1970)
O tempo de expirao determina para o browser at quando ele deve usar aquele cookie. O clculo em segundos, portanto a funo time foi utilizada para retornar a hora em segundos neste momento. Adicionado 3600 segundos, o que quer dizer que o cookie ser vlido por mais uma hora.
Existem vrios parmetros que podem ser manipulados. Pesquise mais sobre o comando no manual <http://br.php.net/manual/pt_BR/function. setcookie.php>.
Para ler um cookie, muito simples. Todos os cookies enviados para a pgina estaro disponveis na varivel $_COOKIE. Mas um cookie s estar disponvel na prxima vez que voc acessar uma pgina. Por isso, vamos criar uma pgina chamada para realizar essa leitura:
Unidade 4
277
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Leitura do Cookie</title> </head>
<body> <p>Lendo o cookie</p> <p> <?php // verifica a existencia do cookie if (@$_COOKIE[primeirocookie]!=) { //escreve o valor do cookie echo Leitura Cookie: . $_COOKIE[primeirocookie];
} else { echo No foi encontrado Cookie;
?> </p> }
<p><a href=gravarcookie.php>Criar Cookie</a><br> <a href=apagarcookie.php>Apagar Cookie </a></p> </body> </html>
Veja que dentro de uma hora, toda vez que voc carregar essa pgina, retornar sempre o mesmo valor, a no ser que voc altere o valor do cookie.
278
Para apagar um cookie, tambm utilizamos a funo setcookie, porm temos de passar uma string vazia ou false, e no tempo de expirao temos de passar uma hora atrasada.
<?php // passando o valor de vazio e atrasando uma hora da hora atual setcookie(primeirocookie, , time() - 3600); ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Apagar Cookie</title> </head>
<body> <p>Cookie Apagado</p> <p><a href=gravarcookie.php>Criar Cookie</a></p> </body> </html>
Veja que o resultado uma excluso completa do cookie. Os cookies possuem alguns problemas como o navegador no aceit-los. Hoje muito difcil encontrar um navegador que no aceite um cookie. Porm, pode estar configurado para no aceitar. Portanto, tenha cuidado na sua utilizao.
Unidade 4
279
Sesso
As sesses em PHP possuem alguns passos simples de serem utilizados: 1. Iniciar uma sesso. 2. Registrar variveis de sesso. 3. Utilizar essas variveis. 4. Remover registros de variveis e destruir a sesso. Esses passos no precisam estar todos em uma mesma pgina, mas devem estar dentro da sua aplicao. Vamos ento montar um exemplo em que montaremos uma sesso semelhante aos exemplos do cookie.
<?php //iniciar a sesso session_start(); if (@$_POST[nome]!=) { } ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Grava Sessão</title> </head> <body> <form name=form1 method=post action=> //criao da varivel $_SESSION[primeirasessao]=$_POST[nome];
280
<label>Nome <input type=text name=nome id=nome> </label> <br> <input type=submit name=enviar value=Enviar> </form> <p><a href=leiturasessao.php>Ler Sessão</a><br> <a href=apagarsessao.php>Apagar Sessão </a></p> </body> </html>
Perceba que a sesso no possui tantos parmetros quanto os cookies. Basicamente temos de iniciar a sesso e registrar as variveis. As variveis de sesso so acessadas pelo array (vetor) $_SESSION. Vamos agora montar a leitura desta sesso.
<?php //toda a pgina que utiliza uma varivel de sesso deve ser iniciada com session_start session_start(); ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Leitura da Sessão</title> </head> <body> <p>Lendo a Sessão</p> <p> <?php // verifica a existncia do cookie
Unidade 4
281
if (@$_SESSION[primeirasessao]!=) { //escreve o valor do cookie echo Leitura Sessão: . $_SESSION[primeirasessao];
} else { echo No foi encontrada Sessão;
?> </p> }
<p><a href=gravarsessao.php>Criar Sessão</a><br> <a href=apagarsessao.php>Apagar Sessão </a></p> </body> </html>
Veja que a primeira instruo da pgina deve ser sempre o session_start. Somente assim possvel acessar as variveis de sesso registradas no servidor. Para apagar, vejamos o exemplo a seguir.
<?php session_start(); // destruindo todas as variveis de sesso do ID atual session_destroy(); ?> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Apagar Sessão</title> </head> <body>
282
<p>Sessão Apagada</p> <p><a href=gravarsessao.php>Criar Sessão</a></p> </body> </html>
Mesmo que voc deseje somente excluir ou destruir as variveis de sesso necessrio antes inici-la para que o servidor possa identificar seu uso. J vimos sesses e cookies, mas, afinal, como utilizamos isso em um sistema de segurana? A resposta que como monitoramos a sesso do usurio possvel saber se ele realizou uma autenticao com o servidor e se ela foi realizada com sucesso. Antes de realizar esta tarefa, necessrio criar uma tabela de usurios.
REATE TABLE prg3.usuario ( login VARCHAR( 10 ) NOT NULL , senha VARCHAR( 32 ) NOT NULL , PRIMARY KEY ( login ) , INDEX ( senha ) ) ENGINE = MYISAM ;
Alm da criao da tabela, necessrio cadastrar o primeiro usurio para se dar acesso ao sistema.
INSERT INTO usuario ( login, senha ) VALUES (teste, MD5( 1 ));
Agora j est criada a base de dados necessria para se manter os usurios do sistema. O prximo passo criar uma tela de login no sistema. Essa pgina deve validar as informaes do usurio com o banco de dados.
Unidade 4
283
<?php // inicia a sesso session_start(); // verifica se o formulrio foi enviado if ((@$_POST[login]!=) && (@$_POST[senha]!=)) { // carrega informaes de banco include(variaveis.bd);
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); mysql_select_db($bd) or die (Erro na seleo do banco de dados. mysql_errno($link) . : . mysql_error($link). \n<br>); // realiza a busca na tabela. A funo md5 realiza a criptografia da informao $result= mysql_query(select login from usuario where login=.$_ POST[login]. and senha=.md5($_POST[senha]).); if (@mysql_num_rows($result)==1) { // registra a sesso $_SESSION[login]=$_POST[login]; header(Location: menu.php);
} else { $msg=Login ou Senha não conferem!!;
} ?> }
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Login</title> </head>
284
<body> <h1>Login no Sistema </h1> <hr> <?php if (@$msg!=) { } ?> <form name=form1 method=post action=> <table width=40% border=1> <tr> <td>Login</td> <td><label> <input type=text name=login id=login> </label></td> </tr> <tr> <td>Senha</td> <td><label> <input type=password name=senha id=senha> </label></td> </tr> <tr> <td colspan=2 align=center><label> <input type=submit name=enviar id=enviar value=Enviar>   <input type=reset name=limpar id=limpar value=Limpar> </label></td> </tr> echo <h1 style=\color:#F00\>$msg</h1>\n; echo <hr>;
Unidade 4
285
</table> </form> </body> </html>
Com essa pgina de login, foi verificado login a senha do usurio. Se for validado, registrada uma varivel de sesso identificada como login. Aps isso, redirecionaremos a pgina para o menu. php, que nada mais do que a pgina de menu dos cadastros de livros e autores explicada em outro exemplo. Essa pgina recebe uma pequena alterao no cdigo. Acrescentando na primeira linha do cdigo da pgina a seguinte tag PHP:
<?php include(logado.php); ?>
Vamos incluir um script de validao de sesso. Essa forma feita para facilitar o desenvolvimento. Uma vez montado, basta acrescentar em todas as pginas do sistema que funcionar perfeitamente. Vamos ento montar o script para validar a sesso:
<?php // Iniciando a sesso session_start(); # Se tiver sesso de usurio registrada... if (@$_SESSION[login]==) { // Mensagem de erro $mensagem = Voc no efetuou o login.; // redireciona a navegao para a pgina de erro header(Location: erro.php?msg=.$mensagem); exit(); } ?>
286
Bem simples, foi verificado se a varivel de sesso existe. Caso no, redireciona para uma pgina de erros j customizando a mensagem de erro. Essa pgina dever ter um cdigo assim:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html lang=pt-br> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <title>Erro</title> </head> <body> <h1>Atenção</h1> <hr /> <h1 style=color:#F00><?php echo addslashes(mb_convert_encoding(@$_GET[msg],iso-88591,utf-8)); ?> </h1> <hr /> <p><a href=login.php>Login</a></p> </body> </html>
Por ltimo, o sistema deve ter uma pgina de logout, ou seja, de sada do sistema. Para maximizar, o uso vamos utilizar um redirecionamento para a pgina de erro, customizando a mensagem para a sada do sistema.
Unidade 4
287
<?php // Inicia a sesso session_start(); // Exclui os dados de login unset($_SESSION[login]); // Elimina a sesso session_destroy(); // Enviando o usurio pra pgina de login header(Location: erro.php?msg=Logout efetuado com sucesso!); ?>
Sntese
Nesta unidade voc pde acompanhar o desenvolvimento de um sistema completo, acessando um banco de dados, manipulando informaes e ainda com um certo grau de segurana. Voc aprendeu sobre MySQL e suas excentricidades e por que ele amplamente utilizado em desenvolvimento Web. Viu ainda que com a utilizao de uma boa soluo pode simplificar o desenvolvimento do sistema. Aprendeu como o controle de sesso fundamental para que possamos manter a segurana da aplicao e abre novos horizontes para uma customizao da prpria aplicao para cada usurio, j que sendo possvel identific-lo torna-se possvel criar possibilidades onde possa tornar a aplicao mais amigvel conforme o usurio.
288
1. Desenvolva um cadastro de livros utilizando o MySQL e o PHP. Este cadastro deve conter uma tabela de livros contendo os seguintes campos: Cdigo Nome Autor Editora Nmero de pginas Ainda deve conter uma pgina de listagem geral deste cadastro e uma pgina com uma busca por nome. Estas pginas devem ser navegveis entre si, ou seja, construa um menu de navegao entre as pginas. 2. Monte uma pgina de login (login e senha) para acessar uma aplicao fictcia. Esta pgina de login deve verificar no banco de dados se o usurio est cadastrado ou no. Caso esteja, registre uma sesso para o usurio e permita que ele cadastre outros usurios. Caso no esteja, no permitir o acesso a pgina de cadastro por meio da sesso (no registrando a sesso).
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: Manual PHP, 2010. Disponvel em: <http://br2.php.net/manual/ pt_BR/index.php>. Acessao em: 5 abr. 2010. PHP Brasil, 2010. Disponvel em: < www.phpbrasil.com>. Acesso em: 5 abr. 2010. T r u q u e s e D i c a s Tutoriais de Javascript, 2010. Disponvel em: <www.truquesedicas.com/tutoriais/php/index. htm>. Acesso em: 2 mar. 2010. Manual do MySQL, 2010. Disponvel em: <http://dev.mysql. com/doc/refman/5.1/en/index.html>. Acesso em: 5 abr. 2010.
289
Unidade 4
unidade 5
Extensible Markup Language (XML)

Ao final desta unidade, voc ter subsdios para:

Identificar as caractersticas do desenvolvimento Web. Conhecer mtodos de comunicao entre as linguagens. Saber as definies de elementos. Conhecer as validaes de documentos.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 Extensible Markup Language (XML) Definio de Tipos de Documentos (DTD) XML-Schema RSS

Atualmente, o XML tratado como um padro de integrao de informaes em diversos nveis. Sua capacidade de estruturao das informaes abre um leque gigantesco de opes que vem sendo cada vez mais explorados. Hoje, bem mais do que um padro de integrao, tornou-se ferramenta indispensvel para quem necessita estar sempre informado.
Seo 1 Extensible Markup Language (XML)

Extensible Markup Language (XML) linguagem de marcao de dados (meta-markup language) que prov um formato para descrever dados estruturados. Isso facilita declaraes mais precisas do contedo e resultados mais significativos de busca por meio de mltiplas plataformas. Alm disso, XML uma linguagem de transmisso de informaes pela internet.
XML uma linguagem de marcao de dados extensvel. Ela prov um formato para descrever dados estruturados que facilita declaraes mais precisas do contedo.
O XML permite a definio de um nmero infinito de tags ou elementos. Essa caracterstica muito importante j que o volume de informaes tende ao crescimento imensurvel. As tags no HTML podem ser usadas para a definio de formatao dos caracteres e pargrafos, o XML utiliza as tags para uma nica finalidade: estruturar os dados. O XML tem como fundamento a descrio de informaes. Essa caracterstica a torna essencial para o armazenamento, a recuperao e a transmisso de informaes. O grande diferencial dessa linguagem de permitir armazenar em um mesmo agrupamento os dados e os metadados, que nada mais so do
292
que um detalhamento dos dados. O seu formato textual, que nos permite uma leitura mais simples das informaes nele formatadas. Podemos dizer que uma linguagem inteligente, pois se adqua facilmente a qualquer nvel de complexidade. Em uma complexidade simples, seria:
<?xml version=1.0 encoding=utf-8?> <AUTOMOVEL>Carro</AUTOMVEL>
Agora, se for necessrio aumentar a complexidade, basta acrescentar tags que possam ser utilizadas para os metadados:
<?xml version=1.0 encoding=utf-8?> <AUTOMOVEL> <TIPO>Carro</TIPO> <FABRIGANTE>Ferrari</FABRIGANTE> <MODELO ANO=01/01/2009>F-50</MODELO> </AUTOMVEL>
Como se pode observar, o nmero de informaes se alterou, porm essa alterao extremante simples e facilmente absorvida pelo XML. Outra vantagem dessa linguagem a portabilidade. Quando se utiliza arquivos binrios para armazenamento de dados, eles podem ser lidos somente por aplicaes especficas que foram previamente desenvolvidas para extrair as informaes contidas. Grande parte dessas aplicaes so proprietrias o que fora, na maioria das vezes, realizar uma engenharia reversa para que se possa extrair as informaes por outro aplicativo.
Um exemplo claro o editor de texto da Microsoft, o Word. Voc digita todo o seu documento e monta as informaes e formata da forma que achar melhor. Quando voc salva o documento, h duas opes: salvar no formato Word ou escolher uma das diversas opes que a ferramenta disponibiliza. Supondo que
Unidade 5
293
voc salve no formato padro, voc leva o documento para outro computador que no possui o Word. Voc dificilmente conseguir abrir esse documento. No somente essa ferramenta, mas diversos softwares proprietrios assumem que sempre voc ter um software compatvel com padro estabelecido por ele.
Com o XML esse problema no ocorre. Voc pode inserir diversas tags para caracterizar inmeros dados. Porm, o software que ler este XML, apenas interpretar o que ele estiver programado para utilizar. Os dados que no identificar so ignorados, no interferindo na composio da informao. Tambm no se faz necessrio um escopo de delimitao, ou seja, uma legenda para conseguirmos identificar onde determinado dado inicia e onde termina. Uma das formas comuns de transmisso de dados por meio de arquivos de largura fixa. Esses arquivos consistem em ter as informaes em um determinado tamanho. No podendo extrapolar o limite tampouco reduzir o espao reservado para a informao. Para uma importao de clientes, teramos a seguinte tabela:
Coluna CPF NOME ENDEREO Posio Inicial 1 12 41 Tamanho 11 30 50
Assim, teramos o seguinte registro:

00011110011JOAQUIM DA SILVA RUA BRASIL, NUMERO 101
Torna-se clara a limitao dessa tcnica: caso um nome extrapole as 30 posies ou ainda o endereo, a nica alternativa cortar a informao, isto , omitir os caracteres que extrapolarem o tamanho definido. Outro problema que o arquivo de largura fixa ainda possui a incluso de um caractere. Imagine o problema se a Receita Federal resolve aumentar o nmero de dgitos do CPF? Passar de 11 para 12 algarismos, com certeza seria o caos para milhares de sistema com esse tipo de integrao. Com o XML, esse problema no existe:
294
<?xml version=1.0 encoding=iso-8859-1?> <CLIIENTE> <CPF>00011110011</CPF> <NOME>JOAQUIM DA SILVA</NOME> <ENDERECO>RUA BRASIL, NUMERO 101</ENDERECO> </CLIIENTE>
Tratando-se de uma estrutura simplificada, possvel que seja realizada uma validao no arquivo antes de ser iniciado o processamento. Comparativamente, seria como voc abrir uma planilha eletrnica no bloco de notas. Fica completamente impossvel identificar o seu contedo, porm foi gasto um tempo preciso para abrir um arquivo em um software que no ser possvel manipular. O padro XML definido pela W3C possui as seguintes especificaes:
Extensible Markup Language (XML) 1.0: define a sintaxe da XML. XML Pointer Language (XPointer) e XML Linking Language (XLink): definem um padro para representar os links entre os recursos. Alm dos links simples, como a tag <A> da HTML, a XML possui mecanismos para ligar recursos mltiplos e diferentes. A XPointer descreve como enderear um recurso, e a XLink descreve como associar dois ou mais recursos. Extensible Style Language (XSL): define a linguagem de folhas de estilos padro para a XML.
Como voc pode perceber o XML comea com uma instruo de processamento: <?xml ...?>. Essa a declarao XML. Embora no seja obrigatria, a sua presena explcita identifica o documento como um documento XML e indica a verso da XML com a qual ele foi escrito. No h declarao do tipo do documento. Diferentemente da SGML, a XML no requer uma declarao de tipo de documento. Entretanto, uma declarao de tipo de documento
Unidade 5
295
pode ser fornecida. Alm disso, alguns documentos precisaro de uma para serem entendidos sem ambiguidade. Exemplos de utilizao dos elementos vazios:
<?xml version=1.0 encoding=iso-8859-1?> <CLIIENTE> <CPF>00011110011</CPF> <NOME>JOAQUIM DA SILVA</NOME> <ENDERECO/> </CLIIENTE>
O Elemento <ENDERECO/> tem uma sintaxe modificada. Enquanto que as maiorias dos elementos em um documento envolvem algum contedo, elementos vazios so simplesmente marcadores onde alguma coisa ocorre (pode se comparar a tag <hr> do HTML que se trata de um separador). O final /> na sintaxe modificada indica a um programa que processa o documento XML que o elemento vazio e uma marca de fim correspondente no deve ser procurada. Visto que os documentos XML no requerem uma declarao de tipo de documento, sem essa pista seria impossvel para um analisador XML determinar quais marcas so intencionalmente vazias e quais teriam sido deixadas vazias por um erro. A XML suavizou a distino entre elementos declarados como vazios e os que no possuem contedo. A linguagem permite usar uma marca de elemento vazio para qualquer um desses casos. Tambm vlido usar um par de marcas incio-fim para elementos vazios: < ENDERECO ></ ENDERECO >. Os documentos XML so compostos de marcas e contedos. Existem seis tipos de marcaes que podem ocorrer em um documento XML: a) elementos; b) referncias a entidades; c) comentrios;
296
d) instrues de processamento; e) sesses marcadas; f) declaraes de tipos de documento.
a. Elementos
Os elementos so as tags mais comuns na forma de marcao. Eles so delimitados pelos sinais de menor e maior (< e >), a maioria dos elementos identificam a natureza do contedo que a envolvem. Alguns elementos podem ser vazios, como visto anteriormente; neste caso eles no tm contedo. O elemento no sendo vazio inicia-se com uma marca de incio, <elemento>, e termina com uma marca de trmino, </elemento>.
Atributos
Os atributos so associados aos elementos. Eles possuem valores e so localizados na abertura do elemento. Por exemplo:
<input type=text>
O elemento input cujo atributo type possui o valor text. Em XML, todos os valores de atributos devem estar entre aspas. Normalmente atributos vazios so omitidos do elemento.
b. Referncias a entidades
Alguns caracteres so reservados para identificar o incio de uma marcao. O sinal de menor, < , por exemplo, identifica o incio de uma marca de incio ou trmino desta. Para inserir esses caracteres em seu documento como contedo, deve haver uma alternativa para represent-los. Em XML, entidades so usadas para representar esses caracteres especiais. As entidades devem ter um nico nome. Para ser utilizada, a entidade deve simplesmente ser referenciada pelo nome. As
Unidade 5
297
referncias das entidades iniciam com o E comercial (&) e terminam com um ponto e vrgula (;). Por exemplo, a entidade lt insere um literal < em um documento. Para representar o sinal de maior dentro do XML, dever usar < resultando no seguinte cdigo:
<?xml version=1.0 encoding=utf-8?> <opercacao>6 < 7</opercacao>
c. Comentrios
Os comentrios so idnticos aos utilizados no HTML. Iniciamse com . Os comentrios podem conter qualquer caractere, a nica exceo se refere literal --. possvel colocar comentrios entre marcas em qualquer lugar do XML. Comentrios no fazem parte de um contedo textual de um documento XML. Um processador XML no necessita reconhecer esse bloco na aplicao.
Sesses CDATA
Apesar de ser possvel converter diversos tipos de caracteres para uma entidade, existem casos que esse processo pode se tornar complexo. Para que possamos escrever diversos tipos de caracteres sem nos preocupar em converter os elementos, utilizamos as sesses CDTAT. Em um documento, uma sesso CDATA instrui o analisador para ignorar a maioria dos caracteres de marcao. Vamos levar em considerao uma instruo PHP dentro de um XML. Ele pode conter caracteres que o analisador XML normalmente reconheceria como elementos, assim teremos a seguinte forma:
298
<?xml version=1.0 encoding=utf-8?> <opercacao><![CDATA[ if ((@$_POST[CAMPO1]>0)||(@$_POST[CAMPO2]>0)&&(@$_ POST[CAMPO3]>0)) { echo ok; } ]]> </opercacao>
Em todo o contedo da sesso (<![CDATA[, e o fim da seo, ]]>), os caracteres so passados diretamente para a aplicao, sem interpretao. Elementos, referncias a entidades, comentrios e instrues de processamento so todos irreconhecveis e os caracteres que os compem so passados literalmente para a aplicao. As nicas literais que no possvel ser contida nas sesses CDATA so as prprias marcaes de incio e fim da sesso. O XML um documento que pode ser gerado por diversos softwares e linguagens diferentes. Essa portabilidade permitiu sua ampla utilizao entre diversas tecnologias. Para ilustrar essa flexibilidade, veja como simples a criao de um XML utilizando o PHP. Neste exemplo o documento gerado de forma semelhante a um arquivo texto de largura fixa ou limitado por caractere utilizando a funo fopen.
<HTML> <HEAD> <TITLE>Documento PHP</TITLE> </HEAD> <BODY> <?php /* CONFIGURAES
Primeiramente voc deve a permisso no sistema operacional para que usurios da Web ou o usurio que detm o servio do servidor Web possa criar e apagar arquivos no diretrio/pasta onde esse arquivo est salvo.
Unidade 5
299
*/ $teste= array(array(1A,Zehh,10), array(1A,Tatiana,9), array(1B,Joo,3), array(1B,Bruna,5), array(1B,Bianca,8)); // Vetor simbolizando a leitura de uma fonte de dados $arquivo=fopen(arquivoteste.xml,w+); // fopen a funo que abre/cria um arquivo; ou uma url // w+ Abre para leitura e escrita; coloca o ponteiro do arquivo no comeo do arquivo e reduz o comprimento do arquivo para zero. Se o arquivo no existir, tenta cri-lo. // Para saber mais sobre esta funo pode acessar http://www.php.net/ manual/pt_BR/function.fopen.php $xml=<?xml version=\1.0\ encoding=\ISO-8859-1\?>\n; $xml.=<escola>\n; // $xml uma varivel onde est sendo armazenado informaes de texto, neste caso o que ser escrito no arquivo $sala=0; $controle=false; // varivel de controle para este caso trabalhando com vetor for ($i=0; $i<count($teste);$i++) { if ($sala!=$teste[$i][0]) { $sala=$teste[$i][0]; $controle=true; if ($i!=0) { $xml.=</salas>\n; } } else { $controle=false; } if ($controle==true) {
300
$xml.=<salas nome=\$sala\>\n; $controle=false; } $xml.=<aluno> <nome><![CDATA[.$teste[$i][1].]]></nome> <nota valor=\.$teste[$i][2].\ /> </aluno>\n; } $xml.=</salas> </escola>; fwrite($arquivo, $xml); // escreve no arquivo designado o contedo de uma varivel o texto fclose($arquivo); // fecha o arquivo echo arquivo gerado!!<br>; //*/ ?>
<a href=lerxml.php?arquivo=arquivoteste.xml>Clique aqui para ler o contedo</a><br> <a href=arquivoteste.xml target=_blank>Veja o xml</a> </BODY> </HTML>
Voc pode perceber que, apesar de o arquivo resultante ser um documento XML, as funes empregadas neste caso so as mesmas se caso fssemos construir um documento texto. Isso permite que linguagens que ainda no possuem bibliotecas prprias para o XML possam construir arquivos de comunicao nesse formato. Vejamos outro exemplo com os mesmos dados, porm utilizando uma biblioteca prpria para o XML.
Unidade 5
301
<HTML> <HEAD> <TITLE>Documento PHP</TITLE> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <BODY> <?php $teste= array(array(1A,Zehh,10), array(1A,Tatiana,9), array(1B,Joo,3), array(1B,Bruna,5), array(1B,Bianca,8)); $xml = new DOMDocument(1.0, ISO-8859-1); // cria o cabealho do XML $xml->preserveWhiteSpace = false; //ignora todos os espaos em brancos $xml->formatOutput = true; //gera o cdigo formatado $root = $xml->createElement(escola); //cria o primeira tag (raiz) $sala=0; // varivel de controle para este caso trabalhando com vetor for ($i=0; $i<count($teste);$i++) { // Fora o agrupamento das salas if ($teste[$i][0]!=$sala) { $salasXML = $xml->createElement(salas); $salaXML_no=$root->appendChild($salasXML); $sala=$teste[$i][0]; } // cria os elementos do xml aluno, nome e nota $alunoXML = $xml->createElement(aluno); // o elemento ou tag nome ter o nome do aluno como texto $nomeXML = $xml->createElement(nome); // cria uma sesso CDATA que permite caracteres especiais $cdataNome = $xml->createCDATASection($teste[$i][1]);
302
//cria o elemento nota sem texto $notaXML = $xml->createElement(nota); //acrescenta a tag aluno como filho da tag sala $alunoXML_no=$salaXML_no->appendChild($alunoXML); //acrescenta a tag nome como filha da tag aluno $nomeXML_no=$alunoXML_no->appendChild($nomeXML); //acrescenta a sesso CDATA com o nome do aluno dentro da tag nome $nomeXML_no->appendChild($cdataNome); // acrescenta a tag nota como filha da tag aluno $notaXML_no=$alunoXML_no->appendChild($notaXML); // adiciona o atributo valor para a tag nota $notaXML_no->setAttribute(valor,$teste[$i][2]); /* IMPORTANTE Uma vez realizado o setAttribute no pode ser acrescentado mais elementos a tag */ //Caso for o ltimo elemento da tag sala adiciona o atributo nome para a sala if ($teste[$i][0]!=$teste[$i+1][0]) { $salaXML_no=$salaXML_no->setAttribute(nome,$teste[$i][0]); } } $xml->appendChild($root); $xml->save(testeXMLDom.xml); //salvar arquivo ?> <a href=lerxml.php?arquivo=testeXMLDom.xml>Clique aqui para ler o conteúdo</a><br> <a href=testeXMLDom.xml target=_blank>Veja o xml</a> </BODY> </html>
Unidade 5
303
Neste exemplo uma classe foi utilizada para a gerao do XML, permitindo uma construo lgica utilizando todo o potencial do XML.
Existem diversos outros elementos que podem ser acrescentado ao XML utilizando a classe DOM. Pesquise um pouco mais sobre essa poderosa classe do PHP.
Existe um segredo para a utilizao da classe DOM. O encoding do XML para aceitar acentuao deve ser ISO8859-1. Porm, para que a classe consiga converter o charset, da pgina deve ser UTF-8. Caso contrrio, a classe no conseguir salvar o arquivo XML.
J pode observar duas formas de criar um documento XML. Pode perceber que, apesar de os dois exemplos utilizarem os mesmos dados, a forma de construo se distingue muito. Vamos montar agora a leitura desse documento por meio do PHP.
<HTML> <HEAD> <TITLE>L o XML</TITLE> </HEAD> <body> <?php $arquivo = file_get_contents($_GET[arquivo]); // recupera a informao de um arquivo ou url e atribui para uma varivel texto $xml = simplexml_load_string($arquivo); // transforma um texto no formato xml em objeto for ($i=0;$i<count($xml->salas);$i++) { $nome_sala = $xml->salas[$i][nome]; /*
304
IMPORTANTE
Para usar esta classe, necessrio conhecer o arquivo xml que est retornando. Vou explicar aqui no colocando a conceituao de orientao a objetos, mas explicando de forma simples e em linguagem usual. As regras so as seguintes: Para cada tag XML, criado um objeto.
Os blocos de tags que contenham diversas sub-tag podem ser acessada como vetor, indicando o nmero da ocorrncia de cada um. Cada atributo da tag pode ser acessado pelo nome como um vetor. */ echo <p>Sala .($i+1).: $nome_sala<br>; for ($j=0;$j<count($xml->salas[$i]->aluno);$j++) { $nome_aluno_da_sala = $xml->salas[$i]->aluno[$j]->nome; $nota_aluno_da_sala = $xml->salas[$i]->aluno[$j]->nota[valor];
echo Nome do aluno <b>.($j+1).</b> sala <b>$nome_sala</b>: <em><strong>$nome_aluno_da_sala</strong></em><br>; echo Nota do aluno <b>.($j+1).</b> da sala <b>$nome_sala</ b>: <em><strong>$nota_aluno_da_sala</strong></em><br><br>; } ?> <a href=javascript:back();>Voltar para a gerao do xml</a> </body> </HTML> } echo </p>;
Desta forma, voc pode ler qualquer arquivo XML apenas adequando manipulao das informaes que forem resgatadas.
Unidade 5
305
Namespaces
O Namespace em XML foi desenvolvido com o intuito de resolver o problema de conflitos de elementos. Em funo do XML permitir a criao de qualquer nome de tag para os documentos, pode ocorrer de diferentes usurios em diferentes contextos criarem tags com os mesmos nomes. O Namespace permite realizar uma declarao o contexto utilizado sobre uma tag. Poderamos utilizar o XML para registrar o valor de um livro da seguinte forma.
<?xml version=1.0 encoding=utf-8?> <livro> <titulo>XML uma viso do futuro!</titulo> <valor moeda=REAL>50,00</valor> </livro> Em outro contexto, agora possvel representar os dados do autor. <?xml version=1.0 encoding=utf-8?> <autor> <titulo>Sr</titulo> <nome>Joaquim da Silva</nome> </autor>
Quando lemos os dois documentos, percebemos que o ttulo do livro no possui relao com o ttulo do autor. Porm, um sistema automatizado no possui tal discernimento entre essas duas tags. Possivelmente ele interpretar as tags ttulo da mesma forma. Podemos solucionar esse problema realizando uma declarao de Namespace para que todos os elementos dentro de um bloco possam ser referenciados a ele. Utilizamos a seguinte declarao.
306
<?xml version=1.0 encoding=ISO-8859-1?> <livro xmlns=urn.endereodaaplicao.com:TituloDaAplicao> <titulo>XML uma viso do futuro!</titulo> <valor moeda=REAL>50,00</valor> </livro>
Outra forma de declarao a utilizao de abreviaes e atribuio de mais de um Namespace ao documento. Forando que a aplicao tenha o comportamento idntico a tags dentro de documentos diferentes.
<?xml version=1.0 encoding=ISO-8859-1?> <lv:livro xmlns:lv=urn.endereodaaplicao.com:TituloDaAplicao xmlns:dinheiro=urn:Financeiro:Dinheior> <lv:titulo>XML uma viso do futuro!</lv:titulo> <dinheiro:valor moeda=REAL>50,00</dinheiro:valor> </lv:livro>
f. Declaraes de Tipos de Documentos

Um dos maiores poderes da XML que ela permite que voc crie seus prprios nomes para marcas. Dependendo da aplicao provvel no ser significativo que os elementos estejam dispostos em uma ordem lgica. Podem estar ordenadas de forma aleatria, teramos o seguinte exemplo:
<?xml version=1.0 encoding=utf-8?> <pessoas> <Joaquim> Diga <saudao> Ol querida </saudao> , Maria.
Unidade 5
307
</Joaquim> <Pedro> <saudao> At mais tarde, Maria. </saudao> </Pedro> </pessoas>
Aos nossos olhos, podemos no encontrar o menor sentido nas instrues escritas. Mas XML processa de forma normal as informaes. No h nada de errado com esse documento XML. Pelo contrrio, ele possui significado ao menos para a pessoa que o escreveu ou esteja escrevendo uma folha de estilos ou aplicao. Para processar o documento deve haver alguma restrio na sequncia e alinhamento das marcas. Declaraes so onde essas restries podem ser expressas. As declaraes em XML permitem a um documento comunicar meta-informaes ao analisador a respeito do seu contedo. Meta-informao inclui as sequncias e os alinhamentos permitidos para as marcas, os valores de atributos e seus tipos e padres, os nomes de arquivos externos que podem ser referenciados e se eles podem ou no conter XML. H quatro tipos de declaraes em XML: declaraes de tipos de elementos, declaraes de listas de atributos, declaraes de entidades e declaraes de notaes.
308
Seo 2 Definio de Tipos de Documentos DTD

A estrutura de um documento definida pelos DTDs. DTD onde se especifica quais os elementos e atributos so permitidos no documento. Embora no seja necessrio que um documento XML tenha um DTD correspondente, recomenda-se, em alguns casos, a sua utilizao para garantir a conformidade do documento. O padro DTD utiliza somente elementos definidos, diferentemente do XML simples, em que se pode acrescentar diversos elementos diferentes. No DTD isso no pode ocorrer. Todo o elemento deve ser definido. Torna-se importante a sua utilizao quando necessria a extrema conformidade de informaes, quando empresas trocam informaes via XML com outras. Assim, para no haver discrepncias de informaes, necessrio definir quais elementos sero utilizados. As DTDs especificam a estrutura de um documento, e so definidas por meio da gramtica EBNF (Extended Backus-Naur Form), e no na sintaxe XML.
Processamento de Documentos XML

Para processar documentos XML e verificar se a sintaxe e o tipo utilizados so vlidas utiliza-se aplicaes denominadas processadores de XML ou Parsers. O Parser de validao percorre o documento para verificar se sua estrutura est de acordo com as regras de um DTD. Se o documento no estiver de acordo com a DTD, o Parser acusar um erro. Existem Parsers que no fazem validao do tipo, mas apenas verifica se a sintaxe do documento est correta. Os Parsers so utilizados para transformar o documento XML em uma estrutura de rvore para que as aplicaes possam acessar seu contedo.
Unidade 5
309
Definio de Tipo de Documento

A referncia de um documento para uma DTD feita em uma definio de tipo de documento. A DTD pode estar contida no documento (subconjunto interno) ou existir externamente como um arquivo separado (subconjunto externo). Desta forma, as DTDs so introduzidas em um documento XML por meio da declarao DOCTYPE. Uma declarao de tipo de documento colocada no prlogo de um documento XML, comeando por <!DOCTYPE e terminando por >. O exemplo a seguir representa um subconjunto interno.
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> ]> <email> <para>Maria</para> <de>Joo</de> <assunto>Jantar</assunto> <contedo>O que h para o jantar?</contedo> </email>
Os subconjuntos externos esto colocados fisicamente em outro arquivo que, em geral, termina com a extenso .dtd, embora essa extenso no seja necessria. Os subconjuntos externos so
310
especificados pela palavra-chave SYSTEM ou pela palavra-chave PUBLIC.

<?xml version=1.0?> <!DOCTYPE email SYSTEM definicaoXML.dtd > <email> <para>Maria</para> <de>Joo</de> <assunto>Jantar</assunto> <contedo>O que h para o jantar?</contedo> </email>
Veja que estamos apontando para uma definio externa chamada definicaoXML.dtd. O seu contedo pode ser representado da seguinte forma:
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> ]>
Outra forma de representar a definio seria referencia-la em uma url externa. Desta forma, vrios Parsers podem usar um DTD em comum para validar seus documentos.
<?xml version=1.0?> <!DOCTYPE email SYSTEM http://www.w3.org/TR/html4/strict.dtd >
Vimos um subconjunto externo utilizando um URL, que indica que a DTD amplamente utilizada. No exemplo, est sendo apontada a DTD para documentos HTML. Assim, os analisadores que no tm cpia local da DTD podem utilizar
Unidade 5
311
a URL fornecida para fazer o download da DTD, para fins de validao do documento. A declarao de tipo de documento pode ainda conter arquivos externos de validao comuns. Acrescentando ainda elementos especficos para o documento. Desta forma, podemos especificar todo o documento mesmo se todos os elementos no estejam detalhados em arquivos externos de especificaes.
<?xml version=1.0?> <!DOCTYPE email SYSTEM definicaoXML.dtd > <!ELEMENT tipo (#PCDATA)> <email> <para>Maria</para> <de>Joo</de> <tipo>html</tipo> <assunto>Jantar</assunto> <contedo>O que h para o jantar?</contedo> </email>
Lembre-se que essa declarao interna visvel somente dentro do documento onde est definido. Para que outros documentos sejam validados por este elemento, torna-se imprescindvel a sua definio no arquivo externo definicaoXML.dtd, no caso do exemplo. As DTDs que so usadas por mais de um documento devem ser colocadas no subconjunto externo.
Declaraes de Tipos de Elementos

Declaraes de tipos de elementos identificam os nomes dos elementos e a natureza do seu contedo. Essa declarao vem na forma de ELEMENT.
<!ELEMENT email (para+,de| assunto*,contedo?)>
A declarao representa o elemento email. Contm um modelo de contedo que representa os elementos que constaro
312
dentro do elemento. A separao entre vrgulas representa uma obrigatoriedade. O sinal de adio representa que o elemento para pode se repetir, mas pelo menos deve aparecer uma vez. J o ponto de interrogao (aps o contedo), indica que o elemento opcional, mas no deve aparecer mais de uma vez. O smbolo | representa uma ligao de ou. Essa ligao indica que o elemento de ou o elemento assunto sero representados. O smbolo * indica que o elemento assunto opcional e pode ocorrer n vezes no documento. Aps a declarao do modelo do documento, devemos declarar o tipo de informaes apresentadas no XML. Cada elemento deve ser declarado separadamente da seguinte forma:
<!ELEMENT para (#PCDATA)>
O elemento para chamado identificador genrico e vem depois da declarao ELEMENT. O conjunto entre parnteses que segue o identificador genrico (#PCDATA) indica o contedo permitido para o elemento e chamado de especificao de contedo. Esses dados sero analisados pelo analisador XML, portanto, qualquer texto de marcao (<, >, &, e ) ser tratado como marcao. As declaraes para todos os elementos usados em qualquer modelo de contedo devem estar presente para que um processador XML verifique a validade do documento.
Declaraes de Atributos
Como no podia ser diferente, a declarao de atributos uma parte fundamental do DTD. A declarao de atributo especifica uma lista de atributos para um determinado elemento usando a declarao pela palavra reservada ATTLIST. O elemento pode ter qualquer nmero de atributos.
Unidade 5
313
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ATTLIST email tipo CDATA #REQUIRED> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> ]> <email tipo=html> <para>Maria</para> <de>Joo</de> <assunto>Jantar</assunto> <contedo>O que h para o jantar?</contedo> </email>
A declarao anterior especifica que o elemento email possui um atributo tipo. A palavra reservada CDATA indica que tipo pode conter qualquer texto de caracteres, exceto os caracteres <, >, &, e . Perceba que a palavra reservada CDATA na declarao de tipo possui significado diferente da sesso CDATA em um documento XML, como j explicado. Outra caracterstica desse exemplo a palavra reservada REQUIRED. Indicao do atributo ser obrigatrio, caso o atributo seja opcional, devemos substituir REQUIRED por IMPLIED.
<!ATTLIST email tipo CDATA #IMPLIED>
Podemos ainda especificar o tipo de valores que os atributos podem receber. Ou seja, nos atributos possvel representar uma lista de valores nos quais o documento deve constar.
<!ATTLIST email tipo (html | text) html>
314
Lembre-se que o uso do DTD requer que o interpretador esteja preparado para interpret-lo. Caso contrrio, o DTD ser ignorado.
A declarao de atributos possui trs partes: nome, tipo, valor padro. Quanto ao nome, pode ser adotado o que melhor condiz com a regra do sistema. Obviamente o nome do atributo no pode se repetir para o mesmo elemento tampouco receber os marcadores especiais (<, >, &, ou ). Quanto aos tipos, existem atualmente seis tipos de atributos:
CDATA ID Qualquer texto permitido. No confunda atributos CDATA com sesses CDATA, eles no tm relao. Identifica de forma nica um elemento. Ou seja, no pode haver outro elemento com atributo ID com o mesmo valor. Os IDs identificam unicamente elementos individuais em um documento. Os elementos podem ter um nico atributo ID. Apontam para elementos com um atributo ID. O valor de um atributo IDREFS pode conter valores IDREF mltiplos separados por espaos em branco. Entidades so utilizadas para associar nomes com outros fragmentos do documento. Podem ser utilizadas entidades internas ou externas. O valor de um atributo ENTITIES pode conter valores de entidades mltiplos separados por espaos em branco. Um tipo de atributo mais restritivo, cujo valor consiste em caracteres letras, dgitos, pontos, sublinhados, hfens e doispontos. O valor de um atributo NMTOKENS pode conter valores NMTOKEN mltiplos separados por espaos em branco. Voc pode especificar que o valor de um atributo deve ser pego de uma lista especfica de nomes. Isso frequentemente chamado de tipo enumerado, porque cada um dos valores possveis est explicitamente enumerado na declarao.
IDREF ou IDREFS ENTITY ou ENTITIES
NMTOKEN ou NMTOKEN
Atributos Enumerados =
Alm dos tipos de atributos, possvel definir o valor padro para cada atributo:
Unidade 5
315
#REQUIRED
Especifica que o atributo deve aparecer no elemento. O documento XML no vlido se o atributo estiver faltando. Especifica que, se o atributo no aparece no elemento, ento a aplicao que est usando o documento XML pode usar qualquer valor que por ventura escolher. Um valor para este atributo no requerido. Especifica que o valor do atributo constante e no pode ser diferente no documento XML. Um valor para o atributo requerido. Especifica um valor padro para o atributo, se no for definido um.
#IMPLIED
#FIXED
valor
O analisador XML procura sempre normalizar os valores dos atributos. As referncias de caractere so substitudas por caracteres referenciados, referncias a entidades so resolvidas (recursivamente) e espaos em branco so normalizados.
Declaraes de Entidades
Declaraes de entidades permitem associar um nome ou uma definio a uma sigla ou outro cdigo de identificao. Essa identificao livre e pode conter quaisquer caracteres que no infrinjam os marcadores do XML. Os principais tipos utilizados so: entidades internas e entidades externas.
Entidades Internas
Entidades internas so as declaraes realizadas dentro do prprio documento. Essas declaraes tm o escopo limitado para o documento no sendo compartilhadas por outros.
316
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ATTLIST email tipo (html | text) html> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> <!ENTITY UNISUL Universidade do Sul de Santa Catarina> ]> <email tipo=text> <para>Maria</para> <de>Joo</de> <assunto>Jantar</assunto> <contedo>Vou enviar um e-mail para a &UNISUL; </contedo> </email>
O resultado desse documento ser uma converso da cadeia &UNISUL; para Universidade do Sul de Santa Catarina. Essa converso ser realizada em qualquer local do documento. Em outras palavras, permite definir atalhos para textos frequentemente digitados ou textos que se espera que sejam alterados, como o estado de reviso de um documento. Entidades internas podem incluir referncias para outras entidades internas, mas errado elas serem recursivas. A especificao XML predefine cinco entidades internas:
? < produz o sinal de menor, < ? > produz o sinal de maior, > ? & produz o E comercial, & ? ' produz um apstrofo, ? " produz aspas,
Unidade 5
317
Entidades externas
Entidades externas so as associaes de definies externas ao documento atual. Permitem o documento XML referenciar o contedo de um outro arquivo. Se elas contm texto, o contedo do arquivo externo inserido no ponto de referncia e analisado como parte do documento referente. Dados binrios no so analisados e podem somente ser referenciados em um atributo; eles so usados para referenciar figuras e outro contedo no XML no documento. Esse tipo de entidade possvel inserir seu contedo ao documento atual. Assim, podemos anexar vrios documentos para que o seu contedo possa relacionar com o restante do documento.
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ATTLIST email tipo (html | text) html> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> <!ENTITY UNISUL Universidade do Sul de Santa Catarina> <!ENTITY inserirTexto SYSTEM testeInserir.xml> ]> <email tipo=text> <para>Maria</para> <de>Joo</de> <assunto>Jantar</assunto> <contedo>Vou enviar um e-mail para a > &UNISUL; &inserirTexto; </contedo> </email>
318
O processador XML analisar o contedo desse arquivo como se ele ocorresse literalmente no local. Representando assim o resultado:
Seo 3 XML-Schema
O XML-Schema, tambm conhecido como XSD (XML Schema Definition), uma maneira mais eficiente de descrever a estrutura e o contedo de um documento XML. O propsito de um XML-Schema definir os blocos de construo permitidos em um documento XML, como um DTD. O XML-Schema semelhante a uma DTD, ambas definem a estrutura do XML. Originalmente o XML utilizou das DTDs como forma de definio de sua estrutura. Com os avanos em sua utilizao, percebeu-se que as DTDs eram imensamente limitadas, no permitindo diversos pontos, como:
as DTDs no so expansveis, no permitem que novos elementos sejam introduzidos; DTD no possuem suporte a tipos de dados; os DTDs no possuem suporte a namespaces, este recurso limitado ao documento XML.
Os desenvolvedores viram que as DTDs no podiam acompanhar a flexibilidade do XML. A sada para esse dilema foi o desenvolvimento de um novo padro de definio da estrutura do XML, que foi denominada de XSD ou XML Schema Definition, tambm chamada XML-Schema. Tanto a DTD quanto o XSD, ou XML-Schema, definem:
elementos que podem aparecer em um documento;

Unidade 5
319
atributos que podem aparecer em um documento; que elementos so elementos filhos; a ordem dos elementos filhos; o nmero de elementos filhos; se um elemento vazio ou pode incluir texto; tipos de dados para elementos e atributos; valores padro e fixos para elementos e atributos.
As vantagens do XSD, ou XML-Schema, sobre a DTD so:
XML-Schemas so extensveis para adies futuras, com isso voc pode:

reutilizar seu Schema em outros Schemas; criar seus prprios tipos de dados derivados dos tipos padres; referenciar mltiplos esquemas em um mesmo documento.
XML-Schemas so mais ricos e teis que DTDs. XML-Schemas so escritos em XML e, com isso, voc:

no tem de aprender outra linguagem; pode usar seu editor XML para editar seus arquivos XML-Schemas; pode usar seu parser XML para verificar seus arquivos XML-Schemas; pode manipular seu XML Schema com XML DOM; pode usar seu XML-Schema com XSLT.
320
XML-Schemas suportam tipos de dados, com isso mais fcil:

descrever contedo de documentos permissveis; validar os dados; trabalhar com dados de um banco de dados; definir restries aos dados; definir padres/formatos de dados; converter dados entre diferentes tipos.
XML-Schemas suportam namespaces.
Princpios do XSD
J vimos que o namespace usado para identificar unicamente o nome dos elementos. Basicamente consiste em nomear todos os elementos de um XML com um mesmo prefixo. Para identificar onde termina o prefixo e onde comea o nome propriamente dito, usa-se o caractere : (dois pontos). Por definio, os elementos XML-Schema comeam com o prefixo xs. Desta forma, no h problemas em identificar elementos do XML-Schema e os elementos do XML caso eles tenham a mesma tag. Visando a um melhor entendimento, vamos utilizar um exemplo de e-mail. Vamos comprar a definio com a DTD e o XSD.
<?xml version=1.0?> <!DOCTYPE email [ <!ELEMENT email (para,de,assunto,contedo)> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)>
Unidade 5
321
<!ELEMENT assunto (#PCDATA)> <!ELEMENT contedo (#PCDATA)> ]> <email> <para>Joo</para> <de>Joaquim</de> <assunto>Reunio</assunto> <contedo>A reunio est agendada para as 10:00 hs</contedo> </email>
Um XML-Schema para o mesmo XML pode ser escrito da seguinte maneira:

<?xml version=1.0?> <xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema targetNamespace=http://www.w3schools.com xmlns=http://www. w3schools.com elementFormDefault=qualified> <xs:element name= email> <xs:complexType> <xs:sequence> <xs:element name=para type=xs:string/> <xs:element name=de type=xs:string/> <xs:element name=assunto type=xs:string/> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
Os seguintes elementos para, de e assunto so todos elementos que possuem um tipo definido: string. O tipo definido pelo atributo type do elemento xs:element. O elemento nota no possui um atributo definindo o seu tipo. Podemos considerar que seu tipo complexo ou complexType,
322
pois seu contedo composto pela sequncia de elementos de, para, assunto e texto.
Elementos complexos so aqueles que contm outros elementos e elementos simples so aqueles que no contm outros elementos.
Elementos simples
Elementos simples no podem conter outros elementos ou atributos. O seu contedo somente no formato de caractere, porm possvel alterar o tipo de caractere contido nesse elemento. O XML-Schema possui a flexibilidade do XML onde voc pode construir seus prprios tipos. Ele j possui alguns predefinidos (integer, float, date, etc) que nos facilitam na construo.
xs:string xs:decimal xs:integer xs:boolean xs:date xs:time
Veja como definir elementos simples com esses tipos.

Definio
<xs:element name=nome type=xs:string/> <xs:element name=paginas type=xs:integer/> <xs:element name=datavencimento type=xs:date/>
Elemento
< nome >Silva</ nome > < paginas >31</ paginas > < datavencimento >201005-01</ datavencimento >
Alm dos tipos, podemos definir valores padres para os elementos. Esses valores podem ser fixed ou default.
Unidade 5
323
<xs:element name=color type=xs:string fixed=red/> <xs:element name=color type=xs:string default=red/>
Quando voc define um atributo fixed a um elemento, significa que esse elemento no ser capaz de receber outro valor a no ser aquele definido. Diferentemente, o atributo default indica que por padro o elemento receber um valor, mas poder ser tranquilamente alterado.
Somente elementos complexos podem possuir atributos.
Atributos
O XSD define que os atributos so elementos simples e somente elementos complexos podem ter atributos. Mesmo assim, a definio do atributo diferente da definio de um elemento. Para definir um elemento em XSD, utilizamos xs:element, mas para definir um atributo usamos o elemento xs:attribute. Ao definir um atributo, podemos declarar como ele sendo obrigatrio ou opcional. Ainda, como vimos nos elementos simples, podemos definir um valor default ou fixed, como vemos a seguir.
<xs:attribute name=linguagem type=xs:string use=optional/> <xs:attribute name= linguagem type=xs:string use=required/>
Quando definimos o tipo, tanto para elemento simples quanto para o atributo, tem por objetivo realizar uma restrio quanto ao seu contedo. Desta forma, pretende-se sempre validar o elemento quanto informao esteja em um formato vlido ou no.
324
Facetas de restrio
A restrio do contedo no se restringe aos tipos predefinidos. O XSD nos permite construir tipos de dados por meio de restries. Para isso, necessrio utilizar um subconjunto do tipo de dados original, ou seja, preciso limitar o domnio de valores possveis. Isso realizado por meio das facetas de restrio. As facetas so muito teis principalmente para os atributos. Frequentemente eles s podem assumir alguns valores predefinidos. Um exemplo clssico o atributo sexo, onde criamos um conjunto finito e pequeno de valores que o atributo sexo pode suportar. O tipo de dados sexo uma string de um caractere que s aceita os valores M e F respectivamente masculino e feminino. Esse tipo de dados poder ser construdo por meio do elemento enumeration:
<?xml version=1.0 encoding=utf-8?> <xs:simpleType name=sexo> <xs:restriction base=xsd:string> <xs:enumeration value=M/> <xs:enumeration value=F/> </xs:restriction> </xs:simpleType>
Alm do elemento enumeration, existem outros elementos que nos facilitam na definio das facetas. So eles:

length: define o comprimento de um tipo de dados. minLength: define o comprimento mnimo de um tipo de dados. maxLength: define o comprimento mximo de um tipo de dados. pattern: define a expresso regular (Regular Expressions) a ser utilizada na validao do tipo.
Unidade 5
325
enumaration: limita os valores possveis de um tipo de dados a um conjunto previamente especificado. whiteSpace: define como devem ser tratados os espaos em branco. minInclusive: limite mnimo considerando o valor especificado. minExclusive: limite mnimo desconsiderando o valor especificado. maxInclusive: limite mximo considerando o valor especificado. maxExclusive: limite mximo desconsiderando o valor especificado. totalDigits: nmero mximo de dgitos considerando a parte inteira e a parte decimal. fractionDigits: nmero mximo de casas decimais.
Lembre-se que necessrio tambm especificar o tipo de dados base, ou seja, a partir de qual tipo de dados o novo tipo est sendo construdo. Isso feito a partir de um elemento restriction e do atributo base.
Vejamos outro exemplo onde criaremos um elemento estado. Como no exemplo anterior, utilizaremos o elemento enumeration para criar uma lista de valores.
326
<?xml version=1.0 encoding=utf-8?> <xs:element name=estado type=TipoEstado/> <xs:simpleType name=TipoEstado> <xs:restriction base=xs:string> <xs:enumeration value=SP/> <xs:enumeration value=PR/> <xs:enumeration value=SC/> <xs:enumeration value=RS/> </xs:restriction> </xs:simpleType>
Poderamos definir o mesmo elemento estado de uma forma mais direta:

<?xml version=1.0 encoding=utf-8?> <xs:element name=estado> <xs:simpleType> <xs:restriction base=xs:string> <xs:enumeration value=SP/> <xs:enumeration value=PR/> <xs:enumeration value=SC/> <xs:enumeration value=RS/> </xs:restriction> </xs:simpleType> </xs:element>
Perceba que a primeira forma possui um uso mais prtico. Caso necessitssemos aplicar a mesma restrio a algum outro elemento do meu XML, atribui-se o tipo TipoUF sem precisar reescrever todos os valores novamente. O tipo TipoUF no possui uma restrio quanto ao seu uso em outros elementos. Vamos construir uma faceta para restringir um tipo de dado chamado livro. Para descrever o livro, ele ser um texto com comprimento mnimo de trs e mximo de 100 caracteres.
Unidade 5
327
Vamos ainda substituir os espaos em branco duplicados por um nico espao em branco. O XSD ficaria assim:
<?xml version=1.0 encoding=utf-8?> <xs:simpleType name=livro> <xs:restriction base=xsd:string> <xs:minLength value=3/> <xs:maxLength value=100/> <xs:whiteSpace value=collapse/> </xs:restriction> </xs:simpleType>
Elementos complexos
O elemento complexo composto por outros elementos, porm esses elementos podem conter apenas texto simples. Para isso, o elemento deve possuir um ou mais atributos. Por essa definio, at mesmo elementos que no contenham informao textual (elementos vazios) podem ser considerados complexos. Desde que esses elementos vazios possuam pelo menos um atributo.
Elemento complexo todo o elemento que contenha outros elementos e/ou atributos.
Como j explicado, existem duas formas de definio:
criar um tipo de forma independente ao elemento e depois atribuir esse tipo ao elemento; definir diretamente um elemento nomeando-o e declarando seu contedo dentro da prpria declarao do elemento.
Vamos adotar a primeira, apesar de a segunda parecer mais simples primeira vista. Definir um tipo independente acarreta algumas vantagens, como:
328
outros elementos podem usar aquele tipo; pode-se criar outros tipos que usem aquele tipo.
Definiremos um elemento complexo chamado contato. Esse elemento conter trs sub-elementos: nome, endereo e cep. Teramos assim o seguinte XML:
<?xml version=1.0?> <contato> <nome>Joo da Silva</nome> <endereco>Av: Getlio Vargas</ endereco> <cep>12345678911</cep> </contato >
J o XSD ficaria:
<?xml version=1.0> <xs:element name=contato type=tContato/> <xs:complexType name=tContato> <xs:sequence> <xs:element name=nome type=xs:string/> <xs:element name=endereco type=xs:string/> <xs:element name=cep type=xs:positiveInteger/> </xs:sequence> </xs:complexType>
Veja que o elemento xs:sequence tem a funo de descrever a sequncia em que cada sub-elemento devero aparecer. Portanto, se no XML um elemento se um elemento no estiver na ordem definida, o XML no ser validado pelo meu XML-Schema. Utilizando desse formato de declarao possvel estender o tContato para tipos mais complexos. Podemos criar um tipo tPessoa que estenda o tipo tContato. Estender possui a mesma caracterstica da Herana na Orientao Objeto. O novo tipo estendido possui as caractersticas do pai e mais algum
329
Unidade 5
detalhamento. Veja como ficaria um tipo tPessoa que, alm de nome, possui idade, sexo e endereo.
<?xml version=1.0?> <xs:complexType name=tPessoa> <xs:complexContent> <xs:extension base=tContato> <xs:sequence> <xs:element name=idade type=xs:integer/> <xs:element name=sexo type=xs:string/> <xs:element name=endereo type=xs:string/> </xs:sequence> </xs:extension> </xs:complexContent> </xs:complexType>
Os elementos complexos podem ser vazios, como j foi mencionado. Para isso, necessrio que esse elemento possua pelo menos um atributo.
<aluno matricula=45980/>
O elemento aluno no possui contedo e, para definir esse tipo de elemento complexo, devemos definir um tipo que permita apenas elementos em seu contedo, mas ns no declaramos nenhum elemento realmente.
<?xml version=1.0?> <xs:element name=aluno type=tMatricula/> <xs:complexType name=tMatricula> <xs:atrribute name=matricula type=xs:positiveInteger/> </xs:complexType>
Vamos supor que o elemento no esteja mais vazio, ele contm um texto e um atributo. Vamos usar o mesmo elemento aluno
330
do exemplo anterior, mas agora que ele possui um texto como contedo.
<aluno prodid=45980>Joaquim Carvalho</aluno>
A declarao inteligente seria assim:

<?xml version=1.0?> <xs:element name=aluno type=tAluno/> <xs:complexType name=tAluno> <xs:simpleContent> <xs:extension base=xs:string> <xs:attribute name=matricula type=xs:positiveInteger/> </xs:extension> </xs:simpleContent> </xs:complexType>
Sempre que o elemento contiver apenas contedo simples (texto e atributos), adiciona-se um xs:simpleContent em torno do contedo. Dentro do xs:simpleContent voc pode optar por usar o xs:extension para expandir o tipo simples base do elemento ou o xs:restriction para limit-lo. Vamos definir um XSD onde se tenha elementos que contenham textos e outros elementos. Para isso, vamos tomar como exemplo um elemento chamado contrato.
<?xml version=1.0?> <contrato> Nmero <nrContrato>1032</nrContrato> Declaro que o Sr. <nome>Joo Silva</nome> Firma acordo de prestao de servio com a Empresa <empresa>Qualquer LTDA.</empresa> Data: <data>2010-08-10</data>. </contrato>
O XSD seria definido da seguinte forma:

331
Unidade 5
<?xml version=1.0?> <xs:element name=contrato type=tContrato/> <xs:complexType name=tContrato mixed=true> <xs:sequence> <xs:element name=nrContrato type=xs:positiveInteger/> <xs:element name=nome type=xs:string/> <xs:element name=empresa type=xs:string/> <xs:element name=data type=xs:date/> </xs:sequence> </xs:complexType>
Para permitir que caracteres apaream entre os elementos filhos de contrato, o atributo mixed deve ser definido como true. Em vez de utilizar o elemento xs:sequence, poderamos usar o xs 1:all para indicar que os elementos filhos podem aparecer em qualquer ordem. Existe tambm o xs:choice, que usado quando queremos que apenas um dos filhos aparea.
Utilizando o PHP para validar o XML com o XSD

Vimos que o XSD na realidade um XML que valida o prprio XML. Como no poderia ser diferente, vrios softwares realizam a validao do XML por meio de um XSD, assim como diversas linguagens possuem bibliotecas que efetuam essa tarefa para ns. Vamos demonstrar um exemplo de uma validao do XML utilizando o XSD por meio do PHP desenvolvida por Pedro Padron. Este exemplo se baseia em um catlogo de livros. Teramos assim o XML:
332
<?xml version=1.0?> <catalogo> <livro> <isbn>8504006115</isbn> <autor>George Orwell</autor> <titulo>1984</titulo> <paginas>302</paginas> </livro> <livro> <isbn>8588639173</isbn> <autor>Ramez Elmasri</autor> <autor>Shamkant Navathe</autor> <titulo>Sistemas de Bancos de Dados</titulo> <paginas>744</paginas> <editora>744</editora> </livro> </catalogo>
Perceba que nesse documento, apesar de existir dois registros, eles possuem o mesmo nmero de elementos. Porm, a informao plausvel e deve ser validada. As definies para o XSD so estabelecidas a partir das seguintes regras:

todo livro deve ter um nico ISBN; todo livro deve ter pelo menos um autor e no mximo N autores; todo livro deve ter um nico ttulo; todo livro deve ter uma especificao do nmero de pginas; o nome da editora opcional e assume-se que apenas uma editora tenha os direitos de publicao da obra;
Unidade 5
333
a ordem de apario dos dados deve ser: ISBN, autor, ttulo e nmero de pginas.
Convertendo essas regras para as definies do XSD fica assim:

<?xml version=1.0?> <xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema>  <xs:element name=catalogo>  <xs:complexType>  <xs:sequence>  <xs:element name=livro maxOccurs=unbounded>  <xs:complexType> -->  <xs:element name=isbn>  <xs:simpleType>  <xs:restriction base=xs:string>  <xs:length value=10/> </xs:restriction> </xs:simpleType>
334
</xs:element>  <xs:element name=autor type=xs:string minOccurs=1 maxOccurs=unbounded/>  <xs:element name=titulo type=xs:string/> <xs:element name=paginas type=xs:integer/>  <xs:element name=editora type=xs:string minOccurs=0/> </xs:sequence> </xs:complexType> </xs:element> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
Veja que o cenrio normalmente se trata de que no servidor existe um arquivo de validao XSD e um script para validar o XML, no nosso caso o PHP. O mais comum para essa utilizao quando o software recebe um XML externo e requer que seja validado antes do processamento. Para isso, vejamos a construo do PHP:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /> <title>Validação do XML utilizando XSD</title>
Unidade 5
335
</head> <body> <?php /** * Ao tentar validar um arquivo XML, se algum erro * for encontrado a libxml ir gerar Warnings, o que * no creio que seja o mais interessante para ns. * Para evitar que isso acontea, voc pode determinar * que ir obter os erros por sua prpria conta. Lembre-se * que esta funo abaixo deve ser chamada antes de * instanciar qualquer objeto da classe DomDocument! */ libxml_use_internal_errors(true); /* Cria um novo objeto da classe DomDocument */ $objDom = new DomDocument(); /* Carrega o arquivo XML */ $objDom->load(catalogo.xml); /* Tenta validar os dados utilizando o arquivo XSD */ if (!$objDom->schemaValidate(catalogo.xsd)) { /** * Se no foi possvel validar, voc pode capturar * todos os erros em um array */ $arrayAllErrors = libxml_get_errors(); /** * Cada elemento do array $arrayAllErrors * ser um objeto do tipo LibXmlError */ print_r($arrayAllErrors); } else {
336
/* XML validado! */ echo XML obedece às regras definidas no arquivo XSD!; } ?> </body> </html>
Procure alterar o arquivo catalogo.xml. Veja o que ocorre se voc alterar as tags ou o tipo de informao.
Seo 4 RSS
Hoje em dia comum buscar informaes em tempo real. O envio dessas informaes por e-mail acabou se tornando muito ruim, uma vez que, alm das informaes que necessitamos, recebemos uma avalanche de contedos sem qualquer interesse. Para resolver esse dilema, desenvolve-se um dialeto para XML chamado de Rich Site Summary, o RSS.
RSS um recurso desenvolvido em XML que permite aos responsveis por sites e blogs divulgarem notcias ou novidades destes. Para isso, o link e o resumo daquela notcia, ou a notcia na ntegra, so armazenados em um arquivo XML. Esse arquivo conhecido como feed, feed RSS.
Graas a esse recurso, sites e blogs podem divulgar contedo novo de maneira rpida e precisa. Quanto ao usurio, este pode ser informado de cada novidade de seus sites preferidos. Para se fazer uso desse recurso, o usurio deve incluir o feed (que nada mais que o RSS) do site que deseja acompanhar em um programa leitor de RSS, chamado de agregador. O agregador
Unidade 5
337
l o contedo do feed e lista em uma interface. Cada software agregador possui sua prpria interface. Os softwares agregadores permitem a incluso de diversos feeds. Essa ao acarreta em um ganho em agregao das informaes. O sistema RSS facilita muito a leitura das informaes. Voc no necessita entrar em vrios sites para se manter informado. Basta ler as chamadas das notcias ou atualizaes no leitor-RSS e acessar as notcias que for de seu interesse.
O padro RSS foi originalmente desenvolvido pela Netscape no incio de 1999. O projeto foi descontinuado, a empresa entendia que o RSS no era vivel para os usurios. A Netscape desenvolveu o padro at a verso 0.90. A UserLand, uma pequena empresa, acreditou no padro e simplificou o cdigo para aplicar nas suas ferramentas de blogs. O RSS 0.91 foi lanado. Um grupo de desenvolvedores continuou o RSS 0.90 baseando-o no padro RDF, paralelamente a UserLand. Esses desenvolvedores lanaram a verso 1.0. A UserLand, no entanto, continuou seu trabalho, lanado verses como 0.92, 0.93 at que finalmente chegou verso 2.0. Certamente, a UserLand daria a numerao 1.0 a esta ltima, mas essa sequncia j tinha sido adotada pelo outro grupo. Diversos grupos desenvolvem, hoje, o padro RSS. Cada uma acaba nomeando o projeto de diversas formas diferentes.
RDF
Para saber mais sobre RDF pesquise em www.w3.org/RDF
RDF a sigla para Resource Description Framework e trata-se de uma especificao normalmente baseada em XML, que tem como objetivo automatizar e ampliar recursos para a internet por meio de representao de informaes. O RDF tem como base o trabalho de uma srie de grupos que desenvolvem tecnologias de informao. Isso significa que o RDF no foi criado exclusivamente para ferramentas como o RSS, como muitos pensam. Na verdade, se estudarmos o RDF a fundo, veremos que ele tem utilidade em vrias aplicaes, como em sistemas de busca e mecanismos de compartilhamento de informao.
338
O que Atom
Ao contrrio de RSS, Atom no uma sigla, um formato para divulgao de notcias. H quem diga que esse projeto , inicialmente, uma proposta de unificao do RSS 1.0 e do RSS 2.0. O Atom tambm baseado em XML, mas seu desenvolvimento tido como mais sofisticado. O grupo que nele trabalha tem at o apoio de grandes corporaes, como o Google. A maioria dos agregadores de feed disponveis ao usurio suporta tanto as verses do RSS como o Atom.
Para saber mais sobre Atom, pesquise em <www.atomenabled. org>.
O padro
O RSS baseado no XML, nada melhor do que explicar o funcionamento do RSS por meio de seu cdigo-fonte. Para servir de exemplo, usaremos o cdigo a seguir. Note que ele contm campos bsicos, o que significa que feeds RSS disponveis na internet podem contar com mais detalhes:
<?xml version=1.0 encoding=ISO-8859-1 ?> <rss version=0.91> <channel> <title>Folha.com - Em cima da hora - Principal</title> <link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http:// www1.folha.uol.com.br/emcimadahora/</link> <description>Primeiro jornal em tempo real em lngua portuguesa</ description> <language>pt-br</language> <copyright>Copyright Folha Online. Todos os direitos reservados.</ copyright> <docs>http://redir.folha.com.br/redir/online/emcimadahora/ rss091/*http://www1.folha.uol.com.br/folha/conheca/arquivo_e_ copyright.shtml</docs> <webMaster>webmaster@folha.com.br (Webmaster Folha Online)</ webMaster> <image>
Unidade 5
339
<title>Folha.com - Em cima da hora - Principal</title> <url>http://www1.folha.uol.com.br/folha/images/logo-folha_online88x31.gif</url> <link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http:// www1.folha.uol.com.br/emcimadahora/</link> <width>88</width> <height>31</height> <description>Primeiro jornal em tempo real em lngua portuguesa</ description> </image> <item> <title>Novela: Nara d um tapa na cara de Beto em "Uma Rosa com Amor"</title> <link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http:// www1.folha.uol.com.br/ilustrada/763300-novela-nara-da-um-tapa-nacara-de-beto-em-uma-rosa-com-amor.shtml</link> <description> <i>A programao est sujeita a alterao devido edio dos captulos e de responsabilidade da emissora</i> <b>Uma Rosa com Amor (SBT, 20h15)</b> Egdio pede para Elisa levar um suco a Serafina. Serafina pega o copo de suco, mas no toma. Serafina diz para Raquel que se aproximar de Milton, vai arrebentar a cara dela. Serafina afirma para Nara que est ajudando Claude a construir casas para o povo. Serafina afirma que no tomar o suco, porque ele pode estar envenenado. Beto desafia Egdio e pega o suco para tomar. Egdio impede. Egdio explica que cuspiu e colocou laxante no suco de Serafina. Egdio joga o copo na parede. Serafina sai da casa. Mrs. Smith pergunta se Claude esteve no restaurante. Claude nega. <a href="http://redir.folha.com.br/redir/online/emcimadahora/ rss091/*http://www1.folha.uol.com.br/ilustrada/763300-novela-nara-daum-tapa-na-cara-de-beto-em-uma-rosa-com-amor.shtml">Leia mais</a> (12/07/2010 - 00h12)</description> </item> <item> <title>Novela: Alfredo descobre que Joca matou o senador em "Ribeiro do Tempo"</title>
340
<link>http://redir.folha.com.br/redir/online/emcimadahora/rss091/*http:// www1.folha.uol.com.br/ilustrada/763294-novela-alfredo-descobre-quejoca-matou-o-senador-em-ribeirao-do-tempo.shtml</link> <description> <i>A programao est sujeita a alterao devido edio dos captulos e de responsabilidade da emissora</i> <b>Ribeiro do Tempo (Record, 22h)</b> Eleonora pede para Arminda represent-la no velrio do senador. Lincon pede para Ellen encontr-lo na Folha da Corredeira. Slvio diz a Guilherme que Zuleide ligou para dizer que ele estava na praa com Tio. Guilherme fala para o pai que Tio/Diana no tem nada demais. Trs mulheres choram muito diante do caixo do senador. Beatriz fica irritada e pergunta a Nicolau quem so as mulheres. Lincon conta a Ellen que uma mensagem foi enviada da Secretaria de Segurana do Estado, ameaando o senador de morte. <a href="http://redir.folha.com.br/redir/online/emcimadahora/ rss091/*http://www1.folha.uol.com.br/ilustrada/763294-novelaalfredo-descobre-que-joca-matou-o-senador-em-ribeirao-do-tempo. shtml">Leia mais</a> (12/07/2010 - 00h08)</description> </item> </channel> </rss>
A primeira linha informa que se trata de um documento XML. A segunda se refere verso do RSS usado. Neste caso, a 0.91. O elemento channel indica o canal do feed. O elemento link a referncia em que o RSS est associada. O elemento title preenchido com o nome do site (Folha.com Em cima da hora Principal). J o elemento description fornece uma breve descrio do site. No entanto, muitos webmasters preferem informar o slogan do site nesse campo. O elemento language informa o idioma usado no site (portugus do Brasil). O elemento copyright fala sobre o direito autoral das informaes. J o docs representa o link para os documentos sobre o direito autoral. O elemento webmaster informa o responsvel por ele. Nesse exemplo est sendo utilizado um bloco de imagem. Esse bloco tem a finalidade de mostrar a logo do jornal no RSS e no obrigatrio.
341
Unidade 5
At o momento vimos apenas as informaes de cabealho. Agora analisaremos os elementos do corpo do RSS. O bloco item est a notcia. Para cada uma, necessrio ter uma rea item especfica. Nesse exemplo, foram retiradas apenas duas notcias, portanto possui dois blocos item. O elemento title dentro do bloco item possui a informao do ttulo da notcia. O elemento description permite a visualizao de um resumo do texto (ou do texto completo). O elemento link indica o endereo da notcia.
Existem diversos softwares que voc pode utilizar para a gerao do RSS. Pesquise sobre eles.
Logotipo
A partir de sua verso 1.5, o navegador de internet Mozilla Firefox passou a adotar um smbolo diferente para o RSS. Depois disso, o smbolo se tornou padro para representar feeds RSS, isto , se tornou universal. No caso do Firefox ou de outros programas compatveis com RSS, basta clicar no smbolo em questo que geralmente aparece no canto direito da barra de endereos ou em um ponto especfico da pgina visitada para que o feed do site acessado seja adicionado. O exemplo a seguir foi retirado da pgina <broculos.net> e muito simples a forma de representar um escritor de feeds utilizando o PHP.
<?php /** * For demonstration purposes, the data is defined here. * In a real scenario it should be loaded from a database. */ $channel = array(title => Exemplo de RSS feed,
Figura 5.1: logotipo do RSS. Fonte: favor incluir fonte completa.
342
PHP.,
description => Exemplo de construo de RSS utilizando o link => http://www.broculos.net,
copyright => Copyright (C) 2008 Broculos.net); $items = array( array(title => Exemplo 1,
description => Descrio do primeiro Exemplo., link 2008))) => http://www.example.com/example1.html, => date(D, d M Y H:i:s O, mktime(22, 10, 0, 12, 29, => Exemplo 2,
pubDate
, array(title
description => Esta a descrio do Exemplo 2., link 2008))) ); $output = <?xml version=\1.0\ encoding=\ISO-8859-1\? . >; $output .= <rss version=\2.0\>; $output .= <channel>; $output .= <title> . $channel[title] . </title>; $output .= <description> . $channel[description] . </description>; $output .= <link> . $channel[link] . </link>; $output .= <copyright> . $channel[copyright] . </copyright>; foreach ($items as $item) { $output .= <item>; $output .= <title> . $item[title] . </title>; $output .= <description> . $item[description] . </description>; $output .= <link> . $item[link] . </link>; $output .= <pubDate> . $item[pubDate] . </pubDate>; $output .= </item>; } => http://www.example.com/example2.html, => date(D, d M Y H:i:s O, mktime(14, 27, 15, 1, 3,
pubDate
Unidade 5
343
$output .= </channel>; $output .= </rss>; header(Content-Type: application/rss+xml; charset=ISO-8859-1); echo $output; ?>
Sntese
Voc viu nesta unidade o quanto o XML flexvel e se adqua a diversas funcionalidades no qual necessitamos. Ainda verificou com ocorre uma definio de tipo de documento assim como seus elementos e suas caractersticas. Verificamos que, apesar de essas definies serem teis, acabam por ser um tanto limitadas. Para acompanhar o desenvolvimento do prprio XML, necessitamos de uma definio mais apurada, o XSD. Por fim, voc viu uma grande utilidade do XML que se refere comunicao com diversos browser e aplicativos para sintetizar informaes.
Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico, mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem. 1) Pesquise ao menos trs tecnologias onde o XML est sendo utilizado. Sintetize as principais caractersticas da funcionalidade e publique no Frum da ferramenta de aprendizado virtual.
344
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em: <www.w3schools.com/>. Acesso em: 01 mar. 2010. W3C. World Wide Web Consortium, 2010. Disponvel em: <www.w3.org/>. Acesso em: 2 mar. 2010. Dicas-l, 2010. Disponvel em <www.dicas-l.com.br//>. Acesso em: 16 maio 2010. iMasters, 2010. Disponvel em < http://imasters.uol.com.br//>. Acesso em: 16 maio 2010. Plugmasters, 2010. Disponvel em: <www.plugmasters.com.br>. Acesso em: 15 maio 2010.
Unidade 5
345
unidade 6
Asynchronous Javascript and XML (AJAX)


Entenda a tecnologia que envolve o AJAX. Saiba o que so requisies assncronas. Saiba como interagir o AJAX com o PHP. Conhea os princpios para construir uma aplicao utilizando o AJAX.
Sees de estudo
Seo 1 Seo 2 Seo 3 Seo 4 O que o AJAX Mtodo GET no AJAX Mtodo POST no AJAX Framework

Todas as aplicaes Web sempre foram vistas como um enorme potencial. A portabilidade que possui associada com a arquitetura da internet coloca as aplicaes Web em outro patamar de abordagem. Essa mesma vantagem acarreta em um problema crucial: o tempo de resposta das requisies. O desenvolvimento Web se baseia em requisies feitas pelos usurios a um servidor. Consequentemente esses usurios aguardam a resposta dessas requisies. Torna-se extremamente lento quando ocorre alguma inconsistncia na regra de negcio imposta no servidor. O formulrio retorna com um aviso onde o usurio deve ajustar as informaes. Vrias alternativas foram criadas para minimizar esse problema. Alguns adotaram que o formulrio j retornaria com os campos preenchidos. Mesmo assim, o tempo de resposta e a frustrao do usurio ainda permaneciam. Outra soluo, um pouco mais engenhosa e gerenciada pelo JavaScript, utilizava pginas auxiliares abertas por meio de pop-ups, onde eram realizadas as validaes e retornava as informaes. Essa soluo tinha um problema fundamental, pois, quando se utilizava pop-up, os browsers comearam a bloquear por causa das propagandas excessivas nos sites. A aplicao parava de funcionar e era necessrio um recurso para abrir uma segunda janela a cada momento que uma validao no servidor fosse necessria. Apesar das solues encontradas, o problema se prolongava. Como poderiam os desenvolvedores criar uma aplicao Web utilizando recursos de uma aplicao desktop? A base para essa resposta nasceu com o AJAX.
348
Seo 1 O que o AJAX

AJAX (acrnimo em lngua inglesa de Asynchronous JavaScript and XML) o uso sistemtico do JavaScript e do XML para tornar o navegador mais interativo com o usurio. O AJAX utiliza de solicitaes assncronas de informaes e uma iniciativa na construo de aplicaes Web mais dinmicas e criativas. O AJAX no uma tecnologia. So realmente vrias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. O AJAX foi criado por Jesse James Garrett, da Adaptive Path, em meados de fevereiro de 2005. Todas as tecnologias presentes no AJAX j existem h algum tempo e so de conhecimento amplamente difundido entre os desenvolvedores Web. So elas:

XHTML; JavaScript; CSS; DOM; XML.
As atualizaes das pginas existem desde os primrdios da internet. O LiveScript da Netscape possibilitava a incluso de scripts de pginas Web que poderiam ser executados pelo cliente, isso na dcada de 1990. O JavaScript a evoluo do LiveScript. A Microsoft foi a responsvel pela introduo do objeto XMLHttpRequest para criar e gerenciar solicitaes e respostas assncronas. O AJAX promoveu um marketing para as tecnologias que o compe, tornando o prprio AJAX uma das tecnologias de desenvolvimento Web mais em evidncia, permitindo que aplicaes Web concorram com as aplicaes de desktop.
Unidade 6
349
A fim de entender como o mecanismo do AJAX funciona, vamos analisar o processo de requisio de uma aplicao Web sem a utilizao do AJAX: 1. Usurio preenche os campos do formulrio e submete; 2. O navegador gera uma solicitao para o servidor; 3. O servidor processa a solicitao; 4. O servidor gera uma resposta que contm a pgina exata que o navegador interpretar; 5. O navegador limpa a janela e carrega a pgina enviada pelo servidor; 6. O usurio interage com a nova pgina. Voc pode observar que em todo o transcorrer desse simples processo o usurio ficou totalmente obsoleto. No se podia interagir com as informaes enquanto a requisio estava sendo processada. Esse tipo de requisio chamado de requisio sncrona. Esse modelo tornou-se obsoleto, pois foi concebido para os documentos hipertextos originais da internet. O AJAX acrescenta uma camada nas aplicaes Web que a utiliza. Essa camada fica entre o cliente e o servidor e gerencia a comunicao entre ambos. Essa camada criada quando o usurio interage com a pgina: o cliente cria um objeto de controle chamado XMLHttpRequest que gerencia a solicitao. A camada do AJAX recebe todas as solicitaes e enfileira as requisies para o servidor. medida que o servidor responde, o AJAX manipula a pgina do cliente conforme os dados de retorno. O gerenciamento do AJAX permite que o formulrio seja submetido parcialmente. Essa caracterstica torna fundamental a maior interao com o usurio. Quando trabalhamos com pequenos formulrios, o envio de informaes parciais acaba no se tornando parte fundamental do processo. Porm, em formulrios maiores ou que necessite de validaes constantes, torna-se indispensvel.
350
Aplicabilidade do AJAX
Existem diversos tipos de situaes em que o uso do AJAX amplamente utilizado. Algumas situaes so mais perceptveis, como: validao de formulrios, atualizao de enquetes e de carrinhos de compras (e-commerce), conversao on-line (chats), entre outras que priorizam a atualizao de informaes em tempo real. Outro exemplo bastante comum so os sites de relacionamento.
Muitos utilizam plenamente o AJAX para melhorar a interao com os usurios. Um dos mais populares sites conhecidos a rede social Orkut pertencente ao Google e utiliza bastante esse recurso quanto classificao de amigos. O Twitter, outra rede social, utiliza o AJAX para verificar se existem novos tweets para o usurio.
Podemos encontrar o AJAX em sites para melhorar a apresentao de imagens. Muitos utilizam esse recurso para que no seja necessrio carregar todas as fotos no incio da pgina, tornando assim o tempo de resposta muito menor. Um exemplo da facilidade do AJAX para a imagem o Google Maps. Conforme o usurio arrasta o mapa, as imagens vo carregando por setores. As compras realizadas em sites de venda vm gradualmente utilizando mais e mais o AJAX. Muitos j utilizam quando necessitam alterar o valor no carrinho de compras, tanto no clculo do frete como quando trocamos a quantidade de mercadorias.
Unidade 6
351
Seo 2 Mtodo GET no AJAX

J vimos que o AJAX uma tecnologia responsvel pela maior interao entre as aplicaes Web e os usurios. Agora vamos aprofundar esse conjunto de tecnologias, para isso, vamos utilizar o PHP com linguagem de servidor para nos ajudar. O mtodo de formulrio GET envia as informaes para o servidor na url da pgina. Esse mtodo mais simples, porm menos seguro de utilizar. A aplicabilidade desse mtodo est em um maior gerenciamento do processo de envio das informaes ao servidor. No necessrio registrar um elemento para que os dados possam ser descritos na url. Vamos considerar uma pgina simples para iniciar o entendimento da tecnologia. Nesta pgina necessrio escolher o estado e deve carregar algumas cidades.
<!DOCTYPE html PUBLIC -// W3C // DTD XHTML 1.0 Transitional // EN http :// www.w3. org /TR/ xhtml1 / DTD / xhtml1 - transitional . dtd > <html xmlns= http://www.w3.org/1999/xhtml xml:lang=pt-br lang=pt-br> <head> <title>Exemplo 3 − Escolha a Cidade</title> <script type=text/ecmascript src=ajaxInit.js></script> <script type=text/javascript> function selecionaCidade (estado) { // testa o contedo da combo if (estado!=) { // chamada da funo ajax = ajaxInit(); if (ajax) { // realiza a leitura do retorno do AJAX ajax.onreadystatechange = escreveCidades ; // url onde se encontra o cdigo do servidor
352
} } } } } }
url = cidade.php?estado=+estado ; // envia a url para o AJAX pelo mtodo GET ajax.open (GET , url , true ) ; // executa o AJAX ajax.send (null) ;
} else { // limpa a combo de cidades limparCombo(cidade);
function escreveCidades () { // verifica a preparao do AJAX, 4 est pronto if ( ajax.readyState == 4) { // status do AJAX if ( ajax.status == 200) { // o AJAX retorna em forma de texto. // a funo interpreta o retorno para montar a combo acrescentaOption(cidade,ajax.responseText);
function acrescentaOption(combo, texto) { // quebra o texto em um vetor var option=texto.split(^);
// identifica o elemento no formulrio neste exemplo uma caixa de seleo var elemento=document.getElementById(combo); var valores = new Array();
Unidade 6
353
// limpa todo o contedo do lemento elemento.length=0; for (var i=0;i< option.length; i++) { // acrescenta um contedo elemento.length++; // divide o valor retornado do AJAX em um vetor valores = option[i].split(|); // acrescenta um contedo elemento.options[i] = new Option(valores[1], valores[0], 0, 0); }
function limparCombo(combo) { // recupera o elemento var elemento=document.getElementById(combo); // limpa todo o contedo do lemento elemento.length=0; // acrescenta um contedo elemento.options[0] = new Option(------, , 0, 0);
</script> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /></head> <body>
<form name=selecioneCidade> <label for=estadoaccesskey=e> <u>E</u>stado: </label> <select name=estado id=estado onChange=selecionaCidade(this. options[this.selectedIndex].value)> <option value= selected=selected>------</option>
354
<option value=pr>PR</option> <option value=sp>SP</option> </select> <br/> <label for=cidade accesskey=c><u>C</u>idade :</ l abe l> <select name=cidade id=cidade> </select> </form> </body> </html>
Nesta pgina, estamos criando o HTML, realizando a chamada do AJAX e tratando a resposta do AJAX. O script de JS (ajaxInit.js) onde se realiza o instanciamento do objeto o XMLHttpRequest. A este instanciamento podemos chamar de AJAX puro.
// Documento JavaScript function ajaxInit () { // define varivel var xmlhttp ; // tratamento de erros try { // chamada do objeto xmlhttp = new XMLHttpRequest ( ) ; } catch (ee) { try { // criando o objeto sobre os navegadores diferentes da Microsoft xmlhttp = new ActiveXObject (Msxml2.XMLHTTP); } catch (e) { try {
Unidade 6
355
} } }
// criando objeto sobre o navegador da Microsoft xmlhttp = new ActiveXObject (Microsoft.XMLHTTP); } catch (E) { // caso no de suporte xmlhttp = false ;
return xmlhttp ; }
Podemos perceber que a utilizao do objeto XMLHttpRequest simples, mas requer cuidados. Veja que o cdigo pequeno, onde basicamente se restringe ao ActiveXObject. O restante das instrues so desvios para cada browser que devemos ter o cuidado de estar presente. Caso contrrio, o AJAX pode no funcionar adequadamente. Vejamos como deve estar o PHP para trabalhar com este script.
<? // recupera a informao passada pelo mtodo GET $estado = $_GET[estado]; $cidades = ; // Verifica qual estado est sendo trabalhado if ( $estado==pr ) { //acrescenta informaes para a varivel $cidade $cidades .= 1|Tupssi^ ; $cidades .= 2|Toledo^ ; $cidades .= 3|Cascavel^ ; $cidades .= 4|Pato Branco ; } //// Verifica qual estado est sendo trabalhado
356
if ( $estado==sp ) { //acrescenta informaes para a varivel $cidade $cidades .= 5|Mogi^ ; $cidades .= 6|Palmeiras^ ; $cidades .= 7|Santos ; } // escreve a varivel echo $cidades ; ?> Mesmo com essa simplicidade de cdigo deve sempre existir alguns cuidados. A acentuao sempre um problema. Procure utilizar codificao mais apropriada para o navegador.
O readyState pode ser utilizado para montar uma interao com o usurio mais agradvel como uma animao informando que a requisio se encontra em processamento. Ele pode ocorrer de quatro tipos: 1. Sendo enviado; 2. Processando; 3. Armazenando; 4. Pronto.
A resposta do AJAX no ocorre uma nica vez, mas recursivo. Portanto, o processo de enviar a requisio e retornar ocorre vrias vezes durante o processo.
Neste exemplo, verificamos a extenso do AJAX. Como ele se comporta em uma requisio de informaes? Apesar de estarmos utilizando um formulrio, o seu enfoque no est em registrar informaes, mas no resgate. Perceba que voc pode estar mesclando as metodologias conforme a regra de aplicao, utilizando o AJAX para compor as informaes do formulrio e
Unidade 6
357
enviar as informaes para o servidor no mtodo tradicional para garantir a sua navegabilidade. Um exemplo disso seria a incluso de um produto a um carrinho de compras. Ele remete ao contedo do seu carrinho (sem uso do AJAX). J no carrinho, caso queira aumentar a quantidade de produtos, retirar algum ou calcular o frete, utiliza-se o AJAX para uma maior interao. Apesar de uma grande parte das aplicaes Web trabalharem essencialmente com recuperao de dados, necessitamos em outros momentos incluir dados na aplicao. Para aumentar um pouco a complexidade, vamos montar um cadastro de pessoa com quatro campos: cdigo, nome, UF Residncia, Cidade de Residncia. Vamos precisar de duas tabelas no banco de dados. Primeiro, a tabela de cidades:
DROP TABLE IF EXISTS prg3.cidade; CREATE TABLE prg3.cidade ( id_cidade int(10) unsigned NOT NULL AUTO_INCREMENT, nm_cidade varchar(45) COLLATE latin1_general_ci NOT NULL, id_uf varchar(2) COLLATE latin1_general_ci NOT NULL, PRIMARY KEY (id_cidade), KEY Index_2 (id_uf) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
A outra tabela de pessoas. Esta tabela ser relacionada com a de cidade.
358
DROP TABLE IF EXISTS prg3.pessoa; CREATE TABLE prg3.pessoa ( id_pessoa int(10) unsigned NOT NULL AUTO_INCREMENT, nm_pessoa varchar(45) DEFAULT NULL, id_cidade int(10) unsigned NOT NULL, PRIMARY KEY (id_pessoa), KEY FK_pessoa_1 (id_cidade), CONSTRAINT FK_pessoa_1 FOREIGN KEY (id_cidade) REFERENCES cidade (id_cidade) ) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=latin1;
Essas duas tabelas sero criadas no banco de dados prg3, j utilizado em outros exemplos. Vamos montar o formulrio HTML e nele acrescentaremos cada funo JavaScript para manipular os dados e utilizar o AJAX. Podemos chamar esse arquivo de inicial.html.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Cadastro de Pessoas</title> <script type=text/ecmascript src=ajaxInit.js></script> <script type=text/javascript> // varivel global var tipoDados=;
// o restante dos scripts ser acrescentado a partir deste ponto. </script> <style type=text/css> <!-.normal {
Unidade 6
359
} -->
background-color: #FFF; color: #000; font-weight: normal;
</style> <link href=teste.css rel=stylesheet type=text/css /> </head> <body> <h1>Cadastro de Pessoas</h1> <hr /> <form name=frmpessoa method=post enctype=multipart/ form-data onsubmit=validarcampos(this); return false; onreset=limparstyles();> <table width=40% border=1> <tr> <td scope=col><label for=codigo>Cdigo</label></td> <td scope=col><input name=codigo type=text class=normal id=codigo value= readonly=readonly /></td> </tr> <tr> <td><label for=nome>Nome</label></td> <td> <input type=text name=nome id=nome value= obrigatorio=sim descr=Nome class=normal/> </td> </tr> <tr> <td><label for=uf>UF Residencia</label></td> <td>
360
<select name=uf class=normal id=uf onChange=carregarDado s(estado=+this.options[this.selectedIndex].value, cidade.php, cidade) obrigatorio=sim descr=UF Residencia> <option value=>-------------</option> <option value=SP>SP</option> <option value=PR>PR</option> <option value=SC>SC</option> <option value=RS>RS</option>
</select> </td> </tr> <tr>
<td><label for=cidade>Cidade Residencia</label></td> <td> <select name=cidade class=normal id=cidade obrigatorio=sim descr=Cidade Residencia > <option value=>-------------</option>
</select> </td> </tr> <tr> <td colspan=2 align=center> <input type=submit name=salvar value=Salvar /> <input type=reset name=limpar value=Limpar /> <br /> <input type=button value=Listar name=listar onclick=carregarDados (, salvarDados.php, salvar)/></td> </tr> </table> </form> <hr />
Unidade 6
361
<p> <div id=pagina> </div> </p> </body> </html>
Existe um script em JavaScript chamada ajaxInit.js que est sendo carregado na pgina. Esse script j foi explicado em exemplos anteriores que se refere ao objeto XMLHttpRequest. Nesse formulrio j est sendo feito as chamadas das funes. Uma j conhecida em exemplos anteriores, na combobox cidade carregamos as cidades. o primeiro elemento a ser acessado, j que para cadastrarmos qualquer informao necessrio informar o estado e a cidade em que reside a pessoa.
<select name=uf class=normal id=uf onChange=carregarDados( estado=+this.options[this.selectedIndex].value, cidade.php, cidade) obrigatorio=sim descr=UF Residencia>
Nesse trecho, est sendo realizada uma chamada de funo genrica, ou seja, essa funo chamada em outras partes do programa para realizar tarefas distintas. Assim, temos a funo:
// funo genrica para carregar informaes function carregarDados (codigo, url, tipo) { // varivel auxiliar var aux=codigo.split(=); // testa o contedo if (aux[1]!=) { // chamada da funo ajax = ajaxInit(); if (ajax) {
362
} } }
tipoDados=tipo; ajax.onreadystatechange = escreveDados ; url = url+?+codigo ; ajax.open (GET , url , true ) ; ajax.send (null) ;
} else { // limpa a combo de cidades if (tipo==cidade) limparCombo(cidade);
Essa funo monta a camada do AJAX para o envio e recebimento de informaes e passa por trs parmetros:
cdigo url tipo so os parmetros do mtodo get enviados pela URL.
a pgina de destino do AJAX.
um controlador para realizar os desvios necessrios do programa.
O que podemos ressaltar da funo a utilizao da varivel global tipoDados usada para transmitir o controlador. Ainda existe a chamada da funo limparCombo, utilizada para excluir os elementos da combobox cidade caso no tenha sido escolhido nenhum estado. Outra chamada a funo escreveDados, que verifica o retorno do AJAX e manipula a informao recebida.
Unidade 6
363
function escreveDados() { if ( ajax.readyState == 4) { if ( ajax.status == 200) { if (tipoDados==cidade) acrescentaOption(cidade,ajax.responseText); } } }
A funo escreveDados verifica quando o AJAX retorna o cdigo de sucesso para, ento, poder enviar os dados a serem acrescentados na combobox. Perceba que est sendo testado o tipo para realizar um desvio. Mais adiante, acrescentaremos outros desvios a essa funo. Podemos ento acrescentar as funes de manipulao de combobox: acrescentar dados, retirar e selecionar dados. Essas funes no utilizam o AJAX, porm utilizam conceitos de vetores e delimitadores de caracteres. Esse tipo de programao um artifcio amplamente utilizado para agrupar as informaes e posteriormente poder separ-las de forma correta.
function selecionaCombo(objSel, valor) { for (i=0; i < objSel.length; i++){ // verifica se o item possui o valor procurado.
if (objSel.options[i].value==valor) { // seleciona o item
} } }
objSel.selectedIndex = i; break;
// acrescenta os dados na combobox
364
function acrescentaOption(combo, texto) { //transforma o conjunto de caractere em um vetor
var option=texto.split(^); var elemento=document.getElementById(combo); var valores = new Array(); // limpa a combobox
elemento.length=0; for (var i=0;i< option.length; i++) { // adiciona um novo indice a combobox
elemento.length++; // quebra em um novo vetor para montar os valores da combobox
valores = option[i].split(|); // acrescenta o novo element na combobox
} }
elemento.options[i] = new Option(valores[1], valores[0], 0, 0);
// limpa a combobox function limparCombo(combo) { var elemento=document.getElementById(combo); elemento.length=0; elemento.options[0] = new Option(------, , 0, 0);
A montagem da combobox cidade se d por meio de uma consulta ao banco de dados. Desta forma, foi utilizado um programa para realizar essa consulta e preparar os dados de retorno. O programa foi nomeado de cidade.php:
Unidade 6
365
<?php $estado = $_GET[estado]; $cidades = ; // inclui os parmetros para conectar no banco de dados include(variaveis.bd); // conecta do banco $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); // vamos selecionar o banco de dados errado o que resultar em um erro mysql_select_db(prg3); // a consulta montada e encaminhada ao servidor $result= mysql_query(SELECT c.id_cidade, c.nm_cidade FROM cidade c WHERE c.id_uf=.$estado.); //lista o resultado do banco de dados $cidades=|-------------; while ($lista_cidades=mysql_fetch_array($result)) { $cidades.=^.$lista_cidades[id_cidade].|.mb_convert_ encoding($lista_cidades[nm_cidade],utf-8, iso-8859-1); } // encerra a conexo mysql_close(); echo $cidades ; ?>
Esse programa realiza a consulta no banco de dados e retorna a informao. A preparao dessa informao feita por meio de delimitadores, nos quais sero posteriormente quebrados em vetores (funo acrescentaOption). Uma funo do PHP que facilita a escrita do AJAX em HTML 4 a funo mb_ convert_encoding. Essa funo converte os dados em uma nova decodificao. Ela garante que a acentuao sair de forma correta dentro do AJAX.
366
Procure verificar qual os tipos de codificao possveis para a funo MB_convert_encoding
Neste ponto j temos o necessrio para carregar as informaes para efetivar um novo cadastro. Vamos agora montar a funo em JavaScript para validar os dados do formulrio. Esta funo deve ser acrescentada ao programa inicial.html.
function validarcampos(form) { var elementos=form.elements; var resp=; var enviarcampos=; for (var i=0;i<elementos.length; i++) { // verifica o tipo de campo para ser testado corretamente
if (((elementos[i].type==text) || (elementos[i].type==hidden) || (elementos[i].type==select-one)) && (elementos[i].getAttribute( obrigatorio)==sim) && (document.getElementById(elementos[i]. getAttribute(id)).value==)) { // altera o estilo do campo com problema elementos[i].style.backgroundColor= #FF9; elementos[i].style.color= #F00; elementos[i].style.fontWeight= bold;
resp+=O campo +elementos[i].getAttribute(descr) + obrigatorio.\n; } else { // garante que os botes no sero alterados
if ((elementos[i].getAttribute(type)!=submit) && (elementos[i].getAttribute(type)!=reset) && (elementos[i].getAttribute (type)!=button)) { } } elementos[i].style.backgroundColor= #FFF; elementos[i].style.color= #000; elementos[i].style.fontWeight= normal;
Unidade 6
367
// no acrescenta os botes no envio das informaes
if ((elementos[i].getAttribute(type)!=submit) && (elementos[i]. getAttribute(type)!=reset) && (elementos[i].getAttribute(type)!=but ton)) { // monta a url de envio
if (enviarcampos==) enviarcampos=elementos[i].getAttribute( name)+=+document.getElementById(elementos[i].getAttribute(id)). value; else enviarcampos+=&+elementos[i].getAttribute(name)+= +document.getElementById(elementos[i].getAttribute(id)).value; } } form.reset(); return false; } if (resp!=) { alert(resp); return false; } else { // envia as informaes para o AJAX carregarDados (enviarcampos, salvarDados.php, salvar) } enviarcampos
Essa funo vasculha em todos os elementos do formulrio a fim de identificar quais so os campos obrigatrios e validlos. A funo utiliza um artifcio do XML em que foi empregado no HTML. Os campos obrigatrios receberam dois atributos customizados obrigatorio e descr. Um para informar a obrigatoriedade e o outro a identificao na mensagem de erro. No formulrio, fica desta forma:
<input type=text name=nome id=nome value= obrigatorio=sim descr=Nome class=normal/>
368
Desta forma, a funo se torna mais genrica e o controle passa a ser do formulrio no mais do cdigo de validao. Outra informao importante dessa funo que so testados os tipos de campos. Dependendo do tipo, pode ser feita uma validao mais apropriada. Nos campos utilizados, foram manipulados os estilos em CSS para ressaltar as informaes com problemas de validao. Uma vez validado os campos, os dados so enviados para o AJAX submeter ao programa salvarDados.php.
<?php // prepara uma varivel de retorno com uma tabela HTML $retorno=<table width=\70%\ align=\center\ border=\1\><tr><th>Cdigo</th><th>Nome</th><th>Cidade</ th><th>UF</th><th>Ao</th></tr>\n; // inclui os parmetros para conectar no banco de dados include(variaveis.bd);
// conecta do banco $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); // vamos selecionar o banco de dados errado o que resultar em um erro mysql_select_db(prg3); // realiza uma validao nos dados if ((@$_GET[nome]!=) && (@$_GET[cidade]!=)) { // feita uma validao ternria, o qual verifica um dado e acrescenta um valor a uma varivel $codigo = @$_GET[codigo]!=? $_GET[codigo] : 0;
// converte para o encode correto e a funo addslashes prepara as informaes para cadastrar em um banco de dados $nome = addslashes(mb_convert_encoding(@$_GET[nome],iso8859-1,utf-8)); // o mysql permite a funo replace (deleta e insere a mesma informao) quando no existe insere, se existe altera $cidade = @$_GET[cidade];
Unidade 6
369
mysql_query(replace into pessoa (id_pessoa, nm_pessoa, id_cidade) value ($codigo, $nome,$cidade)); } // monta uma consulta de retorno na tela $result= mysql_query(SELECT p.id_pessoa, p.nm_pessoa, c.nm_cidade, c.id_uf FROM pessoa p, cidade c WHERE p.id_cidade=c.id_cidade);
//lista o resultado do banco de dados while ($pessoas=mysql_fetch_array($result)) { // prepara as informaes para mostrar na tela $retorno.=<tr>\n; $retorno.=<td>.$pessoas[id_pessoa].</td>\n;
$retorno.=<td>.mb_convert_encoding($pessoas[nm_ pessoa],utf-8, iso-8859-1).</td>\n; $retorno.=<td>.mb_convert_encoding($pessoas[nm_ cidade],utf-8, iso-8859-1).</td>\n; $retorno.=<td>.$pessoas[id_uf].</td>\n;
$retorno.=<td><a href=\#\ onclick=\carregarDados(codigo=.$pes soas[id_pessoa]., carregaDados.php, pessoa)\>Alterar</a></td>\n; } // encerra a conexo mysql_close(); $retorno.=</table>; echo $retorno; ?> $retorno.=</tr>\n;
A informao montada no programa formatada em uma tabela HTML. Assim, no mostra somente a informao cadastrada, mas todas as informaes contidas no banco de dados. Para
370
retornar essa lista, necessrio acrescentar um desvio na funo escreveDados.

function escreveDados() { if ( ajax.readyState == 4) { if ( ajax.status == 200) { if (tipoDados==cidade) acrescentaOption(cidade,ajax.responseText); if (tipoDados==salvar) ajax.responseText; } } } document.getElementById(pagina).innerHTML =
Esse desvio feito para escrever na tag div a tabela de retorno. Essas informaes abrem a opo para outra funcionalidade: a alterao de dados. Essa funcionalidade utiliza o mesmo mecanismo da funcionalidade de inserir. A diferena que sabemos qual o cdigo est sendo enviado. A dificuldade aqui em recuperar as informaes. Para diminuir o custo do AJAX em processar as informaes, vamos utilizar um nico programa para carregar as informaes em todos os campos, inclusive a combobox de cidade. Para isso, j foi formatado na tabela de resposta um link para alterar os dados. Este link envia o cdigo da pessoa para o AJAX.
<td><a onclick=carregarDados(codigo=1, carregaDados.php, pessoa) href=#>Alterar</a></td>
O programa carregaDados.php realiza a consulta das informaes e formata o retorno.
Unidade 6
371
<?php $codigo = $_GET[codigo]; $pessoa = ; // inclui os parmetros para conectar no banco de dados include(variaveis.bd);
// conecta do banco $link = mysql_connect($serv, $user, $pass) or die(Erro na conexo com o banco de dados); // vamos selecionar o banco de dados errado o que resultar em um erro mysql_select_db(prg3);
// a consulta montada e encaminhada ao servidor $result= mysql_query(SELECT p.id_pessoa, p.nm_pessoa, c.id_cidade, c.id_uf FROM pessoa p, cidade c WHERE p.id_cidade=c.id_cidade AND p.id_pessoa=.$codigo); //lista o resultado do banco de dados $listPessoa=mysql_fetch_array($result); // formata os dados de retorno por meio de delimitadores $pessoa=$listPessoa[id_pessoa].$.mb_convert_ encoding($listPessoa[nm_pessoa],utf-8, iso-8859-1).$.$listPessoa[id_ cidade].$.$listPessoa[id_uf].~; // realiza a consulta de todas as cidades do estado cadastrado $result= mysql_query(SELECT c.id_cidade, c.nm_cidade, c.id_uf FROM cidade c where id_uf=.$listPessoa[id_uf].); $cidades=|-------------; while ($lista_cidades=mysql_fetch_array($result)) { // formata o retorno por meio de delimitadores. $cidades.=^.$lista_cidades[id_cidade].|.mb_convert_ encoding($lista_cidades[nm_cidade],utf-8, iso-8859-1); } $pessoa.=$cidades; // encerra a conexo mysql_close(); echo $pessoa ;
372
?>
Veja que neste programa esto sendo utilizadas duas consultas: uma para pessoas e outra para montar a combobox cidade. Essa prtica reduz o tempo de resposta e garante que as informaes esto sendo enviadas de forma correta. O AJAX recupera a informao, porm para poder atribuir as informaes de maneira correta, necessrio realizar mais um desvio na funo escreveDados.
function escreveDados() { if ( ajax.readyState == 4) { if ( ajax.status == 200) { if (tipoDados==cidade) acrescentaOption(cidade,ajax.responseText); if (tipoDados==pessoa) carregarPessoa(ajax.responseText); if (tipoDados==salvar) ajax.responseText; } } } document.getElementById(pagina).innerHTML =
Quando o retorno destinado alterao de dados, o tipo dever ser pessoa. Porm, necessitamos de outra funo onde atribuda todas as informaes aos seus respectivos campos.
function carregarPessoa(retorno) { // monta um vetor para o tipo de dados de combobox e texto var tipos=retorno.split(~); // separa em vetor os dados de texto var vl_campos=tipos[0].split($); // atribui os dados para cada campo de formulrio document.frmpessoa.codigo.value=vl_campos[0];
Unidade 6
373
document.frmpessoa.nome.value=vl_campos[1]; // seleciona o estado cadastrado para a pessoa selecionaCombo(document.frmpessoa.uf,vl_campos[3]); // acrescenta as cidades do estado selecionado acrescentaOption(cidade,tipos[1]); //seleciona a cidade cadastrada para a pessoa selecionaCombo(document.frmpessoa.cidade,vl_campos[2]); }
A funo carregarPessoa separa em vetores a cadeia de caracteres retornada pelo AJAX. Assim, acrescenta os dados nos campos, alm de realizar a chamada para montar a combobox de cidades. At aqui, j foram realizadas a incluso, a alterao dos dados e um retorno formatado dos dados includos. Porm, para se tornar mais amigvel, necessrio mostrar essa listagem das informaes cadastradas mesmo antes de se cadastrar um item novo. Como o programa salvarDados.php foi montado para realizar a manipulao dos dados somente quando os dados do formulrio forem enviados, podemos utilizar a mesma chamada para listar todas as informaes de pessoas. Assim, acrescentamos um boto ao formulrio para que seja chamado o programa sem parmetros.
<input type=button value=Listar name=listar onclick=carregarDados (, salvarDados.php, salvar)/>
O programa apenas executar a consulta. No ser realizado nenhum tipo de manipulao de dados, j que os campos do formulrio esto em branco. Voc pode perceber que o AJAX em si extremamente simples. Porm, a programao empregada a ele para manipular os dados se torna extremamente complexa. Qualquer informao que transite por essa camada deve ser observada, monitorada, gerenciada e testada de forma que possa ser controlada e suprimir o mximo de inconsistncias possveis.
374
Seo 3 Mtodo POST no AJAX

O mtodo GET nos garante um grande volume de solues, porm possui um limitador. O nmero de caracteres. Esse nmero uma limitao da prpria URL que no pode ultrapassar 255 caracteres. Portanto, tratando-se de formulrios com um volume de dados maior, temos de utilizar outra soluo. O mtodo POST do formulrio resolve essa situao. O mtodo POST requer que os dados sejam encapsulados no corpo do formulrio. O prprio HTML naturalmente faz isso no seu cdigo. Mas, utilizando o AJAX, o HTML no gerencia o envio, e sim o JavaScript que realiza essa tarefa. Portanto, para nos auxiliar no encapsulamento das informaes, utilizamos a funo encodeURI. Essa funo fora a identificao do recurso sobre o HTML. Desta forma, sua aplicabilidade sobre o AJAX a torna quase perfeita na sua utilizao. Vamos ver um exemplo do envio de um formulrio simples por meio do mtodo POST. Primeiramente montamos o HTML com o nome de form.php
<html> <head> <title>Enviando formulrio POST com PHP e AJAX</title>  <script language=javascript src=script.js type=text/javascript></ script> </head> <body> <table cellpadding=2 cellspacing=0 width=50%> <!-//No evento onsubmit (ao enviar), ele seta o valor dos campos na funo setarCampos() e depois executa a funo enviarForm() da pgina script.js. Caso o usurio no tenha Javascript instalado/habilitado no navegador, ele envia o formulrio via ACTION.
Unidade 6
375
--> <form action= method=post onSubmit=setarCampos(this); enviarForm(processar.php, campos, divResultado); return false;> <tr> <td>Nome</td> <td> <input name=txtNome id=txtNome type=text> </td> </tr> <tr> <td>Email</td> <td> <input name=txtEmail id=txtEmail type=text> </td> </tr> <tr> <td> </td> <td> <input type=submit value=Enviar> <input type=reset value=Limpar> </td> </tr> </form> </table> <div id=divResultado/> <script> //Cria a funo com os campos para envio via parmetro function setarCampos() { // recusros sendo atribuidos campos = txtNome=+encodeURI(document. getElementById(txtNome).value).toUpperCase()+&txtEmail=+encodeU RI(document.getElementById(txtEmail).value);
376
} </script> </body> </htm>
Veja que as informaes esto sendo preparadas para o envio ao AJAX. A funo encodeURI monta o recurso em uma varivel. Essa varivel utilizaremos dentro do JavaScript contendo o AJAX. Para este exemplo, vamos chamar de script.js.
//Cria e atribui varivel global navegador (em caracteres minsculos) o nome e a verso do navegador var navegador = navigator.userAgent.toLowerCase(); var elemento;
//Cria uma varivel global chamada xmlhttp var xmlhttp; //Funo que inicia o objeto XMLHttpRequest function objetoXML() { //Desvio do Internet Explorer
if (navegador.indexOf(msie) != -1) {
var controle = (navegador.indexOf(msie 5) != -1) ? Microsoft. XMLHTTP : Msxml2.XMLHTTP; //Operador ternrio que adiciona o objeto padro do seu navegador (caso for o IE) varivel controle try { //Inicia o objeto no IE xmlhttp = new ActiveXObject(controle);
} catch (e) { }
} else { //Firefox, Safari, Mozilla //Inicia o objeto no Firefox, Safari, Mozilla
Unidade 6
377
} }
xmlhttp = new XMLHttpRequest();
function handleHttpResponse() { if (xmlhttp.readyState == 4) { if(xmlhttp.status==200) { //Insere no elemento a pgina postada elemento.innerHTML = xmlhttp.responseText;
} else {
} } }
//Insere no elemento o texto atribudo elemento.innerHMTL = Pgina no encontrada!;
//Funo que envia o formulrio
function enviarForm(url, campos, destino) { //Atribui varivel elemento o elemento que ir receber a pgina postada elemento = document.getElementById(destino); //Executa a funo objetoXML() objetoXML(); //Se o objeto de xmlhttp no estiver true if (!xmlhttp) { //Insere no elemento o texto atribudo
elemento.innerHTML = Impossvel iniciar o objeto XMLHttpRequest.;
378
return;
} else { //Insere no elemento o texto atribudo elemento.innerHTML = Carregando...;
//Abre a pgina que receber os campos do formulrio xmlhttp.open(POST, url, true); xmlhttp.onreadystatechange = handleHttpResponse; //altera os cabealhos da pgina de resposta
xmlhttp.setRequestHeader(Content-type, application/x-www-formurlencoded); xmlhttp.setRequestHeader(Content-length, 2);
//Envia o formulrio com dados da varivel campos (passado por parmetro) } xmlhttp.send(campos);
Como voc pode perceber, houve poucas modificaes entre o mtodo GET e o mtodo POST. Porm, essas pequenas alteraes nos auxiliam no desenvolvimento. Para finalizar o exemplo, vamos montar o arquivo processar.php.
<?php //Determina o tipo da codificao da pgina header(content-type: text/html; charset=iso-8859-1); //Extrai os dados do formulrio extract($_POST); //Verifica se algum nome foi digitado $nome = ($txtNome != ) ? $txtNome : desconhecido; //Verifica se algum email foi digitado $email = ($txtEmail != ) ? $txtEmail : desconhecido;
Unidade 6
379
//Retorna com a resposta echo Ol <b>.$nome.</b>, seu email : <a href=mailto:.$email.><b>. $email.</b></a>; ?>
Realizando esse teste voc poder verificar que, mesmo alterando o cabealho da pgina, possivelmente ocorrer um erro de acentuao onde no sero identificadas as acentuaes. Quando acontece isso, troca-se as palavras por caracteres estranhos e indecifrveis. Mesmo nessa situao, podemos recorrer a alguns artifcios que nos auxiliam em ajustar a acentuao. Poderamos estar utilizando duas funes para ajustar esse problema. A primeira a mb_convert_encoding, que converte uma codificao para outra. A segunda seria a funo addslashes: ela interpreta caracteres especiais como aspas simples e duplas, barra invertida, entre outras. Desta forma, trocaramos a linha.
$nome = ($txtNome != ) ? $txtNome : desconhecido;
Por esta linha:

$nome = ($txtNome != ) ? strtoupper(addslashes(mb_convert_ encoding($txtNome,iso-8859-1,utf-8))) : desconhecido;
Ainda foi acrescentada a funo strtoupper para que fosse alterado o texto para caixa-alta. Outro exemplo que muito utilizando a busca dinmica, que consiste em realizar uma busca a um banco de dados enquanto o usurio digita letra a letra. A sua aplicao muito utilizada para selecionar rapidamente as informaes desejadas. Neste exemplo, vamos nos ater em buscar as informaes. Primeiramente vamos construir um banco de dados com as informaes j cadastradas. Vamos utilizar o banco prg3 e criar uma tabela chamada pessoa.
380
CREATE TABLE `pessoa` ( ìd_pessoa` int(10) unsigned NOT NULL auto_increment, `nm_pessoa` varchar(45) default NULL, PRIMARY KEY (ìd_pessoa`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (1,ALEXANDRE VIEIRA DE OLIVEIRA); INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (2,ALEXANDRE TESTANDO); INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (3,WAGNER DOS SANTOS); INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (4,VIRGINIA); INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (5,PEDALA ROBINHO); INSERT INTO `pessoa` (ìd_pessoa`,`nome`) VALUES (6,MASSA DEMAIS);
Aps carregar as informaes, passamos ao desenvolvimento do cdigo. Vamos criar o arquivo inicio.php:
<html> <head> <autor>Alexandre Vieira</autor> <site>http://www.codigofonte.net/dicas/php/170_busca-dinamicautilizando-ajax</site> <title>BUSCA DINÂMICA</title> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1> <script src=script.js></script> <script> function pesquisa(valor) { //FUNO QUE MONTA A URL E CHAMA A FUNO AJAX campos = valor=+encodeURI(valor);
Unidade 6
381
url=busca_nome.php; ajax(url,campos); } </script> </head>
<body> <table width=657 border=0 bgcolor=#f7f7f7> <tr> <td align=center bgcolor=#CCCCCC> <strong> <font color=#FF0000 size=1 face=Verdana, Arial, Helvetica, sansserif> <-BUSCA DINMICAMICA -> </font> </strong> </td> </tr> <tr> <td> <font size=1 face=Verdana, Arial, Helvetica, sansserif><strong>DIGITE AQUI O NOME DA PESSOA</strong></font>:  <input type=text name=nome onKeyPress=pesquisa(this.value)> </td> </tr> <tr> <td>  <div id=pagina>
382
</div> </td> </tr> </table>
</body> </html> Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>.
Veja que no foi necessrio montar a tag form. Essa omisso foi proposital para que voc possa perceber que o AJAX gerencia o tipo de mtodo a ser enviado para o servidor. Agora, basta montar o arquivo script.js:
// JavaScript Document // FUNO RESPONSVEL DE CONECTAR A UMA PGINA EXTERNA, NO NOSSO CASO A BUSCA_NOME.PHP // E RETORNAR OS RESULTADOS function ajax(url,campos) { req = null; // Procura por um objeto nativo (Mozilla/Safari) if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.open(POST,url,true); req.onreadystatechange = processReqChange;
req.setRequestHeader(Content-type, application/x-www-formurlencoded); req.setRequestHeader(Content-length, 2); req.send(campos); // Procura por uma verso ActiveX (IE) } else if (window.ActiveXObject) { req = new ActiveXObject(Microsoft.XMLHTTP);
Unidade 6
383
if (req) { req.open(POST,url,true); req.onreadystatechange = processReqChange;
req.setRequestHeader(Content-type, application/x-www-formurlencoded); req.setRequestHeader(Content-length, 2);
//Envia o formulrio com dados da varivel campos (passado por parmetro) } } } req.send(campos);
function processReqChange() { // apenas quando o estado for completado if (req.readyState == 4) { } } Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>. } // apenas se o servidor retornar OK if (req.status ==200) { // procura pela div id=pagina e insere o conteudo // retornado nela, como texto HTML document.getElementById(pagina).innerHTML = req.responseText; } else { alert(Houve um problema ao obter os dados: + req.statusText);
Permanecemos com o AJAX de forma limpa, sem nenhuma interferncia sobre a codificao. Montamos ento o arquivo busca_nome.php:
384
<?php if(!empty($_POST[valor])) { // O CAMPO VALOR CONTER O QUE O USUARIO DIGITOU AT O MOMENTO.. // CONECTA AO BANCO COLOCA PARAMENTROS IP,USUARIO,SENHA $conexao=mysql_connect(localhost,web,123);
//SELECIONA O BANCO DE DADOS QUE VAI USAR mysql_select_db(prg3);
// EXECUTA A INSTRUO SELECT PASSANDO O QUE O USURIO DIGITOU $sql=select * from pessoa where nm_pessoa like $_POST[valor]%; $resultado=mysql_query($sql) or die (mysql_error());
//VERIFICA A QUANTIDADE DE REGISTROS RETORNADOS $linhas=mysql_num_rows($resultado);
if($linhas>0){ //EXECUTA UM LOOP PARA MOSTRAR OS NOMES DAS PESSOAS // VALE LEMBRAR QUE TODOS ESSES RESULTADOS SERO MOSTRADOS DENTRO DA PGINA INDEX.PHP // DENTRO DO DIV PAGINA echo <ul>\n; while($pegar=mysql_fetch_array($resultado)) echo <li>$pegar[nm_pessoa]</li>\n; } echo </ul>\n; } ?> Fonte: <www.codigofonte.net/dicas/php/170_busca-dinamica-utilizando-ajax>.
Unidade 6
385
Apesar de exigir uma certa complexidade, a utilizao do AJAX possui uma codificao simples, necessitando apenas de um pequeno nmero de decodificao.
Procure testar se est sendo enviado realmente pelo mtodo POST utilizando a funo echo var_dump($_ POST); no arquivo busca_nome.php.
Upload de arquivos
Apesar das vantagens, o AJAX sofre com a sua prpria tecnologia. Voc deve se lembrar que o AJAX no encaminha informaes ao servidor por meio da postagem de formulrio. Em vez disso, ele cria uma camada de comunicao com o servidor. Essa caracterstica possui um custo e, dependendo da aplicao, pode ser muito alto. A funcionalidade de enviar arquivos para o servidor feita por meio da postagem do HTML. Isso significa que o browser decodifica o arquivo para o HTML poder encaminhar a postagem. O HTML processa o arquivo para o servidor. O AJAX no possui uma postagem. Ento como proceder nessa situao? Atualmente no possui uma soluo para o AJAX realizar o upload de arquivos. Em contrapartida, existem diversas solues que simulam essa atividade pelo AJAX, uma delas a utilizao de iFrames. Essa utilizao pode acarretar riscos j que no so todos os browsers que tratam o iFrame de forma concisa. Veja o seguinte exemplo de sua utilizao.
386
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head> 4.  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6. <title>Max's AJAX File Uploader</title> 7. <link href="style/style.css" rel="stylesheet" type="text/css" /> 8. 9. <script language="javascript" type="text/javascript"> 10. <!-11. function startUpload(){ 12. document.getElementById('f1_upload_process').style. visibility = 'visible'; 13. document.getElementById('f1_upload_form').style.visibility = 'hidden'; 14. return true; 15. } 16. function stopUpload(success){ 17. var result = ''; 18. if (success == 1){ 19. result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>'; 20. } 21. else { 22. result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>'; 23. } 24. document.getElementById('f1_upload_process').style. visibility = 'hidden'; 25. document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>'; 26. document.getElementById('f1_upload_form').style.visibility = 'visible'; 27. return true; 28. } 29. //--> 30. </script> 31. </head>
Unidade 6
387
32. <body> 33. <div id="container"> 34. <div id="header"><div id="header_left"></div> 35. <div id="header_main">Max's AJAX File Uploader</ div><div id="header_right"></div></div> 36. <div id="content"> 37. <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" > 38. <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p> 39. <p id="f1_upload_form" align="center"><br/> 40. <label>File: 41. <input name="myfile" type="file" size="30" /> 42. </label> 43. <label> 44. <input type="submit" name="submitBtn" class="sbtn" value="Upload" /> 45. </label> 46. </p> 47. 48. <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe> 49. </form> 50. </div> 51. <div id="footer"><a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a></div> 52. </div> 53. </body> 54. </html> Fonte: <www.ajaxf1.com>.
Veja que o diferencial est na linha 39 que a ponta o alvo do formulrio sendo o iFrame. Esta tag permite a utilizao de um bloco da pgina como sendo uma pgina independente da original. O arquivo que processa o arquivo pode ser escrito desta forma:
388
<?php // Edit upload location here $destination_path = getcwd().DIRECTORY_SEPARATOR; $result = 0;
$target_path = $destination_path . basename( $_FILES[myfile] [name]); if(@move_uploaded_file($_FILES[myfile][tmp_name], $target_path)) { $result = 1; }
sleep(1); ?> <script language=javascript type=text/javascript>window.top. window.stopUpload(<?php echo $result; ?>);</script> Fonte: <www.ajaxf1.com>.
Todo o processo percorre de forma que no utiliza o AJAX, mas para o usurio permanece essa iluso. O script completo se encontra postado na midiateca.
Seo 4 Bibliotecas
O desenvolvimento de softwares traado por diversos tipos de ferramentas que facilitam e enriquecem o trabalho. Os frameworks tanto podem ser softwares que criam programas com uma maior facilidade como scripts contendo diversos recursos. Quando um framework no cria um programa, mas possibilita a utilizao de solues com o intuito de agilizar o desenvolvimento, recebem o nome de bibliotecas.
Unidade 6
389
As bibliotecas possuem a caracterstica de reduzir a repetio de cdigos, assim como agrupar funcionalidades em comuns. Desta forma, possvel compactar diversas funcionalidades e reutiliza em diversos projetos. Assim, procura-se reduzir a quantidade de codificao desenvolvida em cada projeto. Sem falar na confiabilidade de um cdigo testado constantemente em diversas aplicaes.
Dojo
A biblioteca Dojo possui uma distribuio gratuita e foi desenvolvida em JavaScript. O Dojo possui a proposta de reduzir o tratamento de solicitaes assncronas a uma nica chamada de funo, alm de oferecer diversas funcionalidades DOM para diversos navegadores. DOM uma sigla de Modelo de Objetos de Documentos. Esse modelo uma especificao do consrcio W3C que independe da plataforma e linguagem. A especificao define os objetos que podem alterar dinamicamente sua estrutura, o contedo e os estilos dos documentos eletrnicos. O DOM oferece um padro para acessar os elementos do documento trabalhando com eles separadamente. Por se tratar de uma biblioteca, a sua utilizao extremamente simples. No necessria uma instalao. Necessita apenas de uma chamada por meio de uma tag script e em seguida invocar as funes.
O Dojo possui uma documentao prpria em que voc pode estar estudando sobre como utilizar as funcionalidades. A pgina oficial dessa ferramenta <www.dojotoolkit.org>.
390
Sarissa
Sarissa uma biblioteca direcionada para a manipulao do XML em JavaScript. Possui suporte a componentes ActiveX MSXML do Internet Explorer, Mozilla, Opera, Konqueror e Safari. O Sarissa utiliza o padro Adapter para criar um objeto XMLHttpRequest baseado em JavaScript para os navegadores que no possui esse objeto nativo. Desta forma, ele padroniza os chamados realizando as devidas adaptaes. Portanto, o cdigo a seguir dever funcionar para todos os browsers.
var xhr = new XMLHttpRequest(); xhr.opendir(GET,dados.xml); xhr.onreadystatechange = function { if (xhr.readyState == 4) { alert(xhr.responseXML); } }
Prototype
Esta biblioteca tambm escrita em JavaScript, porm possui seu foco nas funcionalidades desta linguagem com o intuito de suportar uma programao orientada a objetos. Apesar de sua leitura ser muito dificultosa, a sua utilizao simples e direta. O Prototype por muitas vezes considerado como uma biblioteca geral para desenvolver bibliotecas. Os desenvolvedores AJAX tm uma probabilidade maior de utilizarem alguma biblioteca com base na Prototype. Essa caracterstica descende de ela ser construda com base na programao orientao objeto. Assim, todos os recursos dessa metodologia so herdados pela biblioteca. Essa caracterstica permite uma customizao mais natural e dinmica.
Unidade 6
391
O Prototype uma biblioteca poderosa e voc pode aprender mais sobre ela consultado a pgina oficial <www.prototypejs.org>.
Existem diversas bibliotecas que podem auxiliar no desenvolvimento. Procure sempre escolher as que possuem uma boa documentao. O grupo que mantm biblioteca deve conter um controle de verso, assim voc saber que os bugs esto sendo corrigidos. De forma geral, procure sempre testar a biblioteca escolhida. Caso tenha necessidade de alterar alguma funcionalidade da biblioteca, certifique-se se essa alterao no se trata de uma casualidade do projeto, assim deve permanecer no projeto. Bibliotecas so genricas.
Bibliotecas, em geral, tm a obrigao de reduzir o nosso esforo em construir cdigos repetitivos e maantes. As casualidades devem ser tratadas dentro do prprio projeto de desenvolvimento.
Sntese
Nesta unidade voc viu uma tecnologia muito til no desempenho de aplicaes Web. O AJAX um conjunto de aplicaes destinado em promover uma agilidade s pginas Web semelhante a uma aplicao desktop. Vimos como o AJAX complexo e, em contrapartida, possui um cdigo enxuto com pouca codificao, alm de sua limitao no upload de arquivos e o quanto os frameworks facilitam o nosso trabalho como desenvolvedores.
392
Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico, mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem. 1) Desenvolva uma aplicao utilizando o AJAX e um banco de dados. Poder construir um cadastro de pessoas, onde, ao digitar parcialmente o nome o usurio, tenha a opo de selecionar o nome e carregar as informaes para a tela.
Saiba mais
Se voc desejar, aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em: <www.w3schools.com>. Acesso em: 01 mar. 2010. W3C. World Wide Web Consortium, 2010. Disponvel em: <www.w3.org>. Acesso em: 2 mar. 2010. AJAX F1, 2010. Disponvel em: <www.ajaxf1.com>. Acesso em: 20 maio 2010. iMasters, 2010. Disponvel em: <http://imasters.uol.com.br>. Acesso em: 16 maio 2010. CodigoFonte.net, 2010. Disponvel em: <www.codigofonte. net>. Acesso em: 15 jul. 2010.
Unidade 6
393
Para concluir o estudo

Ao se dedicar ao estudo das unidades apresentadas neste livro didtico, voc teve a oportunidade de interagir e consolidar alguns conceitos sobre o desenvolvimento de aplicaes para Web assim como harmonizar as diferentes linguagens que compe um projeto deste tipo. Conhecer a linguagem e saber utiliz-la no significa um sucesso no projeto. Detalhe o melhor possveis todos os itens da sua aplicao. Destaque sempre as regras de negcio o qual voc est buscando uma soluo ou melhoria. Um planejamento bem estruturado e detalhado representa 60% do projeto. Mantenha sempre em foco onde cada linguagem melhor empregada. No desperdice recursos tentando construir uma alternativa onde j existam diversas solues. Perder alguns minutos com uma pesquisa pela rede, normalmente economizam muitas horas em desenvolvimentos desnecessrios. Linguagens como Javascript e PHP possuem uma vasta bibliografia e comunidades onde so disponibilizados diversos scripts que possivelmente iro auxili-lo em seu problema. Porm, voc perceber que o entendimento destes scripts indispensvel ao se adotar como soluo. Boa sorte e sucesso!!!
Referncias
BEZERRA, Eduardo. Princpios de anlise e projeto de sistemas com UML. 2. ed. Rio de Janeiro: Campus, 2007. BOOCH, Grady; RUMBAUGH, James; JACOBSON, Ivar. UML, guia do usurio. Rio de Janeiro : Elsevier, 2000. GUEDES, Gilleanes T. A. UML: Uma Abordagem Prtica. So Paulo: Novatec, 2004. FOWLER, Martin. UML essencial : um breve guia para a linguagem-padro de modelagem de objetos. 3.ed.. Porto Alegre, RS : Bookman, 2005. DICIONRIO ELETRNICO MICHAELIS. Moderno dicionrio da lngua portuguesa. So Paulo: Melhoramentos, 2009. Disponvel em: <http://michaelis.uol.com.br/moderno/portugues/index. php?lingua=portugues-portugues&palavra=intera%E7%E3o>. Acesso em: 05/10/2010. OMG. Introduction to Unified Modeling Language. Disponvel em: <http://www.omg.org/gettingstarted/what_is_uml.htm>. Acessado em 08-mar-2010. OMG-About. About the Object Management Group. Disponvel em: < http://www.omg.org/gettingstarted/gettingstartedindex. htm>. Acessado em 10-out-2010. SPARXSYSTEMS. UML 2 Tutorial. Disponvel em: < http://www. sparxsystems.com/resources/uml2_tutorial/>. Acessado em 10-out-2010. WAZLAWICK, Raul Sidnei. Anlise e projeto de sistemas de informao orientados a objetos. 1. ed. Rio de Janeiro: Elsevier, 2004. Manual PHP, 2010. Disponvel em: http://br2.php.net/manual/ pt_BR/index.php//> Acessado em 05 abril 2010. PHP Brasil, 2010. Disponvel em: <http://www.phpbrasil.com/>. Acessado em 05 abril 2010. T r u q u e s e D i c a s - Tutoriais de Javascript, 2010. Disponvel em: < http://www.truquesedicas.com/tutoriais/php/ index.htm>. Acessado em 02 mar 2010.
Manual do MySQL, 2010. Disponvel em: <http://dev.mysql.com/doc/ refman/5.1/en/index.html//> Acessado em 05 abril 2010. Cdigo Fonte, 2010. Disponvel em <http:// http://codigofonte.uol.com.br/ artigos/javascript-dhtml//> Acessado em 01 mar 2010. jsfromhell.com JavaScript Repository, 2010. Disponvel em <http:// jsfromhell.com/>. Acessado em 15/03/2010. W3Schools. W3Schools Online Web Tutorials, 2010. Disponvel em <http://www.w3schools.com/> Acessado em 01 mar 2010. W3C. World Wide Web Consortium, 2010. Disponvel em <http://www. w3.org/>. Acessado em 02 mar 2010. Dicas-l, 2010. Disponvel em < http://www.dicas-l.com.br//>. Acessado em 16 mai 2010. iMasters, 2010. Disponvel em < http://imasters.uol.com.br//>. Acessado em 16 mai 2010. Plugmasters, 2010. Disponvel em < http://www.plugmasters.com.b/>. Acessado em 15 mai 2010. AJAX F1, 2010. Disponvel em < http://www.ajaxf1.com//>. Acessado em 20 mai 2010. CodigoFonte.net, 2010. Disponvel em < http://www.codigofonte.net//>. Acessado em 15 julho 2010.
398
Sobre o professor conteudista

Edson Orivaldo Lessa Junior especialista em Engenharia de projetos de software pela Universidade do Sul de Santa Cataria UNISUL. Professor da Unisul desde de 2008 em disciplinas oferecidas pelos cursos de Cincias da Computao, Gesto da Tecnologia da Informao e Web Design e Programao. Participou de projetos de desenvolvimentos em Gesto Financeira, Framework, Sistemas distribudos.
Respostas e comentrios das atividades de autoavaliao

Unidade 1
1. Uma das principais vantagens da aplicao Webtop a sua portabilidade. Praticamente, o usurio possui acesso ao seu desktop em qualquer lugar que tenha acesso internet. Outra vantagem a centralizao para manuteno, qualquer novo recurso implementado para a aplicao Webtop se propagar para todos os usurios. Sem falar de uma vantagem primordial, como toda a aplicao est em um servidor, o backup das informaes muito mais fcil. Uma desvantagem que tudo depende da rede. Caso uma conexo de dados no possua uma velocidade adequada, reflete diretamente no desempenho da Webtop. Outra desvantagem a compatibilidade com as aplicaes. Muitas aplicaes no so compatveis com este modelo o que torna muitas vezes invivel a sua utilizao. 2. 1 Linguagem Server-side 2 Linguagem Client-side (1) (2) (2) (2) ( 1) (1) (2) (2) (2) (2) (2) (2) (2) (2) (1) (2) (1) (1) (1) (1) (1) (2) PostgreSQL HTML Oracle SQLite Javascript Microsoft Silverlight PHP MySQL ASP DB2 .NET CGI Perl Java CSS Python Microsoft SQL Server Ruby Firebird ColdFusion Websphere Flash
3. No h limite, logicamente eles no podem ser redundantes na mesma tag. Mas possvel utilizar quantas forem necessrias e criar atributos novos para uma personalizao de aplicao.
Unidade 2
1. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exercicio Um</title> </head> <script language=javascript type=text/javascript> function validanumero(numero) { // funo para validar se um nmero valido if (numero.length == 0) { return false; } else { // verifica se todos os caracteres so nmeros for (i = 0; i < numero.length; i++) if (!((numero.charAt(i) >= 0) && (numero.charAt(i) <= return false;
9)))
} function validar(form) { } return true;
//Variveis de mensagem de erro padro e controle de erro var erro=ATENO\n\n; var msgerro=false;
402
if (form.txt_nome.value==) { erro+=O Campo Nome obrigatrio\n; msgerro=true;
if (form.txt_nomemae.value==){ erro+=O Campo Nome da Me obrigatrio\n; msgerro=true;
var idade=form.txt_idade.value; if (validanumero(idade)){ // testa para verificar se a idade est contida no intervalo correto if ((parseInt(idade)<10) || (parseInt(idade)>120)) { erro+=O Campo Idade deve conter uma idade entre 10 e msgerro=true;
120 anos\n; }
} else {
erro+=O Campo Idade deve conter somente nmeros inteiros\n; } var email=form.txt_email.value; if (email==) { erro+=O Campo E-mail obrigatrio\n; msgerro=true; msgerro=true;
} else {
// verifica se existe um caractere @ e no se encontra na primeira posio // verifica se existe um caractere entre o @ e o . // verifica se o . no o ltimo caractere
if ((email.indexOf(@)<0) || (email.indexOf(.)<=(email. indexOf(@)+1)) || ((email.indexOf(.)+1)>=email.length)) {
403
} if (msgerro) { }
erro+=O Campo E-mail deve conter um e-mail vlido\n; msgerro=true;
} }
alert(erro); return false;
return true;
</script> <body> <h1>Cadastro</h1> <p> <form name=cadpessoa id=cadpessoa method=post action= onsubmit=return validar(this);> <table width=338> <tr> <td width=163><label for=txt_nome>Nome:</label></td> <td width=163><input type=text name=txt_nome id=txt_ nome value= /></td> </tr> <tr> <td>Endereo</td> <td><input type=text name=txt_endereco id=txt_endereco value= /></td> </tr> <tr> <td><label for=txt_nomemae>Nome da Me</label></td> <td><input type=text name=txt_nomemae id=txt_nomemae value= /></td> </tr>
404
<tr> <td><label for=txt_idade>Idade</label></td> <td><input type=text name=txt_idade id=txt_idade value= /></td> </tr> <tr> <td><label for=txt_email>E-mail</label></td> <td><input type=text name=txt_email id=txt_email value= /></td> </tr> <tr> <td align=center><input type=submit name=btn_validar value=Validar /></td> <td align=center><input type=reset name=btn_limpar value=Limpar /></td> </tr> </table> </form> </p> </body> </html>
2.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exerccio dois</title> </head> <script language=javascript type=text/javascript>
405
function inserir(texto) { //converte as quebras de linhas para a tag <br> do HTML while (texto.indexOf(\n)>=0) texto=texto.replace(\n,<br />);
//escreve do elemento que contm o Id div_result document.getElementById(div_result).innerHTML=texto;
</script> <body> <form name=forminsert id=forminsert> <label for=txa_insert>Insira o texto abaixo:</label><br /> <textarea name=txa_insert id=txa_insert cols=50 rows=10 onkeyup=inserir(this.value);></textarea> <br /> O Resultado:<br /> <div id=div_result style=color:#009> </div> </form> </body> </html>
Unidade 3
1. <<<arquivo exercicio1.php >>> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Exerccio 1 envio Form</title>
406
</head>
<body> <form name=formulario target=_self action=recebeform.php method=post> <table align=left cellpadding=0 cellspacing=0 border=1> <tr> <td>Nome</td> <td><input type=text name=txt_nome id=txt_nome value= /></td> </tr> <tr> <td>Endereo</td> <td><input type=text name=txt_endereco id=txt_endereco value= /></td> </tr> <tr> <td>Nome da me</td> <td><input type=text name=txt_nomemae id=txt_nomemae value= /></td> </tr> <tr> <td>Idade</td> <td><input type=text name=txt_idade id=txt_idade value= /></td> </tr> <tr> <td>E-mail</td> <td><input type=text name=txt_email id=txt_email value= /></td> </tr> <tr>
407
<td><input type=submit name=btn_enviar id=btn_enviar value=Enviar /></td> <td><input type=reset name=btn_limpar id=btn_limpar value=Limpar /></td> </tr> </table> </form> </body> </html>
<<< arquivo recebeform.php >>> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Recebe Formulrio</title> </head> <body> <?php function erro($tipo, $msg=Sem informao){ switch ($tipo) { case 1: echo <h1>Formulrio no enviado!</h1>; break;
case 2: echo <h1>Erro nos valores do formulrio!</h1>; echo $msg; break;
408
echo <a href=\exercicio1.php\>Retornar ao formulrio;
} // Verifica se o formulrio foi enviado if (@$_POST[btn_enviar]==) erro(1); else { // varivel de controle $controle=false; if ($_POST[txt_nome]==) { $validacampos=O campo nome deve ser preenchido<br />\n; $controle=true;
if ($_POST[txt_endereco]==) { $validacampos.=O campo endereo deve ser preenchido<br $controle=true;
/>\n; }
if ($_POST[txt_nomemae]==) { $validacampos.=O campo nome da me deve ser preenchido<br $controle=true;
/>\n; }
if ($_POST[txt_idade]==) { $validacampos.=O campo idade deve ser preenchido<br />\n; $controle=true;
} else { if (intval($_POST[txt_idade])<3) {
$validacampos.=A idade deve ser maior que dois anos<br />\n; } $controle=true;
409
} if ($_POST[txt_email]==) { $validacampos.=O campo e-mail deve ser preenchido<br />\n; $controle=true;
} else { /* strpos verifica a posio que um caractere aparece em uma string strripos verifica a ltima posio que um caractere aparece */
if (((strpos($_POST[txt_email],@)===false) && (strpos($_POST[txt_email],.)===false)) || (strripos($_POST[txt_ email],.)<strpos($_POST[txt_email],@))) { $validacampos.=O campo e-mail deve conter um e-mail vlido<br />; } if ($controle==true) erro(2,$validacampos); } $controle=true;
else { ?>
<table align=left cellpadding=2 cellspacing=0 border=1> <tr> <td>Nome</td> <td><?=$_POST[txt_nome]?></td> </tr> <tr> <td>Endereo</td> <td><?=$_POST[txt_endereco]?></td> </tr> <tr>
410
<td>Nome da me</td> <td><?=$_POST[txt_nomemae]?></td> </tr> <tr> <td>Idade</td> <td><?=$_POST[txt_idade]?></td> </tr> <tr> <td>E-mail</td> <td><?=$_POST[txt_email]?></td> </tr> </table>
<?php } ?> </body> </html> }
2. <<< arquivo recebeform.php >>> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>Recebe Formulrio</title> </head>
411
<body> <?php function erro($tipo, $msg=Sem informao){ switch ($tipo) { case 1: echo <h1>Formulrio no enviado!</h1>; break;
case 2: echo <h1>Erro nos valores do formulrio!</h1>; echo $msg; break;
echo <a href=\exercicio1.php\>Retornar ao formulrio;
} // Verifica se o formulrio foi enviado if (@$_POST[btn_enviar]==) erro(1); else { // varivel de controle $controle=false; if ($_POST[txt_nome]==) { $validacampos=O campo nome deve ser preenchido<br />\n; $controle=true;
if ($_POST[txt_endereco]==) { $validacampos.=O campo endereo deve ser preenchido<br $controle=true;
/>\n; }
if ($_POST[txt_nomemae]==) {
412
/>\n; }
$validacampos.=O campo nome da me deve ser preenchido<br $controle=true;
if ($_POST[txt_idade]==) { $validacampos.=O campo idade deve ser preenchido<br />\n; $controle=true;
} else { if (intval($_POST[txt_idade])<3) {
$validacampos.=A idade deve ser maior que dois anos<br />\n; } if ($_POST[txt_email]==) { $validacampos.=O campo e-mail deve ser preenchido<br />\n; $controle=true; } $controle=true;
} else { /* strpos verifica a posio que um caractere aparece em uma string strripos verifica a ltima posio que um caractere aparece */
if (((strpos($_POST[txt_email],@)===false) && (strpos($_POST[txt_email],.)===false)) || (strripos($_POST[txt_ email],.)<strpos($_POST[txt_email],@))) { $validacampos.=O campo e-mail deve conter um e-mail vlido<br />; } if ($controle==true) erro(2,$validacampos); } $controle=true;
413
else { ?>
<table align=center cellpadding=2 cellspacing=0 border=1> <tr> <td>Nome</td> <td><?=$_POST[txt_nome]?></td> </tr> <tr> <td>Endereo</td> <td><?=$_POST[txt_endereco]?></td> </tr> <tr> <td>Nome da me</td> <td><?=$_POST[txt_nomemae]?></td> </tr> <tr> <td>Idade</td> <td><?=$_POST[txt_idade]?></td> </tr> <tr> <td>E-mail</td> <td><?=$_POST[txt_email]?></td> </tr> </table>
<?php $arq=arquivo.txt; $fp=fopen($arq,w+); if ($fp) { fwrite($fp,Nome:.$_POST[txt_nome].\n);
414
fwrite($fp,Endereo:.$_POST[txt_endereco].\n); fwrite($fp,Nome da me:.$_POST[txt_nomemae].\n); fwrite($fp,Idade:.$_POST[txt_idade].\n); fwrite($fp,E-mail:.$_POST[txt_email].\n);
fclose($fp);
echo <p><a href=\learquivo.php?arq=.$arq.\>Ler arquivo Texto Gerado</a></p>; } ?> </body> </html> <<< arquivo learquivo.php >>> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>L arquivo</title> </head> <body> <?php if (@$_GET[arq]!=) { // verifica se o arquivo existe if (file_exists($_GET[arq])) { $fp=fopen($_GET[arq],r); if ($fp) { } } else echo <h4>Erro ao gerar o arquivo</h4>;
415
border=1>; linha a linha
echo <h1>Resultado da leitura</h1>; echo <table align=left cellpadding=2 cellspacing=0 //feof testa o fim do arquivo, utiliza um ponteiro lendo while (!feof($fp)) { $conteudo=fgets($fp); //converte uma string em array ao encontrar o $dados=explode(:, $conteudo); if ($dados[0]==) continue; echo <tr><td>.$dados[0].</td>; echo <td>.$dados[1].</td></tr>;
caractere : } } ?> </body> </html> }
} else echo <h4>Erro ao gerar o arquivo</h4>;
Unidade 4
1. <<< estrutura de arquivos >>>
<<< criar tabela no banco de dados >>>
416
DROP TABLE IF EXISTS `livro`; CREATE TABLE IF NOT EXISTS `livro` ( `codigo` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(100) NOT NULL, àutor` varchar(100) DEFAULT NULL, èditora` varchar(100) DEFAULT NULL, `paginas` int(11) DEFAULT NULL, PRIMARY KEY (`codigo`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; <<< arquivo config.php >>> <?php // conexo com o banco de dados mysql_connect(localhost, web, senha123); mysql_select_db(prg3); ?> <<< arquivo estilo.css >>> /* CSS criado para melhorar o visual da aplicao*/ /* Tudo */ * { margin:0; padding:0; }
/* Tags */ html { background:#F4F4F4; text-align:center; } body { font-size:10pt; font-family:Trebuchet MS; width:400px; background:#FFFFFF; margin:0 auto; text-align:left; padding:10px; } a { text-decoration:none; color:#336699; } a:hover { text-decoration:underline; }
/* Mensagens */ .mensagem { margin-bottom:10px; padding:10px; }
417
.erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; } .sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}
/* Formulario */ form { text-align:left; display:table; width:100%; clear:both; } label, input { display:block; padding:5px;} input#nome, input#autor, input#editora { width:390px; } input#consultar, input#cadastrar { float:right; }
/* Menu */ #menu { border-bottom:1px dashed #CCC; padding-bottom:5px; } #menu li { display:inline; width:100px; padding:10px; }
/* Tabelas */ table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC; border-bottom:3px solid #B4D1DC; } table tr { background:#FFF; } table th { background:#B4D1DC; border-bottom:3px solid #777; } table td, table th { padding:5px; text-align:center; border:1px solid #ccc; }
<<< arquivo cadastro.php >>> <?php //inclui o conexo com o banco de dados include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www. w3.org/1999/xhtml> <head>
418
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Cadastro de Livros</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php // inclui o menu de navegao include(menu.php); ?> <h1>Cadastro de Livros</h1> <?php // verifica se o formulrio foi enviado if(!empty($_POST)): // valida os campos
if( (!empty($_POST[nome])) && (!empty($_POST[autor])) && (!empty($_POST[editora])) && (!empty($_POST[paginas])) ): $nome = $_POST[nome]; $autor = $_POST[autor]; $editora = $_POST[editora]; $paginas = $_POST[paginas];
$livros = mysql_query(SELECT * FROM livro WHERE lower(nome) = .strtolower($nome).); if(mysql_num_rows($livros) >= 1): ?> <div class=mensagem erro> Já existe uma livro com
este nome cadastrado. </div> <?php
elseif(mysql_query(INSERT INTO livro VALUES (NULL, .$nome., .$autor., .$editora., .$paginas.))):
419
?> <div class=mensagem sucesso> Livro cadastrado com sucesso.
else: ?> </div> <?php
<div class=mensagem erro> Erro ao cadastrar livro.
else: ?> endif; </div> <?php
<div class=mensagem erro>
É necessário preencher todos os campos para cadastrar o livro. endif; ?> <form name=cadastro id=cadastro method=post> <label for=nome>Nome:</label> endif; </div> <?php
<input type=text name=nome id=nome tabindex=1 /> <label for=autor>Autor:</label>
<input type=text name=autor id=autor tabindex=2 /> <label for=editora>Editora:</label>
<input type=text name=editora id=editora tabindex=3 />
420
<label for=paginas>Páginas:</label>
<input type=text name=paginas id=paginas tabindex=4 /> <input type=submit name=cadastrar id=cadastrar value=Cadastrar tabindex=5 /> </form>
</body>
</html> <<< arquivo consulta.php >>> <?php //inclui a conexo include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Consulta de Livros</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php //inclui o meni de navegao include(menu.php); ?> <h1>Consulta de Livros</h1> <?php if(!empty($_POST)):
421
$nome = strtolower($_POST[nome]);
$queryConsulta = mysql_query(SELECT * FROM livro WHERE lower(nome) LIKE %.$nome.%); $registros = mysql_num_rows($queryConsulta); if( ($registros >= 1) && $nome != ): ?> <div class=mensagem sucesso>
<strong><?php echo $registros; ?></ strong> livro(s) encontrado(s). </div> <table> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Autor</th> <th>Editora</th> <th>Páginas</th>
</tr>
</thead> <tbody> <?php while($livro = mysql_fetch_ ?> <tr>
assoc($queryConsulta)):
<td><a href=./ livro.php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[codigo]; ?></a></td> <td><a href=./ livro.php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[nome]; ?></a></td>
422
$livro[autor]; ?></td> $livro[editora]; ?></td> $livro[paginas]; ?></td> else: ?> <div class=mensagem erro> </tr> <?php
<td><?php echo <td><?php echo <td><?php echo
endwhile; ?>
</tbody>
</table> <?php
endif; ?> endif; </div> <?php
Nenhum livro encontrado.
<form name=consulta id=consulta method=post> <label for=nome>Nome:</label>
<input tabindex=1 type=text id=nome name=nome /> <input tabindex=2 id=consultar name=consultar type=submit value=Consultar /> </form>
</body>
</html>
423
<<< arquivo index.php >>>
<html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www. w3.org/1999/xhtml> <head> <title>Livros</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php // incluui o menu de navegao include(menu.php); ?>
</body>
</html> <<< arquivo lista.php >>> <?php include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Lista de Livros</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body>
424
<?php include(menu.php); ?> <h1>Lista de Livros</h1> <table> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Autor</th> <th>Editora</th> <th>Páginas</th>
</tr>
</thead> <tbody> <?php $livros = mysql_query(SELECT * FROM livro); while($livro = mysql_fetch_assoc($livros)): ?> <tr>
<td><a href=./livro. php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[codigo]; ?></ a></td> <td><a href=./livro. php?id=<?php echo $livro[codigo]; ?>><?php echo $livro[nome]; ?></ a></td> ?></td> ?></td> ?></td> </tr> <td><?php echo $livro[autor]; <td><?php echo $livro[editora]; <td><?php echo $livro[paginas];
425
<?php
endwhile; ?>
</tbody>
</table>
</body>
</html> <<< arquivo livro.php >>> <?php include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Detalhes do Livro</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php); $id = $_GET[id];
$queryLivro = mysql_query(SELECT * FROM livro WHERE codigo = .$id); if(mysql_num_rows($queryLivro) == 1): $livro = mysql_fetch_assoc($queryLivro); ?> <h1>Detalhes do Livro</h1>
426
<table> <tbody> <tr> <th>Código</th> <td><?php echo $livro[codigo];
?></td> </tr> <tr>
?></td> </tr> <tr>
<th>Nome</th> <td><?php echo $livro[nome];
?></td> </tr> <tr>
<th>Autor</th> <td><?php echo $livro[autor];
?></td> </tr> <tr>
<th>Editora</th> <td><?php echo $livro[editora];
?></td> else: ?> </tr>
<th>Páginas</th> <td><?php echo $livro[paginas];
</tbody>
</table> <?php
427
<div class=mensagem erro> Livro não encontrado.
endif; ?> </div> <?php
</body>
</html> <<< arquivo menu.php >>> <ul id=menu> <li><a tabindex=51 href=cadastro.php title=Cadastro>Cadastro</ a></li> <li><a tabindex=52 href=consulta.php title=Consulta>Consulta</ a></li> <li><a tabindex=53 href=lista.php title=Lista>Lista</a></li>
</ul> 2. <<<estrutura de arquivos>>>
<<< criar tabela no banco de dados >>> CREATE TABLE IF NOT EXISTS ùsuario` ( `codigo` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(100) DEFAULT NULL, `login` varchar(20) DEFAULT NULL, `senha` char(32) DEFAULT NULL,
428
PRIMARY KEY (`codigo`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; <<< arquivo config.php >>> <?php //realiza a conexo com o banco de dados mysql_connect(localhost, web, senha123); mysql_select_db(prg3); ?>
<<< arquivo estilo.css >>> /* CSS criado para melhorar o visual da aplicao*/ /* Tudo */ * { margin:0; padding:0; }
/* Mensagens */ .mensagem { margin-bottom:10px; padding:10px; } .erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; } .sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}
/* Formulario */ form { text-align:left; display:table; width:100%; clear:both; } label, input { display:block; padding:5px;}
429
input#nome, input#login, input#senha { width:390px; } input#consultar, input#cadastrar { float:right; }
/* Menu */ #menu { border-bottom:1px dashed #CCC; padding-bottom:5px; } #menu li { display:inline; width:100px; padding:10px; } /* Tabelas */ table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC; border-bottom:3px solid #B4D1DC; } table tr { background:#FFF; } table th { background:#B4D1DC; border-bottom:3px solid #777; } table td, table th { padding:5px; text-align:center; border:1px solid #ccc; } <<< arquivo cadastro.php >>> <?php //verifica se o usurio est logado include(./verificacao.php); //inclui a conexo com o banco de dados include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Cadastro de Usuários</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body>
430
<?php include(menu.php); ?> <h1>Cadastro de Usuários</h1> <?php if(!empty($_POST)):
if( (!empty($_POST[nome])) && (!empty($_POST[login])) && (!empty($_POST[senha])) ): $nome = $_POST[nome]; $login = $_POST[login]; $senha = $_POST[senha];
$usuarios = mysql_query(SELECT * FROM usuario WHERE (lower(nome) = .strtolower($nome).) OR (lower(login) = .strtolower($login).)); if(mysql_num_rows($usuarios) >= 1): ?> <div class=mensagem erro>
Já existe uma usuário com este nome ou login cadastrado. </div> <?php
elseif(mysql_query(INSERT INTO usuario VALUES (NULL, .$nome., .$login., MD5(.$senha.)))): ?> <div class=mensagem sucesso> Usuário cadastrado com
sucesso. else: ?> </div> <?php
431
Erro ao cadastrar usuário.
É necessário preencher todos os campos para cadastrar o usuário. endif; ?> <form name=cadastro id=cadastro method=post> <label for=nome>Nome:</label> endif; </div> <?php
<input type=text name=nome id=nome tabindex=1 /> <label for=login>Login:</label>
<input type=text name=login id=login tabindex=2 /> <label for=senha>Senha:</label>
<input type=password name=senha id=senha tabindex=3 /> <input type=submit name=cadastrar id=cadastrar value=Cadastrar tabindex=4 /> </form>
</body>
</html>
432
<<< arquivo consulta.php >>> <?php //verifica se o usurio est logado include(./verificacao.php); //inclui a conexo com o banco de dados include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Consulta de Usuários</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php); ?> <h1>Consulta de Usuários</h1> <?php if(!empty($_POST)): $nome = strtolower($_POST[nome]);
$queryConsulta = mysql_query(SELECT * FROM usuario WHERE lower(nome) LIKE %.$nome.%); $registros = mysql_num_rows($queryConsulta); if( ($registros >= 1) && $nome != ): ?> <div class=mensagem sucesso>
433
<strong><?php echo $registros; ?></ strong> usuário(s) encontrado(s). </div> <table> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Login</th>
</tr>
</thead> <tbody> <?php while($usuario = mysql_fetch_ ?> <tr>
assoc($queryConsulta)):
<td><a href=./ usuario.php?id=<?php echo $usuario[codigo]; ?>><?php echo $usuario[codigo]; ?></a></td> <td><a href=./ usuario.php?id=<?php echo $usuario[codigo]; ?>><?php echo $usuario[nome]; ?></a></td> $usuario[login]; ?></td> else: </tr> <?php <td><?php echo
endwhile; ?>
</tbody>
</table> <?php
434
?> <div class=mensagem erro> Nenhum usuário encontrado.
endif; ?> endif; </div> <?php
<form name=consulta id=consulta method=post> <label for=nome>Nome:</label>
<input tabindex=1 type=text id=nome name=nome /> <input tabindex=2 id=consultar name=consultar type=submit value=Consultar /> </form>
</body>
</html> <<< arquivo index.php >>> <?php // Verifica se esta logado include(verificacao.php); ?> <html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www. w3.org/1999/xhtml> <head> <title>Usuários</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body>
435
<?php // Se estiver logado inclui o menu include(menu.php); ?>
</body>
</html> <<< arquivo lista.php >>> <?php include(./verificacao.php); include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Lista de Usuários</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php); ?> <h1>Lista de Usuários</h1> <table> <thead> <tr>
436
</tr>
<th>Código</th> <th>Nome</th> <th>Login</th>
</thead> <tbody> <?php $usuarios = mysql_query(SELECT * FROM while($usuario = mysql_fetch_assoc($usuarios)): ?> <tr>
usuario);
<td><a href=./usuario. php?id=<?php echo $usuario[codigo]; ?>><?php echo $usuario[codigo]; ?></a></td> <td><a href=./usuario. php?id=<?php echo $usuario[codigo]; ?>><?php echo $usuario[nome]; ?></a></td> ?></td> </tr> <?php <td><?php echo $usuario[login];
endwhile; ?>
</tbody>
</table>
</body>
</html>
437
<<< arquivo login.php >>> <?php //inicia a sesso session_start(); include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Área Restrita</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <h1>Área Restrita</h1> <?php if(!empty($_POST)): if( (!empty($_POST[login])) && (!empty($_POST[senha])) $login = $_POST[login]; $senha = $_POST[senha];
):
$queryUsuario = mysql_query(SELECT * FROM usuario WHERE login = .$login. AND senha = MD5(.$senha.)); if(mysql_num_rows($queryUsuario) == 1):
$usuario = mysql_fetch_ assoc($queryUsuario); $usuario[nome]; // registra uma sesso $_SESSION[administracao][usuario] =
438
?> <div class=mensagem sucesso> Autenticado com sucesso. <br /> <a href=./index.php>Clique
aqui</a> para continuar. else: ?> </div> <?php
<div class=mensagem erro> Login/Senha incorretos.
<div class=mensagem erro> É necessário preencher
todos os campos. endif; ?> endif; </div> <?php
<form name=cadastro id=cadastro method=post> <label for=login>Login:</label> <input type=text name=login id=login tabindex=1 <label for=senha>Senha:</label>
/>
<input type=password name=senha id=senha tabindex=2 />
439
<input type=submit name=entrar id=entrar value=Entrar tabindex=3 /> </form>
</body>
</html> <<< arquivo logout.php >>> <?php //inicia a sesso session_start(); //destroi a varivel unset($_SESSION[administracao]); //redireciona para o login header(Location: ./login.php); ?>
<<< arquivo menu.php >>> <div class=mensagem sucesso> Bem vindo <strong><?php echo $_SESSION[administracao][usuario]; ?></strong>! [<a href=./logout.php>Sair</a>] </div> <ul id=menu> <li><a tabindex=51 href=cadastro.php title=Cadastro>Cadastro</ a></li> <li><a tabindex=52 href=consulta.php title=Consulta>Consulta</ a></li> <li><a tabindex=53 href=lista.php title=Lista>Lista</a></li>
</ul>
440
<<< arquivo usurio.php >>> <?php include(./verificacao.php); include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Detalhes do Usuário</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php); $id = $_GET[id];
$queryUsuario = mysql_query(SELECT * FROM usuario WHERE codigo = .$id); if(mysql_num_rows($queryUsuario) == 1): $usuario = mysql_fetch_assoc($queryUsuario); ?> <h1>Detalhes do Usuário</h1> <table> <tbody> <tr> <th>Código</th> <td><?php echo
$usuario[codigo]; ?></td>
441
</tr> <tr> <th>Nome</th> <td><?php echo
$usuario[nome]; ?></td> </tr> <tr>
?></td> else: ?> </tr>
<th>Login</th> <td><?php echo $usuario[login];
</tbody>
</table> <?php
<div class=mensagem erro> Usuário não encontrado.
endif; ?> </div> <?php
</body>
</html> <<< arquivo verificacao.php >>>
442
<?php //inicia a sesso session_start(); //verifica se uma varivel foi registrada if(!isset($_SESSION[administracao])): // caso no esteja redireciona para a pgina de login header(Location: ./login.php); // caso ocorra erro interrompe a construo da pgina die();
endif; ?>
Unidade 5
1. Questo aberta.
Unidade 6
1. Script para criar para criar o banco de dados
CREATE TABLE IF NOT EXISTS pessoa ( codigo int(11) NOT NULL AUTO_INCREMENT, nome varchar(100) DEFAULT NULL, cadastro datetime DEFAULT NULL, PRIMARY KEY (codigo) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 ;
443
A soluo foi desenvolvida e organizada em trs diretrios com um arquivo cada. J o diretrio padro possui sete arquivos dispostos como na imagem?
A folha de estilo CSS (opcional apenas melhoramento visual), organizada dentro do diretrio css com o nome de estilo.css.
/* Tudo */ * { margin:0; padding:0; }
/* Mensagens */ .mensagem { margin-bottom:10px; padding:10px; } .erro { background:#FFFFE0; border:1px solid #E6DB55; color:#333333; } .sucesso { border:1px solid #568F0F; color:#333; background:#DFF1C0;}
/* Formulario */ form { text-align:left; display:table; width:100%; clear:both; } label, input { display:block; padding:5px;} input#nome { width:390px; } input#consultar, input#cadastrar { float:right; }
/* Menu */
444
#menu { border-bottom:1px dashed #CCC; padding-bottom:5px; } #menu li { display:inline; width:100px; padding:10px; }
/* Tabelas */ table { border-collapse:collapse; width:100%; border:1px solid #B4D1DC; border-bottom:3px solid #B4D1DC; } table tr { background:#FFF; } table th { background:#B4D1DC; border-bottom:3px solid #777; } table td, table th { padding:5px; text-align:center; border:1px solid #ccc; }
/* Sugestoes */ #sugestoes { max-height:300px; overflow:scroll; text-align:left; margintop:-35px; z-index:1000; width:250px; background:#E7F3FF; border:1px solid #DDD; display:none; } #sugestoes ul li { list-style-type:none; line-height:25px; height:25px; } #sugestoes ul li a { padding-left:10px; line-height:25px; height:25px; width:250px; } #sugestoes ul li:hover, #sugestoes ul li a:hover { background:#DDD; color:#777; } Script em JavaScript com o nome de micox.js dentro do diretrio js.
function ajaxGet(url,elemento_retorno,exibe_carregando){ /****** * ajaxGet - Coloca o retorno de uma url em um elemento qualquer * Use vontade, mas coloque meu nome nos crditos. Dvidas, me mande um email. * A funo grande, coloque-a em um arquivo .js separado. * Verso: 1.2 - 20/04/2006 * Autor: Micox - Niron J.C.G - micoxjcg@yahoo.com.br - elmicox. blogspot.com * Parametros: * url: string; elemento_retorno: object||string; exibe_carregando:boolean
445
* - Se elemento_retorno for um elemento html (inclusive inputs e selects), * exibe o retorno no innerHTML / value / options do elemento * - Se elemento_retorno for o nome de uma variavel * (o nome da varivel deve ser declarado por string, pois ser feito um eval) * a funo ir atribuir o retorno varivel ao receber a url. *******/ var ajax1 = pegaAjax(); if(ajax1){ url = antiCacheRand(url) ajax1.onreadystatechange = ajaxOnReady ajax1.open(GET, url ,true); //ajax1.setRequestHeader(Content-Type, text/html; charset=iso8859-1);//application/x-www-form-urlencoded); ajax1.setRequestHeader(Cache-Control, no-cache); ajax1.setRequestHeader(Pragma, no-cache); if(exibe_carregando){ put(Carregando ...) } ajax1.send(null) return true; }else{ return false; } function ajaxOnReady(){ if (ajax1.readyState==4){ if(ajax1.status == 200){ var texto=ajax1.responseText; if(texto.indexOf( )<0) texto=texto.replace(/\+/g, ); //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp put(texto); extraiScript(texto);
446
}else{ if(exibe_carregando){put(Falha no carregamento. + httpStatus(ajax1.status));} } ajax1 = null }else if(exibe_carregando){//para mudar o status de cada carregando put(Carregando ... ) } } function put(valor){ //coloca o valor na variavel/elemento de retorno if((typeof(elemento_retorno)).toLowerCase()==string){ //se for o nome da string if(valor!=Falha no carregamento){ eval(elemento_retorno + = unescape( + escape(valor) + )) } }else if(elemento_retorno.tagName.toLowerCase()==input){ valor = escape(valor).replace(/\%0D\%0A/g,) elemento_retorno.value = unescape(valor); }else if(elemento_retorno.tagName.toLowerCase()==select){ select_innerHTML(elemento_retorno,valor) }else if(elemento_retorno.tagName){ elemento_retorno.innerHTML = valor; //alert(elemento_retorno.innerHTML) } } function pegaAjax(){ //instancia um novo xmlhttprequest //baseado na getXMLHttpObj que possui muitas cpias na net e eu nao sei quem o autor original if(typeof(XMLHttpRequest)!=undefined){return new XMLHttpRequest();} var axO=[Microsoft.XMLHTTP,Msxml2.XMLHTTP,Msxml2. XMLHTTP.6.0,Msxml2.XMLHTTP.4.0,Msxml2.XMLHTTP.3.0];
447
for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);} catch(e){} } return null; } function httpStatus(stat){ //retorna o texto do erro http switch(stat){ case 0: return Erro desconhecido de javascript; case 400: return 400: Solicitao incompreensvel; break; case 403: case 404: return 404: No foi encontrada a URL solicitada; break; case 405: return 405: O servidor no suporta o mtodo solicitado; break; case 500: return 500: Erro desconhecido de natureza do servidor; break; case 503: return 503: Capacidade mxima do servidor alcanada; break; default: return Erro + stat + . Mais informaes em http://www. w3.org/Protocols/rfc2616/rfc2616-sec10.html; break; } } function antiCacheRand(aurl){ var dt = new Date(); if(aurl.indexOf(?)>=0){// j tem parametros return aurl + & + encodeURI(Math.random() + _ + dt.getTime()); }else{ return aurl + ? + encodeURI(Math.random() + _ + dt.getTime());} } } function select_innerHTML(objeto,innerHTML){ /****** * select_innerHTML - altera o innerHTML de um select independente se FF ou IE * Corrige o problema de no ser possvel usar o innerHTML no IE corretamente
448
* Veja o problema em: http://support.microsoft.com/default. aspx?scid=kb;en-us;276228 * Use a vontade mas coloque meu nome nos crditos. Dvidas, me mande um email. * Verso: 1.0 - 06/04/2006 * Autor: Micox - Niron J.C.G - micoxjcg@yahoo.com.br - elmicox. blogspot.com * Parametros: * objeto(tipo object): o select a ser alterado * innerHTML(tipo string): o novo valor do innerHTML *******/ objeto.innerHTML = var selTemp = document.createElement(micoxselect) var opt; selTemp.id=micoxselect1 document.body.appendChild(selTemp) selTemp = document.getElementById(micoxselect1) selTemp.style.display=none if(innerHTML.toLowerCase().indexOf(<option)<0){//se no option eu converto innerHTML = <option> + innerHTML + </option> } innerHTML = innerHTML.replace(/<option/g,<span).replace(/<\/ option/g,</span) selTemp.innerHTML = innerHTML for(var i=0;i<selTemp.childNodes.length;i++){ if(selTemp.childNodes[i].tagName){ opt = document.createElement(OPTION) for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){ opt.setAttributeNode(selTemp.childNodes[i].attributes[j]. cloneNode(true)) }
449
opt.value = selTemp.childNodes[i].getAttribute(value) opt.text = selTemp.childNodes[i].innerHTML if(document.all){ //IEca objeto.add(opt) }else{ objeto.appendChild(opt) } } } document.body.removeChild(selTemp) selTemp = null }
function extraiScript(texto){ //Maravilhosa funo feita pelo SkyWalker.TO do imasters/forum //http://forum.imasters.com.br/index.php?showtopic=165277& // inicializa o inicio >< var ini = 0; // loop enquanto achar um script while (ini!=-1){ // procura uma tag de script ini = texto.indexOf(<script, ini); // se encontrar if (ini >=0){ // define o incio para depois do fechamento dessa tag ini = texto.indexOf(>, ini) + 1; // procura o final do script var fim = texto.indexOf(</script>, ini); // extrai apenas o script codigo = texto.substring(ini,fim);
450
// executa o script //eval(codigo); /********************** * Alterado por Micox - micoxjcg@yahoo.com.br * Alterei pois com o eval no executava funes. ***********************/ novo = document.createElement(script) novo.text = codigo; document.body.appendChild(novo); } } Fonte: <www.elmicox.blogspot.com>. Scripts PHP Arquivo de configurao config.php no diretrio cfg. <?php mysql_connect(localhost, root, ); mysql_select_db(exe_lessa); ?> Arquivo index.php no diretrio padro. <html dir=ltr xml:lang=pt-br lang=pt-br xmlns=http://www. w3.org/1999/xhtml> <head> <title>Pessoas</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php);
451
?>
</body>
</html> Arquivo menu.php no diretrio padro. <ul id=menu> <li><a tabindex=3 href=cadastro.php title=Cadastro>Cadastro</ a></li> <li><a tabindex=4 href=consulta.php title=Consulta>Consulta</ a></li> <li><a tabindex=5 href=lista.php title=Lista>Lista</a></li>
</ul> Arquivo cadastro.php no diretrio padro. <?php include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Cadastro de Pessoas</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
</head> <body> <?php include(menu.php); ?> <h1>Cadastro de Pessoas</h1>
452
<?php if(!empty($_POST)): if(!empty($_POST[nome])): $nome = $_POST[nome];
$pessoas = mysql_query(SELECT * FROM pessoa WHERE UPPER(nome) = .strtoupper($nome).); if(mysql_num_rows($pessoas) >= 1): ?> <div class=mensagem erro> Já existe uma pessoa com
este nome cadastrada. </div> <?php
elseif(mysql_query(INSERT INTO pessoa VALUES (NULL, .$nome., SYSDATE()))): ?> <div class=mensagem sucesso> Pessoa Cadastrada com sucesso.
else: ?> </div> <?php
<div class=mensagem erro> Erro ao cadastrar pessoa.
<div class=mensagem erro> Você precisa digitar um nome para
cadastrar a pessoa.
453
endif; ?> endif;
</div> <?php
<form name=cadastro id=cadastro method=post> <label for=nome>Nome:</label>
<input type=text name=nome id=nome tabindex=1 /> <input type=submit name=cadastrar id=cadastrar value=Cadastrar tabindex=2 /> </form>
</body>
</html> Arquivo consulta.php no diretrio padro. <?php session_start(); echo $_SESSION[teste]; unset($_SESSION[teste]); include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=UTF-8/> <title>Consulta de Pessoas</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
454
<script src=./js/micox.js type=text/javascript></script> <script type=text/javascript> function exibeSugestoes() { document.getElementById(pessoa).style. nome = document.getElementById(nome).value;
display=none;
ajaxGet(sugestoes.php?nome=+nome, document.getElementById(sugestoes), true); display=block; function preenche(nome) { document.getElementById(sugestoes).style. document.getElementById(pessoa).style. } document.getElementById(sugestoes).style.
display=none; display=none;
document.getElementById(nome).value = nome; } function exibePessoa(nome) {
display=none;
document.getElementById(sugestoes).style. nome = document.getElementById(nome).value;
ajaxGet(pessoa.php?nome=+nome, document. getElementById(pessoa), true); display=block; } document.getElementById(pessoa).style. return false;
</script>
</head> <body> <?php include(menu.php);
455
?> <h1>Consulta de Pessoas</h1>
<form name=consulta id=consulta onSubmit=javascript:return exibePessoa();> <label for=nome>Nome:</label>
<input tabindex=1 type=text onkeyup=javascript:ex ibeSugestoes(); name=nome<?php echo rand(1,10000); ?> id=nome /> <input tabindex=2 id=consultar name=consultar type=submit value=Consultar /> </div> <div id=pessoa> </div> </form> <div id=sugestoes>
</body>
</html> Arquivo lista.php no diretrio padro. <?php include(./cfg/config.php); ?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://w3c.globo.com/TR/xhtml1/DTD/xhtml1-strict.dtd>
<meta http-equiv=Content-Type content=text/ html;charset=ISO-8859-1/> <title>Lista de Pessoas</title> <link href=./css/estilo.css type=text/css rel=stylesheet />
456
</head> <body> <?php include(menu.php); ?> <h1>Lista de Pessoas</h1> <table> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Data de Cadastro</th>
</tr>
</thead> <tbody> <?php $pessoas = mysql_query(SELECT * FROM while($pessoa = mysql_fetch_assoc($pessoas)): ?> <tr> <td><?php echo <td><?php echo $pessoa[nome]; <td><?php echo
pessoa);
$pessoa[codigo]; ?></td> ?></td> $pessoa[cadastro]; ?></td> </tr> <?php
endwhile; ?>
</tbody>
457
</table>
</body>
</html> Arquivo pessoa.php no diretrio padro. <?php header(Content-Type: text/html; charset=ISO-8859-1,true); include(./cfg/config.php); $nome = $_GET[nome]; $pessoas = mysql_query(SELECT * FROM pessoa WHERE nome LIKE %.$nome.%); if(mysql_num_rows($pessoas) == 0): ?> <div class=mensagem erro> Nenhuma pessoa encontrada.
</div> <?php
elseif(mysql_num_rows($pessoas) == 1): $pessoa = mysql_fetch_assoc($pessoas); ?> <h1><?php echo $pessoa[nome]; ?></h1> <table> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Data de Cadastro</th>
</tr>
</thead> <tbody> <tr>
458
</tr>
<td><?php echo $pessoa[codigo]; ?></td> <td><?php echo $pessoa[nome]; ?></td> <td><?php echo $pessoa[cadastro]; ?></td>
</tbody>
</table> <?php
else: ?> <div class=mensagem erro>
Foram encontradas várias pessoas. Por favor, refine sua busca. </div> <?php
endif; ?>
Arquivo sugestoes.php no diretrio padro. <?php header(Content-Type: text/html; charset=ISO-8859-1,true); include(./cfg/config.php); $nome = $_GET[nome]; $nomes = mysql_query(SELECT * FROM pessoa WHERE nome LIKE %.$nome.%); if(mysql_num_rows($nomes) >= 1): ?> <ul> <?php while($nome = mysql_fetch_assoc($nomes)): ?>
459
<li><a href=#pessoa-<?php echo $nome[codigo];?> onclick=javascript:preenche(<?php echo $nome[nome];?>);><?php echo $nome[nome];?></a></li> <?php
endwhile; ?> </ul>
<?php
else: ?> Nenhuma pessoa encontrada. <?php
endif; ?>
460
Biblioteca Virtual
Veja a seguir os servios oferecidos pela Biblioteca Virtual aos alunos a distncia:
Pesquisa a publicaes online www.unisul.br/textocompleto Acesso a bases de dados assinadas www. unisul.br/bdassinadas Acesso a bases de dados gratuitas selecionadas www.unisul.br/bdgratuitas Acesso a jornais e revistas on-line www. unisul.br/periodicos Emprstimo de livros www. unisul.br/emprestimos Escaneamento de parte de obra*
Acesse a pgina da Biblioteca Virtual da Unisul, disponvel no EVA e explore seus recursos digitais. Qualquer dvida escreva para bv@unisul.br
* Se voc optar por escaneamento de parte do livro, ser lhe enviado o sumrio da obra para que voc possa escolher quais captulos deseja solicitar a reproduo. Lembrando que para no ferir a Lei dos direitos autorais (Lei 9610/98) pode-se reproduzir at 10% do total de pginas do livro.

Livro Ling Prog III - 462.Pg

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Livro Ling Prog III - 462.Pg

Diunggah oleh

Hak Cipta:

Format Tersedia

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Palhoa UnisulVirtual 2011

Coordenao dos Cursos

Giane dos Passos

Gerncia de Desenho e Desenvolvimento de Materiais Didticos

Gerncia Administrativa e Financeira

Gerncia de Ensino, Pesquisa e Extenso

Gerncia Servio de Ateno Integral ao Acadmico

Mauro Faccioni Filho

(Coord. PUIP, PUIC, PIBIC)

Edson Orivaldo Lessa Junior

Linguagens de Programao III

Design instrucional Flavia Lumi Matuzawa

Palhoa UnisulVirtual 2011

Edio Livro Didtico

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

Bom estudo e sucesso! Equipe UnisulVirtual.

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Unidade 1 - Aspectos do desenvolvimento de aplicaes Web 20h/a

Unidade 2 - Javascript 20h/a

Unidade 3 - PHP 20h/a

Unidade 4 - Sistemas Web com banco de dados (PHP + MYSQL) 20h/a

Universidade do Sul de Santa Catarina

o banco de dados faz diferena na eficincia e na velocidade de desenvolvimento de uma aplicao.

Unidade 5 - Extensible Markup Language (XML) 20h/a

Unidade 6 - Asynchronous Javascript and XML (AJAX) 20h/a

Linguagens de Programao III

Agenda de atividades/ Cronograma

Demais atividades (registro pessoal)

Aspectos do desenvolvimento de aplicaes Web

Universidade do Sul de Santa Catarina

Para incio de estudo

Linguagens de Programao III

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Vejamos um exemplo de HTML:

Universidade do Sul de Santa Catarina

Seo 2 Desenvolvimento de aplicaes Web

Linguagens de Programao III

Protocolos TCP/IP um conjunto de protocolos de comunicao entre computadores em rede.

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina

b) Infraestrutura tecnolgica imprevisvel

Linguagens de Programao III

c) Alta volatilidade dos requisitos de negcio

Voc ver adiante mais detalhes sobre a linguagem server-side e client-side.

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina

As linguagens mais usadas atualmente so:

Linguagens de Programao III

Figura 1.9 - Planilha eletrnica do Google Docs. Fonte: <http://docs.google.com>.

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Universidade do Sul de Santa Catarina