Linguagem de Programacao III Completo

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
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
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
Secretaria de Ensino a Distncia

Karine Augusta Zanoni
Coordenao dos Cursos
Giane dos Passos
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
(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 Administrativa e
Financeira
Renato Andr Luz (Gerente)
Naiara Jeremias da Rocha
Valmir Vencio Incio
Financeiro Acadmico
Marlene Schauffer
Rafael Back
Vilmar Isaurino Vidal
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. PUIP, PUIC, PIBIC)
Mauro Faccioni Filho

(Coord. Nuvem)
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
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
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)
Carolina Hoeller da S. Boeing

(Coord. Ext/DAD)
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
Gerncia de Logstica
Jeferson Cassiano A. da Costa

(Gerente)
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
Gerncia de Marketing
Fabiano Ceretta (Gerente)

Alex Fabiano Wehrle
Mrcia Luz de Oliveira
Sheyla Fabiana Batista Guerrer
Victor Henrique M. Ferreira (frica)
Relacionamento com o Mercado

Eliza Bianchini Dallanhol Locks
Walter Flix Cardoso Jnior
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 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
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
O ambiente
Seo 2
Conceitos envolvidos no desenvolvimento

de aplicaes Web
Seo 3
Caractersticas
Seo 4
Integrao de linguagens
Seo 5
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.

Figura 1.3 - Safari desenvolvido pela Apple.

Unidade 1
21
Figura 1.4 - Firefox desenvolvido pela Mozilla.

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.

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:
Unidade 1
Protocolos TCP/IP um
conjunto de protocolos
de comunicao entre
computadores em rede.
25
Browser
(Usurio)
Servidor Web
Servidor Web
Browser
(Usurio)
Figura 1.6 - Diagrama de interao browser x servidor.

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.
Voc ver adiante

mais detalhes sobre a
linguagem server-side e
client-side.
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.
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.
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.

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 - </p>
</body>
</html>
Como fica no browser:
42
Figura 1.13 - Tags de pargrafo e alinhamento de texto.

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.

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.

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.

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.

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.

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.

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.

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>
<dt>Tpico 3</dt>
</dl>
</body>
</html>
O browser deve apresentar da seguinte forma:

Unidade 1
51
Figura 1.21 - Tags de lista descritivas.

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>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<body>
</body>
</html>
O browser interpreta desta forma:
Unidade 1
55
Figura 1.22 - Tag de tabelas.

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:
!
56
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.
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 valign=bottom>Linha 1 Célula 2</td>
<td bgcolor=#FF0000>Linha 1 Célula 3</td>
</tr>
<tr>
<td valign=bottom>Linha 2 Célula 1</td>
<td valign=middle nowrap>Linha 2 Célula 2</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>
</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>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
J no browser fica:
58
Figura 1.23 - Propriedade de tabela.

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.
Figura 1.24 - Propriedades de clulas.

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.
Unidade 1
59
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 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>
</tr>
<tr>
</tr>
</table>
</body>
</html>
60
A apresentao no browser fica:
Figura 1.25 Mesclando clulas.

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.

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).

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.

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>
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:
<head>
<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.
Figura 1.29 - Recuperao de dados por meio do mtodo GET.

72
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
<head>
<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.
76
1 Linguagem Server-side
( )
PostgreSQL
2 Linguagem Client-side
( )
HTML
( )
Oracle
( )
SQLite
( )
Javascript
( )
( )
PHP
( )
MySQL
( )
ASP
( )
DB2
( )
.NET
( )
CGI
( )
Perl
( )
Java
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
JavaScript aplicado
Seo 2
Tipos de dados
Seo 3
Elementos de linguagem
Seo 4
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>
<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:
Este padro o oficial

reconhecido pelas
indstrias.
<html>
<head>
<script language=javascript type=text/javascript src=tetse.js>
</script>
</head>
<body>
...
</body>
</html>
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>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Exemplo de bloco</title>
</head>
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

<head>
<title>Exemplo de String</title>
</head>
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.

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
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:
!
88
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.
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:
!
90
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.
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.
<head>
<title>Exemplo de String</title>
</head>
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.

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>
<head>
<title>Exemplo de contra-barra</title>
</head>
<body>
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

<head>
<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=
Endereo: <input name=txt_endereco type=text value=
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.

O objeto string possui mtodos que podem ser utilizados em

diversas situaes e auxiliam o desenvolvimento das aplicaes.
Mtodo
Descrio
charAt(ndice)
Devolve o caractere que ocupa a posio

ndice na string.
charCodeAt(ndice)
Devolve o cdigo (conjunto Unicode) do

caractere que ocupa a posio ndice na
string.
indexOf(string_
busca, ndice_
opcional)
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.
lastIndexOf(string_
busca, ndice_
opcional)
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.
Unidade 2
97
Mtodo
Descrio
split(string_separador,
limite_opcional)
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.
substring(incio, fim)
Devolve uma sesso da string composta pelos

caracteres que ocupam as posies com
ndices entre incio (includa) e fim (excluda).
toLowerCase()
Devolve uma verso da string com todos os

caracteres convertidos para letra pequena.
toUpperCase()
Devolve uma verso da string com todos os

caracteres convertidos para letra grande.
Fonte: JavaScript e HTML Dinmico (2007).
Toda a varivel do tipo string possui acesso aos mtodos descritos

e a alguns outros.
<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>
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>
noite.;
document.write(str.match(gelada));
</script>
<h3> Mtodo substring</h3>
Unidade 2
99
noite.;
document.write(str.substring(27,31) = +str.substring(27,31));
document.write(str.substring(27,36)=+str.substring(27,36));
</script>
<h3>Converte para Maiuscula e Minscula</h3>
var str=Ol Pessoal do JavaScript!;
document.write(str.toLowerCase());
document.write(str.toUpperCase());
</script>
</body>
</html>
Figura 2.6 - Propriedades e mtodos de strings.

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
Descrio
getDate()
Devolve o dia do ms (de 1 a 31) que est guardado no

objeto Date.
getDay()
Devolve o dia da semana (de 0 = domingo at 6 =

sbado) guardado no objeto Date.
getMonth()
Devolve o ms (de 0 = janeiro at 11 = dezembro)

guardado no objeto Date.
getFullYear()
Devolve o valor completo do ano (quatro dgitos)

getYear()
Devolve o valor incompleto do ano (apenas dois dgitos)

guardado no objeto Date. No use este mtodo, use
getFullYear em seu lugar.
getHours()
Devolve o valor da hora (de 0 a 23) guardada no objeto

Date.
getMinutes()
Devolve o valor dos minutos (de 0 a 59) guardados no

objeto Date.
getSeconds()
Devolve o valor dos segundos (de 0 a 59) guardados no

objeto Date.
getMilliseconds()
Devolve o valor dos milissegundos (de 0 a 999)

guardados no objeto Date.
getTime()
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.
getTimezoneOffset()
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).
getUTCDate()
Devolve o dia do ms (de 1 a 31) guardado no objeto

Date medido no padro de tempo universal (UTC).
getUTCDay()
Devolve o dia da semana (de 0 a 6) guardado no objeto

getUTCMonth()
Devolve o valor do ms (de 0 a 11) guardado no objeto

getUTCFullYear()
Devolve o valor completo do ano (com quatro dgitos)

guardado no objeto Date medido no padro de tempo
universal (UTC).
Unidade 2
101
102
Mtodo
Descrio
getUTCHours()
Devolve a hora (de 0 a 23) guardada no objeto Date

medida no padro de tempo universal (UTC).
getUTCMinutes()
Devolve o valor dos minutos (de 0 a 59) guardados no

objeto Date medidos no padro de tempo universal
(UTC).
getUTCSeconds()
Devolve o valor dos segundos (de 0 a 59) guardados

no objeto Date medidos no padro de tempo universal
(UTC).
getUTCMilliseconds()
Devolve o valor dos milissegundos (de 0 a 999)

guardados no objeto Date medidos no padro de
tempo universal (UTC).
setDate(dia_ms)
Acerta o valor do dia (de 1 a 31) do ms guardado no

objeto Date.
setFullYear(ano)
Acerta o valor do ano (com quatro dgitos) guardado no

objeto Date.
setHours(horas)
Acerta o valor da hora (de 0 a 23) guardada no objeto Date.
setMilliseconds(milisegundos)
Acerta o valor dos milissegundos (de 0 a 999) guardados

no objeto Date.
setMinutes(minutos)
Acerta o valor dos minutos (de 0 a 59) guardados no

objeto Date.
setMonth(ms)
Acerta o valor do ms (de 0 = janeiro a 11 = dezembro)

setSeconds(segundos)
Acerta o valor dos segundos (de 0 a 59) guardados no

objeto Date.
setTime(data_numrica)
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.
setYear(ano)
Acerta o valor do ano guardado no objeto Date. No use

este mtodo, use antes o mtodo setFullYear.
setUTCDate(dia_ms)
Acerta o valor do dia (de 1 a 31) do ms guardado no

objeto Date usando o padro de tempo universal (UTC).
setUTCDay(dia_semana)
Acerta o valor do dia da semana (de 0 = domingo a 6 =

sbado) guardado no objeto Date usando o padro de
tempo universal (UTC).
setUTCMonth(ms)
Acerta o valor do ms (de 0 = janeiro a 11 = dezembro)

guardado no objeto Date usando o padro de tempo
universal (UTC).
Mtodo
Descrio
setUTCFullYear(ano)
Acerta o valor do ano (com quatro dgitos) guardado no

objeto Date.
setUTCHour(horas)
Acerta o valor da hora (de 0 a 23) guardada no objeto

Date usando o padro de tempo universal (UTC).
setUTCMinutes(minutos)
Acerta o valor dos minutos (de 0 a 59) guardados no

setUTCSeconds(segundos)
Acerta o valor dos segundos (de 0 a 59) guardados no

setUTCMilliseconds(milisegu
ndos)
Acerta o valor dos milissegundos (de 0 a 999) guardados

no objeto Date usando o padro de tempo universal
(UTC).
toGMTString()
Devolve uma representao textual (a data e a hora

escritas por extenso) usando como referncia o fuso
horrio do Tempo Mdio de Greenwich (GMT).
toLocaleString()
Devolve uma representao textual (a data e a hora

escritas por extenso) no fuso horrio do computador local.
toUTCString()
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

<head>
<title>Exemplos objeto Date</title>
</head>
<body>
<h3>Mostrar o dia da semana</h3>
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>
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>
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>
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>
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>
Unidade 2
105
Figura 2.7 - Mtodos e atributos de data.

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

<head>
/>
<title>Exemplo de Array</title>
</head>
<body>
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 />
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

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

<head>
/>
<title>Exemplo converso de dados no Array</title>
</head>
<body>
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(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.

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
Descrio
length
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.
Mtodo
Descrio
join()
Devolve uma String (varivel de texto) que representa o contedo

do Array.
reverse()
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).
sort()
Devolve um novo Array em que os elementos esto ordenados

(geralmente por ordem crescente).
Utilizando o mtodo de ordenao sobre um objeto array

teramos:
<head>
/>
<title>Exemplo ordenao array</title>
</head>
<body>
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>
for (var i=0; i<6; i++)
document.write(fruta[i] + <br>)
</script>
</td>
<td>
// 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>
<!-for (var i=0; i<6; i++)
document.write(numeros[i] + <br>)
// -->
112
</script>
</td>
<td>
<!-// 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.

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
Descrio
&& ou AND
|| ou OR
OU
! ou NOT
NO
>
Maior que
<
Menor que
>=
Maior ou igual
<=
Menor ou igual
Atribuio
==
Igualdade
===
Idntico (valor e tipo)
!=
Diferente
Como exemplo, temos:
114
<html>
<head>
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.
<head>
/>
<title>Exemplo de lao de deciso</title>
</head>
<body>
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.

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

<head>
<title>Exemplo de Switch</title>
</head>
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

<head>
/>
<title>Exemplo lao for</title>
</head>
<body>
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.

Esse exemplo mostra o lao de repetio for, como ele percorre o

contador e a condio nele atribuda. Um outro exemplo seria:
<head>
/>
<title>Exemplo de lao de repetio</title>
</head>
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.

<head>
/>
<title>Exemplo lao while</title>
</head>
<body>
var i=0;
while (i<20) {
document.write(O do ndice : +i+<br>);
i++;
}
</script>
</body>
</html>
126
Figura 2.15 Lao WHILE.

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

<head>
/>
<title>Exemplo do..while</title>
</head>
<body>
var i = 0;
while (i<8) {
document.write(Intruo while executada vale: +i+,
condio atendida<br>);
i++;
}
i = 0;
do {
document.write(Intruo do..while executada contador vale: +i+,
condio atendida<br>);
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.

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.
<head>
/>
<title>Exemplo de Funo sem argumento</title>
</head>
function testefuncao() {
return A funo foi chamada;
}
</script>
<body>
<h1>Vejamos um teste de funo sem argumento!</h1>
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.

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.
<head>
/>
<title>Exemplo Funo com argumentos fixo</title>
</head>
Unidade 2
131
function autosoma(valor) {
var soma=0;
do {
soma += valor;
valor--;
} while (valor>0)
return soma;
}
function atribuircampo(campovalor, camporetorno) {
camporetorno.value = autosoma(parseInt(campovalor.value));
}
</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>
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.

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

<head>
<title>Exemplo Funo argumento varivel</title>
</head>
function autosoma() {
var soma=0;
for (var i=0; i<autosoma.arguments.length; i++) {
soma += parseInt(autosoma.arguments[i]);
}
return soma;
}
</script>
<body>
document.write(Chamada da funo, somar 1,5,6,7,8 =
+autosoma(1,5,6,7,8));
document.write(Chamada da funo, somar 67, 8, 9 ,7 , 5, 7 ,9 =
+autosoma(67, 8, 9 ,7 , 5, 7 ,9));
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.

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
MANIPULADOR
DESCRIO
Blur
onBlur
Ocorre quando o usurio retira o foco

de um objeto de formulrio.
Change
onChange
Ocorre quando o usurio muda o

valor de um objeto de formulrio.
Click
onClick
Ocorre quando o usurio clica sobre

o objeto.
Focus
onFocus
Ocorre quando o usurio focaliza o

objeto.
Load
onLoad
Ocorre quando o usurio carrega a

pgina.
Unload
onUnload
Ocorre quando o usurio abandona

a pgina.
MouseOver
onMouseOver
Ocorre quando o ponteiro do mouse

passa sobre um link ou uma ncora.
Vlidos apenas para hiperlinks.
Select
onSelect
Ocorre quando o usurio seleciona

um elemento de um formulrio.
Submit
onSubmit
Ocorre quando o usurio envia um

formulrio.
MouseDown
onMouseDown
Ocorre quando o boto do mouse

pressionado.
MouseMove
onMouseMove

se movimenta sobre o objeto.
MouseOut
onMouseOut

afasta de um objeto. Vlidos apenas
para hiperlinks.
MouseUp
onMouseUp
Ocorre quando o boto do mouse

solto.
KeyDown
onKeyDown
Ocorre quando uma tecla segurada.
KeyPress
onKeyPress
Ocorre quando uma tecla

pressionada.
KeyUp
onKeyUp
Ocorre quando uma tecla solta.
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>
</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>
/>
<title>Mascara de fone</title>
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:

<head>
/>
<title>Validao dos campos</title>
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;
}
}
if (resp!=) {
alert(resp);
return false;
}
return true;
}
</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>
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.

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:
<head>
/>
<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
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
Viso geral
Seo 2
Variveis e constantes
Seo 3
Operadores
Seo 4
Estruturas de controle
Seo 5
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.
Perceba que h duas informaes de extrema importncia no

cdigo da requisio, como mostrado a seguir:

<head>
/>
<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.

O cdigo que teramos seria:

<head>
/>
<title>Relao Cadastrada</title>
</head>
<body>
<p><h1>Requisies:</h1></p>
<?php
if ((@$_POST[txtmouse]>0)||(@$_POST[txtteclado]>0)||(@$_
POST[txtfone]>0)) {
?>
<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.

<head>
/>
<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.

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.

<head>
/>
<title>Exemplo de tipo de dados</title>
</head>
<body>
<?php
echo $variavel = 1;
echo <br />;
echo $variavel = $variavel+5;
echo <br />;
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.

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

<head>
<title>Exemplo de tipo de dados</title>
</head>
<body>
<?php
echo $variavel = 1;
echo <br />;
echo <br />;
echo <br />;
?>
<br />
<br />
<?php
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 />;
164
teste dadoas;
?>
</body>
</html>
O browser mostrar:
Figura 3.5 - Exemplo de tipo de dados.

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.
<head>
/>
<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)
O resultado do exemplo :
166
muda para integer;

muda para float;
muda para string;
muda para array;
muda para objeto.
Figura 3.6 - Exemplo de tipo de cast.

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.

<head>
/>
<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 identificacao = $identificacao<br /><br />;
$identificacao = Jos Maria;

echo Varivel identificacao = $identificacao<br />;
?>
</body>
</html>
O resultado ser:
Figura 3.7 - Exemplo de varivel por referncia.

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:
<head>
/>
<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.

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 (.).

<head>
/>
<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.

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:
<head>
/>
<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.

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
Exemplo
Adio
$a + $b
Subtrao
$a - $b
Multiplicao
$a * $b
Diviso
$a / $b
%
Mdulo
Fonte: PHP e MySQL desenvolvimento Web.
$a % $b
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.

<head>
/>
<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.

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
Equivalente a
+=
$a += $b
$a = $a + $b
-=
$a -= $b
$a = $a - $b
*=
$a *= $b
$a = $a * $b
/=
$a /= $b
$a = $a / $b
%=
$a %= $b
$a = $a % $b
.=
$a .= $b
$a = $a . $b

<head>
/>
<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.

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
Exemplo
==
Igual a
$a == $b
===
Idntico
$a === $b
!=
No igual
$a != $b
<>
No igual
$a <> $b
<
Menor que
$a < $b
>
Maior que
$a > $b
<=
Menor que ou igual a
$a <= $b
>=
Maior que ou igual a
Unidade 3
$a >= $b
181

<head>
/>
<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.

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
Nome
Efeito
++$a
Pr-incremento
Incrementa $a em um, e ento

retorna $a.
$a++
Ps-incremento
Retorna $a, e ento incrementa $a em

um.
--$a
Pr-decremento
Decrementa $a em um, e ento

retorna $a.
$a--
Ps-decremento
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.
<head>
/>
<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.

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
Utilizao
Resultado
NO
!$b
Retorna verdadeiro se $b for

falso e vice-versa
&&
$a && $b
Retorna verdadeiro se $a e
$b forem verdadeiros; caso
contrrio falso
||
OU
$a || $b
Retorna verdadeiro se $a ou $b
ou ambos forem verdadeiros
AND
$a and $b
O mesmo que &&, mas com

procedncia mais baixa
OR
OU
$a or $b
O mesmo que ||, mas com

precedncia mais baixa
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.
<head>
/>
<title>Funes no PHP</title>
</head>
<body>
<?php
function simples() {
echo Funo sem argumentos e sem retorno<br />;
}
function retorno() {
return Funo que contm um 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) {
// pode ser utilizado com qualquer argumento
echo Funo com argumentos default<br />;
echo O valor atual das variveis so: $var1, $var2<br />;
}
simples();
echo <br />;
echo retorno();
echo <br />;
echo <strong>Argumentos por cpia</strong><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.

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
Descrio
Abre somente para leitura; coloca o ponteiro do arquivo no comeo do

arquivo.
r+
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.
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.
Abre somente para escrita; coloca o ponteiro do arquivo no final do

arquivo. Se o arquivo no existir, tenta cri-lo.
a+
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).
x+
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).
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 No foi possvel escrever no arquivo ($filename);
exit;
}
echo Sucesso: Escrito ($conteudo) no arquivo ($filename);
fclose($handle);
?>
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.
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
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
Banco de dados
Seo 2
Banco de dados e acessos
Seo 3
Trabalhando com tabelas
Seo 4
API do PHP
Seo 5
Envio e recuperao de dados
Seo 6
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
Unidade 4
207
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.
Unidade 4
209
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.
Todas as chaves numricas

esto armazenadas com o
byte mais alto em primeiro
para conseguir melhor
compactao do ndice.
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.
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
Chins Tradicional, Binrio
binary
Binrio
cp1250 (Windows Central European)
cp1250_bin
Europeu Central (multilinguagem), Binrio
cp1250_croatian_ci
Croata, No diferencia maisculas/minsculas
cp1250_czech_cs
Tcheco, Diferencia maisculas/minsculas
cp1250_general_ci
Europeu Central (multilinguagem), No diferencia

maisculas/minsculas
cp1250_polish_ci
Polons, No diferencia maisculas/minsculas
Unidade 4
213
Collation
Descrio
cp852 (DOS Central European)
cp852_bin
cp852_general_ci

maisculas/minsculas
cp866 (DOS Russian)
cp866_bin
Russo, Binrio
cp866_general_ci
Russo, No diferencia maisculas/minsculas

latin1 (cp1252 West European)
latin1_bin
Oeste Europeu (multilinguagem), Binrio
latin1_danish_ci
Dinamarqus, No diferencia maisculas/minsculas
latin1_general_ci
Oeste Europeu (multilinguagem), No diferencia

maisculas/minsculas
latin1_general_cs
Oeste Europeu (multilinguagem), Diferencia

maisculas/minsculas
latin1_german1_ci
Alemo (dicionrio), No diferencia maisculas/

minsculas
latin1_german2_ci
Alemo (Agenda de telefones), No diferencia

maisculas/minsculas
latin1_spanish_ci
Espanhol, No diferencia maisculas/minsculas
latin1_swedish_ci
Suco, No diferencia maisculas/minsculas

latin2 (ISO 8859-2 Central European)
latin2_bin
latin2_croatian_ci
Croata, No diferencia maisculas/minsculas
latin2_czech_cs
Tcheco, Diferencia maisculas/minsculas
latin2_general_ci

maisculas/minsculas
latin2_hungarian_ci
Hngaro, No diferencia maisculas/minsculas

latin5 (ISO 8859-9 Turkish)
latin5_bin
Turco, Binrio
latin5_turkish_ci
Turco, No diferencia maisculas/minsculas
latin7 (ISO 8859-13 Baltic)
214
latin7_bin
Bltico (multilinguagem), Binrio
latin7_estonian_cs
Estoniano, Diferencia maisculas/minsculas
Collation
Descrio
latin7_general_ci
Bltico (multilinguagem), No diferencia maisculas/

minsculas
latin7_general_cs
Bltico (multilinguagem), Diferencia maisculas/

minsculas
macce (Mac Central European)
macce_bin
macce_general_ci

maisculas/minsculas
macroman (Mac West European)
macroman_bin
Oeste Europeu (multilinguagem), Binrio
macroman_general_
ci
Oeste Europeu (multilinguagem), No diferencia

maisculas/minsculas
sjis (Shift-JIS Japanese)
sjis_bin
Japons, Binrio
sjis_japanese_ci
Japons, No diferencia maisculas/minsculas

swe7 (7bit Swedish)
swe7_bin
Suco, Binrio
swe7_swedish_ci

utf8 (UTF-8 Unicode)
utf8_bin
Unicode (multilinguagem), Binrio
utf8_czech_ci
Tcheco, No diferencia maisculas/minsculas
utf8_danish_ci
Dinamarqus, No diferencia maisculas/minsculas
utf8_esperanto_ci
Esperanto, No diferencia maisculas/minsculas
utf8_estonian_ci
Estoniano, No diferencia maisculas/minsculas
utf8_general_ci
Unicode (multilinguagem), No diferencia maisculas/

minsculas
utf8_hungarian_ci
Hngaro, No diferencia maisculas/minsculas
utf8_icelandic_ci
Islands, No diferencia maisculas/minsculas
utf8_latvian_ci
Letons, No diferencia maisculas/minsculas
utf8_lithuanian_ci
Litunio, No diferencia maisculas/minsculas
utf8_persian_ci
Prsa, No diferencia maisculas/minsculas
utf8_polish_ci
Polons, No diferencia maisculas/minsculas
utf8_roman_ci
Oeste Europeu, No diferencia maisculas/minsculas
Unidade 4
215
Collation
Descrio
utf8_romanian_ci
Romno, No diferencia maisculas/minsculas
utf8_slovak_ci
Eslovquio, No diferencia maisculas/minsculas
utf8_slovenian_ci
Eslovnio, No diferencia maisculas/minsculas
utf8_spanish2_ci
Espanhol Traditional, No diferencia maisculas/

minsculas
utf8_spanish_ci
Espanhol, No diferencia maisculas/minsculas
utf8_swedish_ci
utf8_turkish_ci
Turco, No diferencia maisculas/minsculas
utf8_unicode_ci
Unicode (multilinguagem), No diferencia maisculas/

minsculas
Fonte: <http://www.mysql.com>.
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
Descrio
ALL [PRIVILEGES]
Configura todos os privilgios simples,

excetoWITH GRANT OPTION.
ALTER
Permite o uso deALTER TABLE.
CREATE
Permite o uso deCREATE TABLE.
CREATE TEMPORARY TABLES
Permite o uso deCREATE TEMPORARY TABLE.
DELETE
Permite o uso deDELETE.
DROP
Permite o uso deDROP TABLE.
EXECUTE
Permite que o usurio execute STORED

PROCEDURES.
FILE
Permite o uso deSELECT ... INTO

OUTFILEeLOAD DATA INFILE.
INDEX
Permite o uso deCREATE INDEXeDROP INDEX.
INSERT
Permite o uso deINSERT
LOCK TABLES
Permite o uso deLOCK TABLESem tabelas nas

quais se tem o privilgioSELECT.
PROCESS
Permite o uso deSHOW FULL PROCESSLIST.
REFERENCES
Para o futuro.
RELOAD
Permite o uso deFLUSH.
REPLICATION CLIENT
D o direto ao usurio de perguntar onde o slave/

master est. Utilizando em replicao de banco de
dados.
REPLICATION SLAVE
Necessrio para a replicao dos slaves (para ler

logs binrio do master).
SELECT
Permite o uso deSELECT.
SHOW DATABASES
SHOW DATABASESexibe todos os bancos de

dados..
SHUTDOWN
Permite o uso demysqladmin shutdown.
SUPER
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.
UPDATE
Permite o uso deUPDATE
USAGE
Sinnimo para sem privilgios.
GRANT OPTION
Sinnimo paraWITH 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:
"
"
"
230
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.
"
"
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
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)
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
nom_livro
nom_autor
MySQL
Fulano de Tal
PHP
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.
Voc pode pesquisar mais o MySQL

no endereo: <http://www.mysql.
com>.
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.
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)
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>
<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.

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);
$link = mysql_connect($serv, $user, $pass);
mysql_select_db($bd);
?>
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;
$link = mysql_connect($serv, $user, $pass);
mysql_select_db($bd);
?>
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
*/
/* 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>) ;

$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.

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
*/
/* 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.
*/

banco de dados);
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 {

?>
<!-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>
<b>Código</b>
</td>
<b>Nome</b>
</td>
</tr>
<?php
// controle utilizado no HTML 4.0 para alternar a cor da tabela do HTML
$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>
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>
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.

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.
http://www.w3.org/TR/html4/loose.dtd><html lang=pt-br>
<head>
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
banco de dados);
mysql_select_db($bd) or die (Erro na seleo do banco de dados.
mysql_errno($link) . : . mysql_error($link). \n<br>);
$result= mysql_query(select cod_autor, nom_autor from autores);
?>
<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
// construo em PHP para manipular o CSS
$fundo=silver;
} else {
$fundo=white;
}
// construido a linha dos resultados da consulta
?>
<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
252
} } else {
// caso no seja encontrado registros esta linha montada
?>
<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>
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.

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.
<html>
<head>
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
return false;
}
return true;
}
</script>
</head>
<body>
<?php
// verificao se o formulrio foi submetido, ou seja, enviado ao servidor
if (@$_POST[salvar]!=) {
254
banco de dados);
// 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);
?>
// 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);>
<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)) {
$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.

Unidade 4
257
A mensagem de retorno como:
Figura 4.7 Mensagem de retorno em JavaScript.

Aps inserir alguns registros, retornaremos a pgina de listagem,

desta vez mostrar os dados inseridos:
Figura 4.8 Listagem completa das informaes.

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

<html>
<head>
charset=iso-8859-1>
<title>Alterar Autor</title>
alert(O nome do Autor deve conter no mnimo 4 caracteres!);
return false;
}
return true;
}
</script>
</head>
<body>
<?php
banco de dados);
// 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);
?>
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]);
$relacao = mysql_fetch_array($result);
}
?>
<h1>Alterar Autor</h1>
<hr>
<tr>
<td><label for=cod>Código</label></td>
<td>

260
<input type=text name=cod id=cod value=<?=@$relacao[cod_

autor]; ?> readonly=true>
</td>
</tr>
<tr>
value=<?=@$relacao[nom_autor]; ?>></td>
</tr>
<tr>
<input type=submit name=salvar id=Alterar
value=Alterar>
</td>
</tr>
</table>
</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.

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

<html>
<head>
charset=iso-8859-1>
<title>Exclui Autor</title>
// verifica se o usuario quer mesmo excluir o usurio
if (confirm(Deseja Realmente Excluir o Registro?)) {
return true;
}
return false;
}
</script>
</head>
<body>
<?php
banco de dados);
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);
?>
Unidade 4
263
alert (Registro excludo com sucesso! Cdigo excludo: <?=$_

GET[cod]?>);
location.href=listautor.php;
</script>
<?php
}
$result= mysql_query(select cod_autor, nom_autor from autores
where cod_autor=.$_GET[cod]);
}
?>
<h1>Alterar Autor</h1>
<hr>
<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>
264
<input type=submit name=salvar id=Excluir

value=Excluir>
</td>
</tr>
</table>
</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.

<html>
<head>
charset=iso-8859-1>
<title>Alterar Livro</title>
Unidade 4
265
alert(O nome do Livro deve conter no mnimo 4 caracteres!);
return false;
}
return true;
}
</script>
</head>
<body>
<?php
banco de dados);
// 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 {
$cod_autor=NULL;
}
$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);
?>
alert (Registro alterado com sucesso! Cdigo gerado: <?=$_
POST[cod]?>);
266
</script>
<?php
}
$result= mysql_query(select cod_livro, nom_livro, cod_autor from
livros where cod_livro=.$_GET[cod]);
}
?>
<h1>Alterar Livro</h1>
<hr>
<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>
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
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>
<input type=submit name=salvar id=Alterar
value=Alterar>
</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.

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

<html>
<head>
charset=iso-8859-1>
<title>Alterar Livro</title>
// 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]!=) {
banco de dados);
// 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 ; }
// segundo filtro montado se existir algum caracter
$pesquisa.=nom_autor like %.$_POST[nom_autor].%;
}
// 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>
<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>
Unidade 4
271
<tr>
<input type=submit name=pesquisar id=pesquisar
value=Pesquisar>
</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;
$fundo=silver;
} else {
$fundo=white;
}
?>
<tr style=background:<?=$fundo?>;>
<td><label title=Alterar os dados deste livro><a href=altlivros.
php?cod=<?=$relacao[cod_livro]; ?>><?=$relacao[cod_livro]; ?>
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
Unidade 4
273
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.

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);
}
?>
<html lang=pt-br>
<head>
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

<html lang=pt-br>
<head>
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);
?>
<html lang=pt-br>
<head>
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]!=) {
//criao da varivel
$_SESSION[primeirasessao]=$_POST[nome];
}
?>
<html lang=pt-br>
<head>
charset=iso-8859-1>
<title>Grava Sessão</title>
</head>
<body>
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();
?>
<html lang=pt-br>
<head>
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();
?>
<html lang=pt-br>
<head>
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
$link = mysql_connect($serv, $user, $pass) or die(Erro na conexo
com o banco de dados);
// 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!!;
}
}
?>
<html lang=pt-br>
<head>
charset=iso-8859-1>
<title>Login</title>
</head>
284
<body>
<h1>Login no Sistema </h1>
<hr>
<?php
if (@$msg!=) {
echo <h1 style=\color:#F00\>$msg</h1>\n;
echo <hr>;
}
?>
<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>
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:
<html lang=pt-br>
<head>
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
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.
Unidade 4
289
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
Extensible Markup Language (XML)
Seo 2
Definio de Tipos de Documentos (DTD)
Seo 3
XML-Schema
Seo 4
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:
<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
Posio Inicial
Tamanho
CPF
11
NOME
12
30
ENDEREO
41
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:
<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

<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>;
}
echo </p>;
}
?>
<a href=javascript:back();>Voltar para a gerao do xml</a>
</body>
</HTML>
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.
<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.
<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:
<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>
</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 [
]>
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>
</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:
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 [
<!ATTLIST email tipo CDATA #REQUIRED>
]>
<email tipo=html>
<para>Maria</para>
<de>Joo</de>
</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
Qualquer texto permitido. No confunda atributos CDATA

com sesses CDATA, eles no tm relao.
ID
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.
IDREF ou
IDREFS
Apontam para elementos com um atributo ID. O valor de

um atributo IDREFS pode conter valores IDREF mltiplos
separados por espaos em branco.
ENTITY ou
ENTITIES
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.
NMTOKEN ou
NMTOKEN
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.
Atributos
Enumerados =
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.
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.
#IMPLIED
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.
#FIXED
Especifica que o valor do atributo constante e no

pode ser diferente no documento XML. Um valor
para o atributo requerido.
valor
Especifica um valor padro para o atributo, se no for

definido um.
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 [
<!ENTITY UNISUL Universidade do Sul de Santa Catarina>
]>
<email tipo=text>
<para>Maria</para>
<de>Joo</de>
<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 [
<!ENTITY UNISUL Universidade do Sul de Santa Catarina>
<!ENTITY inserirTexto SYSTEM testeInserir.xml>
]>
<email tipo=text>
<para>Maria</para>
<de>Joo</de>
<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:
"
"
"
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:

"
"
"
320
reutilizar seu Schema em outros Schemas;
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.
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 [
Unidade 5
321

]>
<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
Elemento
<xs:element name=nome
type=xs:string/>
< nome >Silva</ nome >
<xs:element name=paginas
type=xs:integer/>
< paginas >31</ paginas >
<xs:element name=datavencimento
type=xs:date/>
< 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:
<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

<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:
<xs:element name=estado>
<xs:simpleType>
<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:
<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
Unidade 5
329
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:
Unidade 5
331
<?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:sequence>

<xs:element name=isbn>

<xs:simpleType>


<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:
<head>
<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
338
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.
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.
Para saber mais sobre

Atom, pesquise em
<www.atomenabled.
org>.
A maioria dos agregadores de feed disponveis ao usurio suporta

tanto as verses do RSS como o Atom.
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>
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>
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
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.
Unidade 5
341
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
Figura 5.1: logotipo

do RSS.
Fonte: favor incluir
fonte completa.
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
342
=> Exemplo de RSS feed,
description => Exemplo de construo de RSS utilizando o

PHP.,
link
=> http://www.broculos.net,
copyright => Copyright (C) 2008 Broculos.net);

$items = array(
array(title
=> Exemplo 1,
description => Descrio do primeiro Exemplo.,

link
=> http://www.example.com/example1.html,
pubDate
=> date(D, d M Y H:i:s O, mktime(22, 10, 0, 12, 29,
2008)))
, array(title
=> Exemplo 2,
description => Esta a descrio do Exemplo 2.,

link
=> http://www.example.com/example2.html,
pubDate
=> date(D, d M Y H:i:s O, mktime(14, 27, 15, 1, 3,
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>;
}
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.
autoavaliao. O gabarito est disponvel no final do livro-didtico, mas
se esforce para resolver as atividades sem ajuda do gabarito, pois assim
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
Disponvel em: <www.w3schools.com/>. Acesso em: 01 mar.
2010.
<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>.
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
O que o AJAX
Seo 2
Mtodo GET no AJAX
Seo 3
Mtodo POST no AJAX
Seo 4
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>
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(|);
elemento.options[i] = new Option(valores[1], valores[0], 0, 0);
}
}
function limparCombo(combo) {
// recupera o elemento
// limpa todo o contedo do lemento
elemento.length=0;
elemento.options[0] = new Option(------, , 0, 0);
}
</script>
/></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.
<head>
<title>Cadastro de Pessoas</title>
<script type=text/ecmascript src=ajaxInit.js></script>
// 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();>
<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>
<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 (tipoDados==cidade)
}
}
}
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 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) {
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
// conecta do banco
banco de dados);
$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;
enviarcampos
}
}
if (resp!=) {
alert(resp);
return false;
} else {
// envia as informaes para o AJAX
carregarDados (enviarcampos, salvarDados.php, salvar)
}
form.reset();
return false;
}
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;
// conecta do banco
banco de dados);
// 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));
$cidade = @$_GET[cidade];
// o mysql permite a funo replace (deleta e insere a mesma

informao) quando no existe insere, se existe altera
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);

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;
$retorno.=</tr>\n;
}
// encerra a conexo
mysql_close();
$retorno.=</table>;
echo $retorno;
?>
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.
if (tipoDados==salvar)
document.getElementById(pagina).innerHTML =
ajax.responseText;
}
}
}
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 = ;
// conecta do banco
banco de dados);

$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);
$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.
if (tipoDados==pessoa)
carregarPessoa(ajax.responseText);
if (tipoDados==salvar)
document.getElementById(pagina).innerHTML =
ajax.responseText;
}
}
}
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) {
elemento.innerHTML = Impossvel iniciar o objeto
XMLHttpRequest.;
378
return;
} else {
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>
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) {
// 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

// 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;
}
?>
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
autoavaliao. O gabarito est disponvel no final do livro-didtico, mas
se esforce para resolver as atividades sem ajuda do gabarito, pois assim
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
Disponvel em: <www.w3schools.com>. Acesso em: 01 mar.
2010.
<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>.
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
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.
<head>
<title>Exercicio Um</title>
</head>
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) <=
9)))
return false;
}
return true;
}
function validar(form) {
//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
120 anos\n;
msgerro=true;
}
} else {
erro+=O Campo Idade deve conter somente nmeros
inteiros\n;
msgerro=true;
}
var email=form.txt_email.value;
if (email==) {
erro+=O Campo E-mail obrigatrio\n;
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
erro+=O Campo E-mail deve conter um e-mail vlido\n;

msgerro=true;
}
}
if (msgerro) {
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.

<head>
<title>Exerccio dois</title>
</head>
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 >>>
<head>
<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 >>>

<head>
<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
/>\n;
$controle=true;
}
if ($_POST[txt_nomemae]==) {
$validacampos.=O campo nome da me deve ser preenchido<br
/>\n;
$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;
$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 />;
$controle=true;
}
}
if ($controle==true)
erro(2,$validacampos);
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 >>>
<head>
<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
/>\n;
$controle=true;
}
if ($_POST[txt_nomemae]==) {
412
$validacampos.=O campo nome da me deve ser preenchido<br

/>\n;
$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;
$controle=true;
}
}
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 />;
$controle=true;
}
}
if ($controle==true)
erro(2,$validacampos);
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>;
} else echo <h4>Erro ao gerar o arquivo</h4>;
}
}
?>
</body>
</html>
<<< arquivo learquivo.php >>>
<head>
<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) {
415
echo <h1>Resultado da leitura</h1>;

echo <table align=left cellpadding=2 cellspacing=0
border=1>;
//feof testa o fim do arquivo, utiliza um ponteiro lendo
linha a linha
while (!feof($fp)) {
$conteudo=fgets($fp);
//converte uma string em array ao encontrar o
caractere :
$dados=explode(:, $conteudo);
if ($dados[0]==) continue;
echo <tr><td>.$dados[0].</td>;
echo <td>.$dados[1].</td></tr>;
}
} else echo <h4>Erro ao gerar o arquivo</h4>;
}
}
?>
</body>
</html>
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);
?>
<<< 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.
</div>
<?php
else:
?>
Erro ao cadastrar livro.
</div>
<?php
endif;
else:
?>
É necessário preencher
todos os campos para cadastrar o livro.
</div>
<?php
endif;
endif;
?>
<form name=cadastro id=cadastro method=post>
<label for=nome>Nome:</label>
<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
?>
w3.org/1999/xhtml>
<head>
<title>Consulta de Livros</title>
</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 != ):
?>
<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_
assoc($queryConsulta)):
?>
<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>
422
<td><?php echo
$livro[autor]; ?></td>
<td><?php echo
$livro[editora]; ?></td>
<td><?php echo
$livro[paginas]; ?></td>
</tr>
<?php
endwhile;
?>
</tbody>
</table>
<?php
else:
?>
Nenhum livro encontrado.
</div>
<?php
endif;
endif;
?>
<form name=consulta id=consulta method=post>
<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 >>>

w3.org/1999/xhtml>
<head>
<title>Livros</title>
</head>
<body>
<?php
// incluui o menu de navegao
include(menu.php);
?>
</body>
</html>
<<< arquivo lista.php >>>
<?php
?>
w3.org/1999/xhtml>
<head>
<title>Lista de Livros</title>
</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><?php echo $livro[autor];
?></td>
<td><?php echo $livro[editora];
?></td>
<td><?php echo $livro[paginas];
?></td>
</tr>
425
<?php
endwhile;
?>
</tbody>
</table>
</body>
</html>
<<< arquivo livro.php >>>
<?php
?>
w3.org/1999/xhtml>
<head>
<title>Detalhes do Livro</title>
</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>
<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>
</tr>
<tr>
<th>Páginas</th>
<td><?php echo $livro[paginas];
?></td>
</tr>
</tbody>
</table>
<?php
else:
?>
427

Livro não encontrado.
</div>
<?php
endif;
?>
</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);
?>
<<< arquivo estilo.css >>>

/* CSS criado para melhorar o visual da aplicao*/
/* Tudo */
/* Tags */
/* Mensagens */
/* Formulario */
429
input#nome, input#login, input#senha { width:390px; }

/* Menu */
/* Tabelas */
<<< arquivo cadastro.php >>>
<?php
//verifica se o usurio est logado
include(./verificacao.php);
//inclui a conexo com o banco de dados
?>
w3.org/1999/xhtml>
<head>
<title>Cadastro de Usuários</title>
</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])) ):
$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):
?>
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.)))):
?>
Usuário cadastrado com
sucesso.
</div>
<?php
else:
?>
431
Erro ao cadastrar usuário.

</div>
<?php
endif;
else:
?>
todos os campos para cadastrar o usuário.
</div>
<?php
endif;
endif;
?>
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 />
</form>
</body>
</html>
432
<<< arquivo consulta.php >>>

<?php
//verifica se o usurio est logado
//inclui a conexo com o banco de dados
?>
w3.org/1999/xhtml>
<head>
<title>Consulta de Usuários</title>
</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 != ):
?>
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_
assoc($queryConsulta)):
?>
<tr>
<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><?php echo
$usuario[login]; ?></td>
</tr>
<?php
endwhile;
?>
</tbody>
</table>
<?php
else:
434
?>
Nenhum usuário encontrado.
</div>
<?php
endif;
endif;
?>
<form name=consulta id=consulta method=post>
<input tabindex=1 type=text id=nome
name=nome />
</form>
</body>
</html>
<<< arquivo index.php >>>
<?php
// Verifica se esta logado
include(verificacao.php);
?>
w3.org/1999/xhtml>
<head>
<title>Usuários</title>
</head>
<body>
435
<?php
// Se estiver logado inclui o menu
include(menu.php);
?>
</body>
</html>
<<< arquivo lista.php >>>
<?php
?>
w3.org/1999/xhtml>
<head>
<title>Lista de Usuários</title>
</head>
<body>
<?php
include(menu.php);
?>
<h1>Lista de Usuários</h1>
<table>
<thead>
<tr>
436
<th>Código</th>
<th>Nome</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<?php
$usuarios = mysql_query(SELECT * FROM
usuario);
while($usuario = mysql_fetch_assoc($usuarios)):
?>
<tr>
<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><?php echo $usuario[login];
?></td>
</tr>
<?php
endwhile;
?>
</tbody>
</table>
</body>
</html>
437
<<< arquivo login.php >>>

<?php
//inicia a sesso
session_start();
?>
w3.org/1999/xhtml>
<head>
<title>Área Restrita</title>
</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);
// registra uma sesso
$_SESSION[administracao][usuario] =
$usuario[nome];
438
?>
Autenticado com sucesso. <br />
<a href=./index.php>Clique
aqui</a> para continuar.
</div>
<?php
else:
?>
Login/Senha incorretos.
</div>
<?php
endif;
else:
?>
todos os campos.
</div>
<?php
endif;
endif;
?>
<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 >>>

Bem vindo <strong><?php echo $_SESSION[administracao][usuario];
?></strong>! [<a href=./logout.php>Sair</a>]
</div>
<ul id=menu>
a></li>
a></li>
</ul>
440
<<< arquivo usurio.php >>>

<?php
?>
w3.org/1999/xhtml>
<head>
<title>Detalhes do Usuário</title>
</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>
<th>Login</th>
<td><?php echo $usuario[login];
?></td>
</tr>
</tbody>
</table>
<?php
else:
?>
Usuário não encontrado.
</div>
<?php
endif;
?>
</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 */
/* Tags */
/* Mensagens */
/* Formulario */
input#nome { width:390px; }
/* Menu */
444

/* Tabelas */
/* 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.
w3.org/1999/xhtml>
<head>
<title>Pessoas</title>
</head>
<body>
<?php
include(menu.php);
451
?>
</body>
</html>
Arquivo menu.php no diretrio padro.
<ul id=menu>
a></li>
a></li>
</ul>
Arquivo cadastro.php no diretrio padro.
<?php
?>
w3.org/1999/xhtml>
<head>
<title>Cadastro de Pessoas</title>
</head>
<body>
<?php
include(menu.php);
?>
<h1>Cadastro de Pessoas</h1>
452
<?php
if(!empty($_POST)):
if(!empty($_POST[nome])):
$pessoas = mysql_query(SELECT * FROM pessoa
WHERE UPPER(nome) = .strtoupper($nome).);
if(mysql_num_rows($pessoas) >= 1):
?>
Já existe uma pessoa com
este nome cadastrada.
</div>
<?php
elseif(mysql_query(INSERT INTO pessoa VALUES
(NULL, .$nome., SYSDATE()))):
?>
Pessoa Cadastrada com sucesso.
</div>
<?php
else:
?>
Erro ao cadastrar pessoa.
</div>
<?php
endif;
else:
?>
Você precisa digitar um nome para
cadastrar a pessoa.
453
</div>
<?php
endif;
endif;
?>
tabindex=1 />
</form>
</body>
</html>
Arquivo consulta.php no diretrio padro.
<?php
session_start();
echo $_SESSION[teste];
unset($_SESSION[teste]);
?>
w3.org/1999/xhtml>
<head>
html;charset=UTF-8/>
<title>Consulta de Pessoas</title>
454
<script src=./js/micox.js type=text/javascript></script>

function exibeSugestoes() {
document.getElementById(pessoa).style.
display=none;
nome = document.getElementById(nome).value;
ajaxGet(sugestoes.php?nome=+nome,
document.getElementById(sugestoes), true);
document.getElementById(sugestoes).style.
display=block;
}
function preenche(nome) {
display=none;
display=none;
document.getElementById(nome).value = nome;
}
function exibePessoa(nome)
display=none;
nome = document.getElementById(nome).value;
ajaxGet(pessoa.php?nome=+nome, document.
getElementById(pessoa), true);
display=block;
return false;
}
</script>
</head>
<body>
<?php
include(menu.php);
455
?>
<h1>Consulta de Pessoas</h1>
<form name=consulta id=consulta
onSubmit=javascript:return exibePessoa();>
<input tabindex=1 type=text onkeyup=javascript:ex
ibeSugestoes(); name=nome<?php echo rand(1,10000); ?> id=nome
/>
</form>
<div id=sugestoes>
</div>
<div id=pessoa>
</div>
</body>
</html>
Arquivo lista.php no diretrio padro.
<?php
?>
w3.org/1999/xhtml>
<head>
<title>Lista de Pessoas</title>
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
pessoa);
while($pessoa = mysql_fetch_assoc($pessoas)):
?>
<tr>
<td><?php echo
$pessoa[codigo]; ?></td>
<td><?php echo $pessoa[nome];
?></td>
<td><?php echo
$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);
$nome = $_GET[nome];
$pessoas = mysql_query(SELECT * FROM pessoa WHERE nome LIKE
%.$nome.%);
if(mysql_num_rows($pessoas) == 0):
?>
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
<td><?php echo $pessoa[codigo]; ?></td>

<td><?php echo $pessoa[nome]; ?></td>
<td><?php echo $pessoa[cadastro]; ?></td>
</tr>
</tbody>
</table>
<?php
else:
?>
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);
$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.

Linguagem de Programacao III Completo

Enviado por

Direitos autorais:

Formatos disponíveis

Linguagem de Programacao III Completo

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Linguagem de Programacao III Completo

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade do Sul de Santa Catarina

Linguagens de Programao III

Secretaria Executiva e Cerimonial

Secretaria de Ensino a Distncia

Coordenao dos Cursos

Giane dos Passos

Assistente das Coordenaes

Alessandro Alves da Silva

Gerncia de Ensino, Pesquisa

Mauro Faccioni Filho

Ednia Araujo Alberto

Carolina Hoeller da S. Boeing

Silvana Souza da Cruz (Coord. Grad.)

Jeferson Cassiano A. da Costa

Fabiano Ceretta (Gerente)

Relacionamento com o Mercado

Arthur Emmanuel F. Silveira (Gerente)

Gerncia Servio de Ateno

Edson Orivaldo Lessa Junior

Linguagens de Programao III

Copyright UnisulVirtual 2011

Edio Livro Didtico

Lessa Junior, Edson Orivaldo

1. Desenho grfico. 2. Artes grficas. 3. Desenho comercial. I. Matuzawa,

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

Bom estudo e sucesso!

O Espao UnisulVirtual de Aprendizagem (EVA).

As atividades de avaliao (a distncia, presenciais e

Universidade do Sul de Santa Catarina

Identificar e caracterizar as aplicaes Web sob a viso

Linguagens de Programao III

conhecimentos que voc dever possuir para o desenvolvimento

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

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

Verifique com ateno o EVA, organize-se para acessar

Demais atividades (registro pessoal)

Identifique as principais caractersticas do

Conhea os mtodos de comunicao entre as

Conhea as principais tecnologias disponveis.

Conceitos envolvidos no desenvolvimento

Universidade do Sul de Santa Catarina

Para incio de estudo

Linguagens de Programao III

Padronizao: as pginas estritas em HTML tem

Universidade do Sul de Santa Catarina

Diversidade: o HTML permite uma singularidade a

O HTML construdo para que o documento seja um arquivo

Linguagens de Programao III

Figura 1.1 - Internet Explorer desenvolvido pela Microsoft.

Figura 1.2 - Chrome desenvolvido pela Google.

Figura 1.3 - Safari desenvolvido pela Apple.

Universidade do Sul de Santa Catarina